Как подгонять камеру к объекту в three.js?

Question

Я создал некоторые объекты в своей сцене и настроил код raycasting/tweening так, чтобы всякий раз, когда я нажимаю на объект, объект анимируется непосредственно в положение и вращение камеры.

Это мой код для raycasting/твининга объекта:

function onDocumentMouseDown(event) { 

      event.preventDefault(); 

      mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
      mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

      raycaster.setFromCamera(mouse, camera); 

      var intersects = raycaster.intersectObjects(scene.children); 

      if (intersects.length > 0) { 

       new TWEEN.Tween(intersects[ 0 ].object.position).to({ 
        x: 0, 
        y: 0, 
        z: -100 }, 2000) 
       .easing(TWEEN.Easing.Elastic.Out).start(); 

       new TWEEN.Tween(intersects[ 0 ].object.rotation).to({ 
        x: 0, 
        y: 0, 
        z: 0 }, 2000) 
       .easing(TWEEN.Easing.Elastic.Out).start(); 
       object.lookAt.camera; 

      } 
     } 

Однако, мне было интересно, как я могу сделать твин анимировать камеру на объект, а не объект к камере? Я хочу сделать это, потому что хочу, чтобы объекты постоянно вращались и двигались вокруг сцены, и хотели бы, чтобы камера могла оставаться и отслеживать отдельные объекты.

Это все в перспективной камере, кстати.

Answer 1

Предположим, вы используете OrbitControls.js для управления вашей камерой.
Для этого вам необходимо установить цель управления controls.target = new THREE.Vector3(0, 0, -100); в центр вашего объекта (или подстроить его). Вы устанавливаете вращение объектов на (0, 0, 0), так что предположим, что вы хотите посмотреть на свой объект сверху, вы установите положение вашей камеры на (0, 10, -100) - то же, что и вы, в том направлении, в котором вы хотите выглядеть.
Предполагая, что вращение ваших объектов не является (0, 0, 0), вам необходимо рассчитать его вектор вперед (или любой другой вектор, который вы хотите посмотреть), и поместите положение камеры где-нибудь вдоль оси этого вектора ,

Answer 2

Я пытаюсь сделать что-то подобное, вот то, что я до сих пор, но борется с получением объектов сталкиваются с направлением вектора

function toObj(obj) { 

var lookAtVector = new THREE.Vector3(0, 0, 1); 
lookAtVector.applyQuaternion(obj.quaternion); 
console.log(lookAtVector); 
var rotateTween = new TWEEN.Tween(controls.target) 
    .to({ 
     x: obj.position.x, 
     y: obj.position.y, 
     z: obj.position.z 
    }, 4000) 
    .interpolation(TWEEN.Interpolation.CatmullRom) 
    .easing(TWEEN.Easing.Quintic.InOut) 
    .start(); 

var goTween = new TWEEN.Tween(camera.position) 
    .to({ 
     x: obj.position.x, 
     y: obj.position.y, 
     z: obj.position.z + 10 
    }, 4000) 
    .interpolation(TWEEN.Interpolation.CatmullRom) 
    .easing(TWEEN.Easing.Quintic.InOut); 

goTween.start(); 
goTween.onComplete(function() { 
    console.log('done!'); 

}); 

}

вам нужно будет добавить управление = новые ТРИ .TrackballControls (камеры);