constructor(renderer) { const width = renderer.domElement.width; const height = renderer.domElement.height; // Create and position a Perspective Camera this.threeCamera = new THREE.PerspectiveCamera(Config.camera.fov, width / height, Config.camera.near, Config.camera.far); this.threeCamera.position.set(Config.camera.posX, Config.camera.posY, Config.camera.posZ); // Initial sizing this.updateSize(renderer); // Listeners window.addEventListener('resize', () => this.updateSize(renderer), false); }
place(position, rotation) { const material = new Material(0xeeeeee).standard; const mesh = new THREE.Mesh(this.geo, material); // Use ES6 spread to set position and rotation from passed in array mesh.position.set(...position); mesh.rotation.set(...rotation); if(Config.shadow.enabled) { mesh.receiveShadow = true; } this.scene.add(mesh); }
integrate(delta) { const newPos = this.tmp.subVectors(this.position, this.previous); newPos.multiplyScalar(this.drag).add(this.position); newPos.add(this.acceleration.multiplyScalar(delta * delta)); this.tmp = this.previous; this.previous = this.position; this.position = newPos; this.acceleration.set(0, 0, 0); }
function update(time) { const angle = time*speed; group.rotation.y = angle; subjectMaterial.alphaMap.offset.y = 0.55 + time * textureOffsetSpeed; subjectWireframe.material.color.setHSL( Math.sin(angle*2), 0.5, 0.5 ); const scale = (Math.sin(angle*8)+6.4)/5; subjectWireframe.scale.set(scale, scale, scale) }
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 ); }
// Load the model // this.loader.load( './bread.glb', (gltf) => { // called when the resource is loaded var model = gltf.scene; model.scale.set(5, 5, 5); this.scene.add(model); }, (xhr) => { // called while loading is progressing console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`); }, (error) => { // called when loading has errors console.error('An error happened', error); } );
function rotateEAxis() { point.applyMatrix4(tempMatrix.getInverse(lookAtMatrix)); tempVector.applyMatrix4(tempMatrix.getInverse(lookAtMatrix)); rotation.set( Math.atan2(point.z, point.y), Math.atan2(point.x, point.z), Math.atan2(point.y, point.x) ); offsetRotation.set( Math.atan2(tempVector.z, tempVector.y), Math.atan2(tempVector.x, tempVector.z), Math.atan2(tempVector.y, tempVector.x) ); tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse(parentRotationMatrix) ); quaternionE.setFromAxisAngle(eye, offsetRotation.z - rotation.z); quaternionXYZ.setFromRotationMatrix(worldRotationMatrix); tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionE); tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionXYZ); scope.object.quaternion.copy(tempQuaternion); }
constructor(renderer, RENDER_D) { const { width, height } = renderer.domElement // Create and position a Perspective Camera this.threeCamera = new THREE.PerspectiveCamera( CAMERA_CONFIG.fov, width / height, CAMERA_CONFIG.near, (RENDER_D - 1) * SIZE * DIMENSION * 2.5 ) this.threeCamera.position.set( CAMERA_CONFIG.posX, CAMERA_CONFIG.posY, CAMERA_CONFIG.posZ ) // Initial sizing this.updateSize(renderer) }
constructor(props) { super(props); this.state = {}; this.scene = new t3.Scene(); this.camera = new t3.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 100 ); this.camera.lookAt( 0, 0, 0 ); this.renderer = new t3.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); // Load the Orbitcontroller // eslint-disable-next-line var controls = new OrbitControls(this.camera, this.renderer.domElement ); const material = new t3.LineBasicMaterial( { color: 0xff0000} ); const geometry = new t3.Geometry(); geometry.vertices.push(new t3.Vector3( -10, 0, 0) ); geometry.vertices.push(new t3.Vector3( 0, 10, 0) ); geometry.vertices.push(new t3.Vector3( 10, 0, 0) ); var line = new t3.Line( geometry, material ); this.scene.add( line ); this.renderer.render( this.scene, this.camera ); }
decoration2.position.set(20,15,-10); decoration2.scale.set(.8,.8,.8); this.scene.add(decoration2); this.decorations.push(decoration2); decoration3.position.set(-20,20,-12); this.scene.add(decoration3); this.decorations.push(decoration3); pointLight.position.set( 25, 50, 25 ); this.scene.add( pointLight );