Wie zwecke ich eine Kamera zu einem Objekt in three.js?

Question

Ich habe einige Objekte in meiner Szene erstellt und Raycasting/Tweening-Code eingerichtet, so dass jedes Mal, wenn ich auf ein Objekt klicke, das Objekt direkt zur Position und Drehung der Kamera animiert wird.

Dies ist mein Code für Raycastings/Tweenen das Objekt:

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; 

      } 
     } 

Aber ich frage mich, wie kann ich das Tween animieren die Kamera auf das Objekt zu machen, anstatt das Objekt an der Kamera? Ich möchte das, weil ich möchte, dass sich die Objekte ständig drehen und sich um die Szene bewegen und dass die Kamera in der Lage sein soll, einzelne Objekte zu verfolgen und zu verfolgen.

Dies ist alles in Perspektive Kamera, übrigens.

Answer 1

Angenommen, Sie verwenden OrbitControls.js zur Steuerung Ihrer Kamera.
Was Sie dann tun müssen, ist das Steuerziel von controls.target = new THREE.Vector3(0, 0, -100); auf die Mitte Ihres Objekts (oder tween es). Sie stellen Ihre Objektdrehung auf (0, 0, 0) ein. Nehmen wir an, Sie möchten Ihr Objekt von oben betrachten und Ihre Kameraposition auf (0, 10, -100) setzen - genau wie Ihr Ziel, nur versetzt in die Richtung, in der du aussehen willst.
Angenommen, Ihre Objekte sind nicht rotationssymmetrisch (0, 0, 0), müssen Sie ihren Vorwärtsvektor (oder einen anderen Vektor, von dem Sie sie betrachten möchten) berechnen und die Kameraposition irgendwo entlang der Achse dieses Vektors positionieren .

Answer 2

Ich versuche, etwas ähnliches, hier zu tun ist, was ich habe bisher aber kämpfen mit immer die Objekte Gesicht Richtungsvektor

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

}); 

}

Sie Steuerelemente hinzufügen müssen = new THREE .TrackballControls (Kamera);