使用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); 

}