使用three.js相機時遇到問題

Question

我很難弄清楚如何使用three.js相機。

這基本上就是我特林實現。我有一個小地圖，玩家可以在其角上產卵（這裏，它們表示爲立方體），在它所代表的草圖上，有1,2,3和4.

我希望攝像頭在它們後面在啓動時，由我的素描上的「眼睛」表示，指向立方體1的中心，橙色線代表視線。如果我是第四個玩家，我也會根據需要提取相機的位置。

但它會來。在測試過程中，我面臨着一個我並不期待的行爲。讓我解釋一下，這是目前我在做什麼：

camera.position.set(player.position.x, player.position.y + 2, player.position.z + 3); 
camera.lookAt(player.position); 

的player變量是THREE.Mesh。相機應該放在播放器的頂部，如果播放器在1或3中產生，它會按預期工作，但在2中，這絕對是錯誤的：當我用鼠標移動它時，它會像它一樣旋轉它在Y軸上旋轉，我永遠不能看到我的立方體......我認爲我在我的球員上使用lookAt()方法的事實允許我用我的相機指向它，但顯然我錯了。

有人能解釋爲什麼它不能按預期工作嗎？

Answer 1

難說不看你的代碼，但這裏是一個樣本做你的描述，這也與鍵x，y和z中的一個對象調用的lookAt ...

http://jsfiddle.net/vn4t6o6u/1/

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 

    // Place camera on x axis 

    scene.add(camera); 
     camera.position.set(-6,-6,30); 
    camera.up = new THREE.Vector3(0,0,1);  
    camera.lookAt({x:0,y:0,z:0}); 
    setTimeout(function(){ 
      camera.position.set(14,-6,30); 
     camera.lookAt({x:8,y:0,z:0}); 
    }, 1000) 
    setTimeout(function(){ 
      camera.position.set(-6,14,30); 
     camera.lookAt({x:0,y:8,z:0}); 
    }, 2000) 
    setTimeout(function(){ 
      camera.position.set(14,14,30); 
     camera.lookAt({x:8,y:8,z:0}); 
    }, 3000) 

    geometry1 = new THREE.CubeGeometry(2, 2, 2); 
    geometry2 = new THREE.CubeGeometry(2, 2, 2); 
    geometry3 = new THREE.CubeGeometry(2, 2, 2); 
    geometry4 = new THREE.CubeGeometry(2, 2, 2); 

    material1 = new THREE.MeshLambertMaterial({color: 0xff0000}); 
    material2 = new THREE.MeshLambertMaterial({color: 0x00ff00}); 
    material3 = new THREE.MeshLambertMaterial({color: 0x0000ff}); 
    material4 = new THREE.MeshLambertMaterial({color: 0x00ffff}); 

    mesh1 = new THREE.Mesh(geometry1, material1); 
    mesh2 = new THREE.Mesh(geometry2, material2);  
    mesh3 = new THREE.Mesh(geometry3, material3);  
    mesh4 = new THREE.Mesh(geometry4, material4);  

    mesh1.position.set(0, 0, 0); 
    mesh2.position.set(8, 0, 0); 
    mesh3.position.set(0, 8, 0); 
    mesh4.position.set(8, 8, 0); 

     scene.add(mesh1); 
    scene.add(mesh2); 
    scene.add(mesh3); 
    scene.add(mesh4); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 




    renderer.render(scene, camera); 

}