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:
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.)
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: