javascript - ThreeJS - Inside A Room - Depth -
i able create room in threejs. here have far:
var camera, scene, renderer, geometry, material, mesh, focus; init(); animate(); function init() { scene = new three.scene(); focus = new three.vector3( 0, 0, 0 ); camera = new three.perspectivecamera( 45, window.innerwidth / window.innerheight, 1, 1000 ); scene.add(camera); camera.position.set(0,0,1); camera.lookat(focus); camera.updateprojectionmatrix(); //camera.lookat(scene.position) controls = new three.trackballcontrols( camera ); controls.rotatespeed = 3.0; //controls.zoomspeed = 0; //controls.panspeed = 0.8; controls.nozoom = true; controls.nopan = true; controls.staticmoving = true; controls.dynamicdampingfactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addeventlistener( 'change', render ); geometry = new three.boxgeometry( 1000, 1000, 1000 ); ( var = 0; < geometry.faces.length; ++ ) { geometry.faces[ ].color.sethex( math.random() * 0xffffff ); } //material = new three.meshbasicmaterial({ color: 0xffffff, vertexcolors: three.facecolors }); material = new three.meshnormalmaterial(); material.side = three.doubleside; mesh = new three.mesh(geometry, material); mesh.flipsided = true; scene.add(mesh); renderer = new three.webglrenderer({antialias: false}); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); render(); } function animate() { requestanimationframe(animate); controls.update(); //render(); } function render() { //mesh.rotation.x += 0.01; //mesh.rotation.y += 0.02; //var timer = - new date().gettime() * 0.0002; //camera.position.x = 1000 * math.cos( timer ); //camera.position.z = 1000 * math.sin( timer ); renderer.render(scene, camera); } this works, doesn't feel there depth (i.e. walls should feel far away).
any ideas how can accomplish this? tried looking @ examples , can't figure out.
modify field of view on camera.
three.perspectivecamera( 45 try making value between 10 , 180.