Jak animować Camera.lookAt za pomocą Three JS

Mam scenę, która renderuje planszę z kilkoma obiektami. Klikając na jeden z obiektów i wybierając obiekt, mogę uzyskać obiekt i animować pozycję kamery, aby usiąść w widoku „nad głową” obiektu. Następnie za pomocą metody camera.lookAt mogę zmusić kamerę do bezpośredniego patrzenia na obiekt.

Widzę szybki skok na początku mojej animacji podczas wywoływania camera.lookAt w metodzie onUpdate, ponieważ początkowo ma ona dużą odległość do obrócenia, aby spojrzeć na wybrany obiekt. Każde kolejne wywołanie aparatu camera.lookAt jest w porównaniu z nim niewielkie i ładnie animowane.

// 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();

Czy jest jakiś sposób na animację metody lub czy muszę ręcznie przekształcić wartości macierzy kamery, aby spojrzeć na mój wybrany obiekt?

Oto skrzypce z przykładem. Używa WebGLRenderer, więc użyj odpowiedniej przeglądarki.

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

Dzięki za pomoc.

questionAnswers(2)

yourAnswerToTheQuestion