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

}