javascript - ThreeJS - 房间内 - 深度

Question

我希望能够在 ThreeJS 中创建一个房间。这是我到目前为止所拥有的:

http://jsfiddle.net/7oyq4yqz/

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 );
    for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].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);

}

这可行，但感觉没有太多深度(即墙壁应该感觉很远)。

有什么想法可以实现这一点吗？我尝试查看示例，但无法弄清楚。

Answer 1

修改相机的视野。

THREE.PerspectiveCamera( 45

尝试将其设置为 10 到 180 之间的值。