Three.js: update animation progress programmatically

Published by on

under JavaScript, Three.js and 3D

Slider controlled GLTF animation example in Three.js

Recently I worked on a project where we used the WebGL library Three.js to embed 3D animations in a website. One of the tasks was to import a 3D animation into Three.js, and then bind it to the page scroll events.

To facilitate collaboration between developer and motion designer, we decided to use the GLTF file format. This makes it possible to export complete 3D scenes including lighting and animation data from a 3D model program like Blender or Cinema 4D and easily import them into Three.js.

Importing a 3D scene worked flawlessly:

Sample 3D Scene in GLTF-File format

Playing 3D animations also worked without any problems: (By the way, I was able to create the sample animations very quickly and easily with the help of Polyfjord's great tutorial.)

Animations embedded in the GLTF file can be played without problems

However, as soon as I tried to programmatically set the animation progress to be controlled by scroll progress, I faced a bigger problem than I thought:

Three.js does allow you to play an animation (or clip) by method. But a simple way to set the animation progress of a clip by method (like clip.setProgress(0.3)) is missing.

After doing some research on the topic, I was able to find a solution: Under the hood, Three.js uses so called interpolants. These return the object property values of animated objects for a given time in the animation:

Slider controlled GLTF animation in Three.js (click the button to have a look at the source code)

More articles:

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!