камера к лицу выбранной плоскости three.js

Question

У меня есть 600 плоскостей, которые добавляются к сцене в случайных положениях x, y, z, каждая плоскость является интерактивной. при нажатии i iimate на выбранную плоскость. Все работает, но я борюсь за камеру, чтобы смотреть на выбранную плоскость/или убедиться, что плоскость сосредоточена в точке зрения. Я попытался получить вектор направления щелкнутого элемента, но не уверен, как убедиться, что камера всегда находится на заданном расстоянии. вот функция и ниже ссылки на тест. Есть идеи? Большое спасибо 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 пример