So animieren Sie Camera.lookAt mit Three JS

Ich habe eine Szene, die eine Tafel mit mehreren Objekten rendert. Wenn ich auf eines der Objekte klicke und die Objektauswahl verwende, kann ich das Objekt abrufen und die Kameraposition so animieren, dass es sich in einer Draufsicht auf das Objekt befindet. Dann kann ich mit der camera.lookAt-Methode die Kamera zwingen, direkt auf das Objekt zu schauen.

Beim Aufrufen von camera.lookAt in der Methode onUpdate wird zu Beginn meiner Animation ein schneller Sprung festgestellt, da anfangs eine große Entfernung zum Drehen vorhanden ist, um das ausgewählte Objekt zu betrachten. Jeder nachfolgende Aufruf von camera.lookAt ist im Vergleich winzig und wird gut animiert.

// Position the camera to fit
var tween = new TWEEN.Tween(camera.position).to({
    x: selectedObject.position.x,
    y: selectedObject.position.y,
    z: 1
}).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function() {
    camera.lookAt(selectedObject.position);
}).onComplete(function() {
    camera.lookAt(selectedObject.position);
}).start();

Gibt es eine Möglichkeit, die Methode zu animieren, oder muss ich die Matrixwerte der Kamera manuell transformieren, um auf mein ausgewähltes Objekt zu schauen?

Hier ist eine Geige mit einem Beispiel. Es wird WebGLRenderer verwendet. Verwenden Sie daher bitte einen geeigneten Browser.

http://jsfiddle.net/fungus1487/SMLwa/

Danke für jede Hilfe.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage