選択された平面にカメラが向いています。

Question

私は、ランダムなx、y、z位置のシーンに600の平面を追加しています。各平面はクリック可能です。クリックすると、選択した平面にアニメートされます。すべての作品が、私は選択された飛行機に面してカメラが苦労している/または飛行機がそのビューの中央にあることを確認しています。私は、クリックされたアイテムの方向ベクトルを取得しようとしましたが、カメラが常に設定された距離離れていることを確認する方法がわかりません。ここに関数とテストへのリンクがあります。何か案は？多くのおかげでhttp://adigitalengagement.co.uk/webauth_stickies/plane/

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

    }); 


} 

Answer 1

私はよりよい解決策があることができると確信していますが、この1つはthis SO answerに基づいて出発点となることができます。 私はあなたのtoObj()機能を変更し、グローバル変数を追加しました：

var lookAtVector = new THREE.Vector3(0,0,0); 
... 
function toObj(obj) { 
var normalMatrix = new THREE.Matrix3().getNormalMatrix(obj.matrixWorld); 
var worldNormal = new THREE.Vector3(0,0,1).applyMatrix3(normalMatrix).normalize(); 
var camPosition = new THREE.Vector3().copy(obj.position).add(worldNormal.multiplyScalar(100)); 

var rotateTween = new TWEEN.Tween(lookAtVector) 
    .to({ 
     x: obj.position.x, 
     y: obj.position.y, 
     z: obj.position.z 
    }, 4000) 
    .easing(TWEEN.Easing.Quadratic.InOut) 
    .onUpdate(function(){ 
     camera.lookAt(lookAtVector); 
    }) 
    .onComplete(function(){ 
     lookAtVector.copy(obj.position); 
    }) 
    .start(); 

    var goTween = new TWEEN.Tween(camera.position) 
    .to(camPosition, 4000) 
    .easing(TWEEN.Easing.Quadratic.InOut) 
    .start(); 
} 

jsfiddle例