Kamera Zoom in Objektposition auf Mausklick

Question

So habe ich eine Szene mit mehreren Boxen und einer PerspectiveCamera.

Ich möchte diesen Effekt immer dann erreichen, wenn ich auf eine bestimmte Box klicke.

• Die Kamera problemlos von seiner aktuellen Position zu der Position übergehen wird der Kasten
• Die Box wird in der Ansicht der Kamera zentriert
• Die Kamera reibungslos in und Fokus zoomt

  auf der Box

Dieser Effekt wurde von 100,000 Stars inspiriert. Wenn ein Benutzer auf einen Stern klickt, zoomt die Kamera in den Stern und zeigt ihn in der Mitte an. Ich versuche, diesen Effekt zu replizieren.

Ich bin derzeit in der Lage, die Position der Box zu ergreifen und es anzuschauen. Aber ich möchte mehr als das tun und bin mir nicht sicher, wie es weitergeht.

Answer 1

Ich denke, was Sie brauchen, ist eine Animation, gibt es viele Animationsbibliotheken wie anime.js und tween.js. Nachdem Sie die Position nach dem Übersetzen übernommen haben, können Sie eine Animation erstellen, um Ihre Übersetzung zu glätten. Hier ist ein Ausschnitt mit tween.js:

var tween2 = new TWEEN.Tween(camera.position) 
       .to({ 
        x : target.position.x, 
        y : target.position.y, 
        z : target.position.z 
       } , 1000) 
       .easing(TWEEN.Easing.Linear.None) 
       .start(); 

Wenn Sie das Feld in der Mitte der Kamera suchen möchten. Wir müssen auch die Kameradrehung ändern. Hier ist eine Möglichkeit, die Zielrotation mithilfe einer Matrix zu berechnen.

Dann können Sie den gleichen Weg verwenden, um eine Animation zu machen, um die Rotation zu ändern.

BTW, Es scheint in 100000 Sternen, die sie Kamera am Ende wechseln.