2015-04-22 60 views
0

我希望能夠在ThreeJS中創建一個房間。以下是我迄今爲止: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); 

} 

這工作,但它並不覺得有多大的深度(即牆面應該感到遠)。

任何想法我可以做到這一點?我試圖看看這些例子,但無法弄清楚。

+0

之間的值,喜爲什麼這與DIV容器互動?寫在哪裏找不到那 – utdev

+0

你知道一種方法把這個房間放在一個div,就像500x500 – utdev

回答

1

修改相機的視野。

THREE.PerspectiveCamera(45 

嘗試使這10和180

+0

這非常接近,謝謝。任何想法如何讓相機在「房間」的中心點擊並拖動將使您身邊(保持地平線穩定) – user472292

+0

使用orbitcontrols –