Beispiel einer per Slider gesteuerten Three.js-Animation
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:
Aus Blender exportiert eine Beispielszene im GLTF-Format
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)
In die GLTF-Datei eingebettete Animationen können Problemlos abgespielt werden
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:
Per Nutzereingabe steuerbare GLTF-Animation in Three.js
Hinterlasse einen Kommentar
Auf der eigenen Website geantwortet? Sende eine Webmention!