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; 

      } 
     } 

はしかし、私が思っていた、どのように私はトゥイーンではなくカメラを被写体よりも、オブジェクトにカメラをアニメーション化することができますか？オブジェクトを常に回転させてシーンの周りを動かしたいと思っていて、カメラが個々のオブジェクトを追跡して追跡できるようにしたいので、これを実行したいと思います。

これはすべて、パースペクティブカメラの中にあります。

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

}); 

}

方向ベクトルに直面しているあなたは コントロールを追加する必要があります=新しいTHREE .TrackballControls（カメラ）;