I am currently working on creating a room in ThreeJS, and here is the progress I have made so 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();
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 3.0;
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 );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[ i ].color.setHex(Math.random() * 0xffffff);
}
material = new THREE.MeshNormalMaterial();
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();
}
function render() {
renderer.render(scene, camera);
}
The current implementation works fine but lacks depth perception. The walls should feel farther away than they currently do. Can anyone suggest how I can achieve this effect? I've tried studying examples without success.