Kürzlich habe ich an einem Projekt gearbeitet, in dem wir die WebGL-Bibliothek Three.js einsetzten, um 3D-Animationen abzuspielen. Unter Anderem ging es darum, eine 3D-Animation in Three.js zu importieren, und diese dann per dem Scrollfortschritt abzuspielen.
Für eine unkomplizierte Zusammmenarbeit zwischen Entwickler und Motion-Designer, entschieden wir uns im Team, das GLTF-Dateiformat einzusetzen. Dieses ermöglicht es, komplette 3D-Szenen inclusive Beleuchtungs- und Animationsdaten aus einem 3D-Model Programm wie Blender oder Cinema 4D zu exportieren und einfach in Three.js zu importieren.
Das importieren einer 3D-Szene funktionierte einwandfrei:
Auch das Abspielen von 3D-Animationen funktionierte problemlos: (Die Beispielanimationen konnte ich übrigens sehr schnell und einfach mithilfe des großartigen Tutorials von Polyfjord erstellen)
Sobald ich aber versuchte, den Animationsfortschritt programmatisch festzulegen um ihn durch Scrollfortschritt zu steuern, stand ich allerdings vor einem größeren Problem als gedacht:
Three js ermöglicht es zwar, eine Animation (oder Clip) per Methode abzuspielen. Aber eine einfache Möglichkeit, denn Animationsfortschritt eines Clips per Methode festzulegen, (wie z.B: clip.setProgress(0.3)), sucht man vergebens.
Nach langer Recherche fand ich eine Lösung: Unter der Haube setzt Three.js sogenannte Interpolanten ein. Diese können für jedes animierte Property eines Objektes die Werte zu für einen angegebenen Zeitpunkt zurückgeben.
Im Folgenden der Beispiel-Code für die oben gezeigte Demo:
Hinterlasse einen Kommentar
Auf der eigenen Website geantwortet? Sende eine Webmention!