У вас возникли проблемы с камерой three.js

Question

У меня возникли проблемы с тем, как использовать камеру three.js.

Это в основном то, что я Тринг достичь. У меня есть небольшая карта, на которой игроки могут появляться по ее углам (здесь они представлены как кубики), на эскизе представлены 1, 2, 3 и 4.

Я хочу, чтобы камера была за ними при запуске, представленном «глазом» на моем эскизе, указывая на центр куба 1, оранжевая линия представляет собой линию визирования. Я также нарисовал положение камеры, как я хочу, если я 4-й игрок.

Но это наступит после. Во время тестов я столкнулся с поведением, которого я не ожидал. Позвольте мне объяснить, это то, что я сейчас делаю:

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

Трудно сказать, не глядя на свой код, но вот пример делает то, что вы описали, что также вызывает 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); 

}