Three.js: Animationsfortschritt programmatisch steuern

Veröffentlicht von am

unter JavaScript, Three.js und 3d

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

Verfügbare Formatierungen

Benutze Markdown-Befehle oder ihre HTML-Äquivalente, um deinen Kommentar zu formatieren:

Textauszeichnungen
*kursiv*, **fett**, ~~durchgestrichen~~, `Code` und <mark>markierter Text</mark>.
Listen
- Listenpunkt 1
- Listenpunkt 1
1. Nummerierte Liste 1
2. Nummerierte Liste 2
Zitate
> Zitierter Text
Code-Blöcke
```
// Ein einfacher Code-Block
```
```php
// Etwas PHP-Code
phpinfo();
```
Verlinkungen
[Link-Text](https://example.com)
Vollständige URLs werden automatisch in Links umgewandelt.

Auf der eigenen Website geantwortet? Sende eine Webmention!