Comment associer une caméra à un objet dans three.js?

Question

J'ai créé des objets dans ma scène et j'ai mis en place un code de diffusion/interpolation de sorte que chaque fois que je clique sur un objet, l'objet s'anime directement sur la position et la rotation de la caméra.

Ceci est mon code pour raycasting/interpoler l'objet:

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; 

      } 
     } 

Cependant, je me demandais, comment puis-je faire l'interpolation animer la caméra à l'objet, plutôt que l'objet à la caméra? Je veux le faire parce que je veux que les objets tournent et tournent constamment autour de la scène, et que l'appareil photo puisse rester allumé et suivre des objets individuels.

Tout est dans la caméra perspective, soit dit en passant.

Answer 1

Supposons que vous utilisez OrbitControls.js pour contrôler votre caméra.
Ce que vous devez faire ensuite est de définir la cible des contrôles par controls.target = new THREE.Vector3(0, 0, -100); au centre de votre objet (ou entre elle). Vous définissez la rotation de vos objets sur (0, 0, 0), donc disons que vous voulez regarder votre objet depuis le haut, vous réglez la position de votre caméra sur (0, 10, -100) - même que vous ciblez, juste dans la direction que vous voulez regarder.
En supposant que la rotation de vos objets n'est pas (0, 0, 0), vous devez calculer son vecteur avant (ou tout autre vecteur que vous voulez voir) et placer la position de caméra quelque part dans l'axe de ce vecteur .

Answer 2

Je suis en train de faire quelque chose de similaire, voici ce que j'ai jusqu'à présent, mais du mal à obtenir les objets face à vecteur de direction

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

}); 

}

vous devez ajouter contrôles = new TROIS .TrackballControls (caméra);