function buildCamera({ width, height }) { const aspectRatio = width / height; const fieldOfView = 60; const nearPlane = 4; const farPlane = 100; const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); camera.position.z = 40; return camera; }
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); }
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 ); }
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) }
componentDidMount() { const width = this.mount.clientWidth; const height = this.mount.clientHeight; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.loader = new GLTFLoader(); this.controls = new OrbitControls(this.camera, this.renderer.domElement); // Add a light source!!! // const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); this.scene.add(light); this.camera.position.z = 2; this.camera.position.y = 0.7; this.camera.position.x = 0.7; this.loadModel(); this.renderer.setSize(width, height); window.addEventListener('resize', this.handleResize); this.mount.appendChild(this.renderer.domElement); this.init(); }
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.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 geometry = new t3.BoxGeometry( 4, 1 , 1); const material = new t3.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ); this.cube = new t3.Mesh( geometry, material ); this.scene.add( this.cube ); this.camera.position.z = 5; const animate = () => { requestAnimationFrame( animate ); this.cube.rotation.x += 0.01; this.cube.rotation.y += 0.01; this.renderer.render( this.scene, this.camera ); }; animate(); }
scene.add( cube ); camera.position.z = 10;
decoration1.position.y += 10; this.scene.add(decoration1); this.decorations.push(decoration1); decoration2.position.set(20,15,-10); decoration2.scale.set(.8,.8,.8); this.scene.add(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 ); this.camera.position.z = 5; this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = t3.PCFSoftShadowMap;
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 ); }
this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 60 ); directionalLight.position.set( 0, 1, 1 ).normalize(); this.scene.add( directionalLight ); this.mixer.clipAction(clip).play(); }); gltf.scene.position.y -= 10; this.scene.add( gltf.scene ); this.renderer.render( this.scene, this.camera );