Top 10 Examples of "three in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'three' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
const GIFEncoder = require('gifencoder');
const {createCanvas} = require('../lib');
const width = 512,
height = 512;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const canvas = createCanvas(width, height);
const renderer = new THREE.WebGLRenderer({
canvas,
});
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const encoder = new GIFEncoder(width, height);
encoder.createReadStream().pipe(fs.createWriteStream('./snapshot/threejs-cube.gif'));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(16); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.
let idx = 0;
function update() {
cube.rotation.x += 0.01;assignSkeleton(bone) {
if (bone.name === 'root') {
bone.originalUp = new THREE.Vector3(0, 1, 0);
} else {
// bone.posRef is the link between this bone and our BONES array
const index = parseInt(bone.name.split('_')[1], 10);
bone.posRef = index + 1;
bone.originalUp = new THREE.Vector3(0, 1, 0).applyQuaternion(bone.quaternion).normalize();
// save original length for retargeting
bone.originalLength = bone.position.length();
}
// arrow helpers to assist with bone directions
bone.originalForward = new THREE.Vector3(0, 0, 1).transformDirection(bone.matrixWorld);
bone.arrowHelper = new THREE.ArrowHelper(bone.originalForward,
bone.getWorldPosition(new THREE.Vector3()), 0.08, 0xff0000);
bone.arrowHelper.visible = false;
this.scene.add(bone.arrowHelper);
bone.upArrowHelper = new THREE.ArrowHelper(
new THREE.Vector3(0, 1, 0).transformDirection(bone.matrixWorld),
bone.getWorldPosition(new THREE.Vector3()), 0.08, 0x0000ff,
);
bone.upArrowHelper.visible = false;
this.scene.add(bone.upArrowHelper);
// repeat down the heirarchy
bone.children.forEach((child) => {
this.assignSkeleton(child);
});
}// this.renderer.render(current.scene, this.cameraForRenderTargets);
// } else {
if (!current.skip) {
this.renderer.setClearColor(new Color(0x000000), 0.0);
this.renderer.setRenderTarget(current.target);
this.renderer.render(current.scene, this.cameraForRenderTargets);
}
// } else {
// console.log(current.target.texture.uuid);
// }
// }
}
}
this.renderer.setRenderTarget(null);
this.renderer.setClearColor(new Color(0x000000), 0.0);
this.renderer.render(this.scene, this.camera);
if (config.renderView.postProcessing && this.effectComposer && window.d3) {
this.effectComposer.render(this.elapse);
}
if (window.port && window.port.onRender) {
window.port.onRender.forEach(o => {
o(this.renderer, this.scene);
});
}
}function init(nodeCollection) {
disconnectOldNodes();
total = nodeCollection.length;
nodes = nodeCollection;
// if we can ruse old arrays - do it! No need to stress the GC
var pointsInitialized = points !== undefined && points.length === total * 3;
if (!pointsInitialized) points = new Float32Array(total * 3);
var colorsInitialized = colors !== undefined && colors.length === total * 3;
if (!colorsInitialized) colors = new Float32Array(total * 3);
var sizesInitialized = sizes !== undefined && sizes.length === total;
if (!sizesInitialized) sizes = new Float32Array(total);
geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(points, 3));
geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
if (particleSystem) {
scene.remove(particleSystem);
}
particleSystem = new THREE.Points(geometry, particleMaterial);
particleSystem.name = 'nodes';
particleSystem.frustumCulled = false;
scene.add(particleSystem);
for (var i = 0; i < total; ++i) {
var node = nodes[i];
// first make sure any update to underlying node properties result in};
// Allocate max size object
let pArray = new Float32Array(pSize * 3);
let iArray = new Uint32Array(iSize);
for(let i = 0; i < pSize; i++) {
pArray[i] = Math.random();
}
for(let i = 0; i < iSize; i++) {
iArray[i] = i % pSize;
}
geom.addAttribute( 'position', new THREE.BufferAttribute( pArray, 3 ) );
geom.setIndex( new THREE.BufferAttribute( iArray, 1 ) );
geom.addAttribute( 'color', new THREE.BufferAttribute( colorBuf, 3 ) );
geom.computeFaceNormals();
//geom.computeVertexNormals();
this.renderer.render(this.scene, this.camera);
} else {
var renderInfo = this.meshMap[geo.name],
geometry = renderInfo.mesh.geometry,
colors = renderInfo.colorBuffer;
if (geometry.vertices && geo.points.length !== geometry.vertices.length) {
console.log("******** We may have a problem here, new point count = " + geo.points.length + ", old point count = " + geometry.vertices.length);
// FIXME: Allocate new color buffer here
}
// geometry.setIndex( new THREE.BufferAttribute( geo.index, 1 ) );public _initArtoolkit(onCompleted: () => any) {
// set this._artoolkitProjectionAxisTransformMatrix to change artoolkit
// projection matrix axis to match usual` webgl one
this._artoolkitProjectionAxisTransformMatrix = new THREE.Matrix4();
this._artoolkitProjectionAxisTransformMatrix.multiply(
new THREE.Matrix4().makeRotationY(Math.PI)
);
this._artoolkitProjectionAxisTransformMatrix.multiply(
new THREE.Matrix4().makeRotationZ(Math.PI)
);
// get cameraParameters
const cameraParameters = new ARToolKitCameraParam(
this.parameters.cameraParametersUrl,
() => {
// init controller
const arController = new ARToolKitController(
this.parameters.canvasWidth,
this.parameters.canvasHeight,
cameraParameters
);init()
{
var scope = this;
ImageUtils.crossOrigin = '';
var orthoScale = 100;
var orthoWidth = window.innerWidth;
var orthoHeight = window.innerHeight;
scope.domElement = scope.element.get(0);
scope.fpscamera = new PerspectiveCamera(60, 1, 1, 10000 );
scope.perspectivecamera = new PerspectiveCamera(45, 10, scope.cameraNear, scope.cameraFar);
scope.orthocamera = new OrthographicCamera(orthoWidth / -orthoScale, orthoWidth /orthoScale, orthoHeight /orthoScale, orthoHeight / -orthoScale, scope.cameraNear, scope.cameraFar);
scope.camera = scope.perspectivecamera;
// scope.camera = scope.orthocamera;
scope.renderer = scope.getARenderer();
scope.domElement.appendChild(scope.renderer.domElement);
scope.skybox = new Skybox(scope.scene, scope.renderer);
scope.controls = new OrbitControls(scope.camera, scope.domElement);
scope.controls.autoRotate = this.options['spin'];
scope.controls.enableDamping = true;
scope.controls.dampingFactor = 0.5;
scope.controls.maxPolarAngle = Math.PI * 0.5;
scope.controls.maxDistance = 3000;init() {
const containerWidth = this._context.container.width;
const containerHeight = this._context.container.height;
this._camera = new THREE.PerspectiveCamera(
50,
containerWidth / containerHeight,
rescaleNumber(0.00001),
rescaleNumber(2000),
);
// Controls
// TODO(ian): Set maxDistance to prevent camera farplane cutoff.
// See https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/6
const controls = new OrbitControls(this._camera, this._simulationElt);
controls.enableDamping = true;
controls.enablePan = true;
controls.zoomSpeed = 1.5;
controls.userPanSpeed = 20;
controls.rotateSpeed = 2;
controls.touches = {this.resolution = window.devicePixelRatio;
this.animationToken = 0;
// and the targets
this.rTarget1 = RenderTarget.clone();
this.rTarget1.texture.name = 'RT1';
this.rTarget2 = RenderTarget.clone();
this.rTarget2.texture.name = 'RT2';
this.writeBuffer = this.rTarget1;
this.readBuffer = this.rTarget2;
// Add a render pass
this.passes = [];
// now add a renderer, camera and plane to render the textures to
this.renderer = new WebGLRenderer(options);
// console.log('EffectRenderer make renderer', this.renderer.id = 'id-internal-renderer');
this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.quad = new Mesh(new PlaneGeometry(2,2), null);
this.scene = new Scene();
this.scene.add(this.quad);
// events
window.addEventListener('resize', this.resizeHandler.bind(this));
// set up renderer
this.renderer.setPixelRatio(this.resolution);
this.renderer.setSize(width / this.resolution, height / this.resolution);
// populate the store
this.setStore();veuler: null,
pos: null
};
let canFall = false;
const x = data.getInt16(offset + 2, true);
const y = data.getInt16(offset + 4, true);
const z = data.getInt16(offset + 6, true);
// assigned based on type of bone animation (rotation or translation)
if (boneframe.type === 0) { // rotation
boneframe.pos = new THREE.Vector3(0, 0, 0);
boneframe.veuler = new THREE.Vector3(x, y, z);
} else { // translation
boneframe.veuler = new THREE.Vector3(0, 0, 0);
boneframe.pos = new THREE.Vector3(
x * WORLD_SCALE,
y * WORLD_SCALE,
z * WORLD_SCALE
);
canFall = true;
}
return { boneframe, canFall };
}