攝像頭面對選定的飛機three.js

Question

我有600個飛機被添加到隨機x，y，z位置的場景，每個平面是可點擊的。當點擊我動畫到選定的飛機。所有的作品，但我正在努力使相機面對選定的飛機/或確保飛機在視圖中居中。我試圖獲取點擊項目的方向矢量，但不知道如何確保相機始終離開一定距離。這裏是功能和下面的鏈接到測試。有任何想法嗎？非常感謝 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

我敢肯定，可以有更好的解決方案，但是這一次可能是基於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例如