three.js에서 카메라를 객체에 트위닝하는 방법은 무엇입니까?

Question

내 장면에 개체를 만들고 레이캐스팅/트위닝 코드를 설정하여 개체를 클릭 할 때마다 개체가 카메라의 위치와 회전에 직접 애니메이션되도록했습니다. 어떻게 오히려 카메라에 객체보다, 트윈 물체에 카메라 애니메이션을 만들 수 있습니다 그러나

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; 

      } 
     } 

, 궁금 :

이 개체를 트위닝/raycasting 내 코드? 나는 물건을 항상 회전시키고 장면 주위를 돌아 다니며 카메라가 머물러서 개별 물체를 추적 할 수 있기를 원하기 때문에이 작업을하고 싶습니다.

이것은 모두 원근감있는 카메라입니다.

Answer 1

OrbitControls.js를 사용하여 카메라를 제어한다고 가정 해 보겠습니다.
그러면 컨트롤 대상을 controls.target = new THREE.Vector3(0, 0, -100);으로 개체 중앙에 설정합니다 (또는 트위닝). 객체 회전을 (0, 0, 0)으로 설정 했으므로 맨 위에서 객체를보고 싶을 때 카메라 위치를 (0, 10, -100)으로 설정한다고 가정 해 보겠습니다. 당신이 찾고자하는 방향으로
개체 회전이 (0, 0, 0)이 아니라고 가정하면 앞으로 벡터 (또는이 벡터를 보려는 다른 벡터)를 계산하고이 벡터의 축 어딘가에 카메라 위치를 지정해야합니다 .

Answer 2

나는 비슷한 뭔가를 시도하고, 여기에 내가 지금까지하지만 점점 고민 객체는 컨트롤 = 새로운 3을 추가해야합니다 방향 벡터

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 (카메라);