componentDidMount() { // this.mount.appendChild( WEBVR.createButton(this.renderer)); this.renderer.vr.enabled = true; this.renderer.setAnimationLoop(() => { this.renderer.render(this.scene, this.camera); }); }
constructor(props) { super(props); this.state = {}; this.animate = this.animate.bind(this); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 60 ); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); }
function onWindowResize() { const { width, height } = canvas; screenDimensions.width = width; screenDimensions.height = height; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }
render(scene, camera) { // Renders scene to canvas target this.threeRenderer.render(scene, camera); }
function buildRender({ width, height }) { const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); const DPR = window.devicePixelRatio ? window.devicePixelRatio : 1; renderer.setPixelRatio(DPR); renderer.setSize(width, height); renderer.gammaInput = true; renderer.gammaOutput = true; return renderer; }
function update() { const elapsedTime = clock.getElapsedTime(); for(let i=0; i<sceneSubjects.length; i++) sceneSubjects[i].update(elapsedTime); updateCameraPositionRelativeToMouse(); renderer.render(scene, camera); }
componentWillUnmount() { window.removeEventListener('resize'); this.stop(); this.mount.removeChild(this.renderer.domElement); }
animate() { this.renderer.render( this.scene, this.camera ); if (this.mixer != null) { this.mixer.update(2); } requestAnimationFrame( this.animate ); }
componentDidMount() { this.mount.appendChild( this.renderer.domElement ); }
function update() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); if(idx > 0) { encoder.addFrame(canvas.__ctx__); console.log(`add frame ${idx}`); } idx++; if(idx < 300) { setTimeout(update, 16); } }
updateSize() { this.threeRenderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight, false) }
animate() { // this.controls.update(); for(let d = 0; d < this.decorations.length; d++) { this.decorations[d].updatePosition(); } this.renderer.render(this.scene, this.camera); requestAnimationFrame(this.animate); }
animate() { this.renderer.render( this.scene, this.camera ); if (this.mixer != null) { this.mixer.update(2); } requestAnimationFrame( this.animate ); }
render(scene, camera) { // Renders scene to canvas target this.threeRenderer.render(scene, camera) }
componentDidMount() { this.mount.appendChild( this.renderer.domElement ); }