caméra pour faire face au plan sélectionné trois.js

Question

J'ai 600 plans ajoutés à une scène dans des positions aléatoires x, y, z, chaque plan est cliquable. lorsque je clique dessus, je m'anime dans le plan sélectionné. Tout fonctionne mais je me bats pour que la caméra fasse face à l'avion sélectionné/ou que l'avion soit centré dans la vue. J'ai essayé d'obtenir le vecteur de direction de l'élément cliqué mais je ne sais pas comment m'assurer que la caméra est toujours à une distance définie. voici la fonction et ci-dessous un lien vers le test. Des idées? Un grand merci 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

Je suis sûr qu'il peut y avoir une meilleure solution, mais celui-ci peut être un point de départ basé sur this SO answer. J'ai changé votre fonction toObj() et a ajouté une variable globale:

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 exemple