Wie kann ich mehrere Szenen in einer Welt in WebGL erstellen?

Question

Ich möchte 5 Szenen erstellen, so dass die Kamera animiert wird und sich automatisch in der Szene bewegt. Ich möchte, dass die Kamera in jeder Szene 20 Sekunden lang animiert wird und nach 20 Sekunden in die andere Szene wechselt, so dass alles in 100 Sekunden endet. Ich möchte, dass alle Szenen Teil einer einzigen Welt sind. Also, im Grunde möchte ich etwas als Film erstellen. Wie kann ich dies in WebGL erreichen? Ich konnte keine ähnlichen Code-Segmente oder Tutorials online finden. Bitte beachten Sie, dass ich eine rein auf WebGL basierende Lösung benötige, keine andere Bibliothek wie zB three.js. Hier

Answer 1

Es klingt wie du bist im Grunde für etwas zu fragen, wie diese

WebGL: Zooming to and stopping at object in a scene in WebGL

In Ihrem Fall Sie setzen Bündel von Objekten an verschiedenen Orten der Welt. Sie entscheiden sich für 5 Kamera-Standorte. Sie können zwischen den Standorten unterscheiden.

Stellen Sie sich zum Beispiel vor, jeder dieser Buchstaben sind Gruppen von Objekten in der Welt. C1 durch C5 sind Kameras, die so ausgerichtet, dass sie nur die drei Objekte sehen in der von ihnen

D E F  G H I  J K L  M N O  P Q R 

\/  \/  \/  \/  \/
    C1   C2   C3   C4   C5 

Sie müssen nur C1- zwischen Kameras Lerp> C2, C2-> C3, C3> C4 usw. Die Der einfachste Weg ist, die ziemlich standardmäßige lookAt Funktion zu verwenden, die die meisten 3D Math Bibliotheken haben. lookAt benötigt 3 Argumente. eye, target, up. Also für jede Kamera, die Sie brauchen, brauchen Sie ein Ziel, Auge, up-Wert. Lerp/Tween diese 3 Werte zwischen 2 Kameras dann füttern sie in lookAt, um Ihre bewegliche Kamera zu erhalten.

Der einzige Unterschied zwischen Ihren Anforderungen und dem oben verlinkten Beispiel ist das obige Beispiel, in dem die Kamerastandorte während des Betriebs berechnet werden. In Ihrem Fall würden Sie Ihre Kamerastandorte fest codieren.

Answer 2

ist eine Diskussion mit Beispielen für die Animation der Kamera mit Three.js https://github.com/mrdoob/three.js/issues/1689