GLTFAnimationPlugin is bundled with
webgi to import, parse, and play animations from
The plugin parses the animation clips and creates a mixer after an object/scene is imported with the Asset manager plugin or
GLTFAnimationPlugin provides functions to play/pause/stop all the animations at once or pick which animations to play to choreograph an animation chain.
three.js animation system
For information about how animations are imported with GLTF and handled internally in three.js, check three.js manual: https://threejs.org/docs/index.html?q=animation#manual/en/introduction/Animation-system
To play all animations:
const gltfAnims = viewer.getPlugin(GLTFAnimationPlugin);
// Play all animations
// Wait for some time
await timeout(2000) // 2 secs
// Pause animation
await timeout(1000) // 1 secs
// Resume animation
// Stop animation
await timeout(3000) // 3 secs
const reset = true // optionally reset the animation to time=0
To play individual animations:
const resetOnEnd = true // Optionally, reset the animation to time=0 after end.
await gltfAnims.playClip('Cube Anim', resetOnEnd) // Pass the name of the animation clip.
// or play multiple clips
await gltfAnims.playClips(['Cube Anim', 'Sphere Anim', resetOnEnd) // This will return when all animations are finished.
console.log("All Animations ended")
The promise from
playClips will return after the animation duration, and does not consider pausing. If
resume is required, don't use the promise returned here but use a custom
timeout call or some other logic.
Animation clips can be chained by using a combination of
await playClip and
The plugin exposes some properties to control the playback and speed.
gltfAnims.animationSpeed = 2 // Play animation at double speed
gltfAnims.loopAnimations = true // Enable Animation looping
gltfAnims.loopRepetitions = Infinity // Loop indefinitely
gltfAnims.loopRepetitions = 5 // Loop 5 times.
Check the API documentation for
GLTFAnimationPlugin for all properties.
Here is a live codepen example that shows the plugin API and animation chaining:
Cloning objects and animations.
AnimationClip, that are responsible for animating an object refers the object by its name and path.
When cloning an object, all animation clips attached to the object will not be cloned since those are not direct references. For this reason, the animation clips need to be cloned manually and added to the animation plugin.
The basic steps for doing this are:
- Clone the
object, and add the cloned object to
- Find all
AnimationClips that contain tracks that refer
- Clone the animation clip
- Replace the
clone.namein all track names.
- Create an
- Push the new clip and action to the animation plugin animation list.
Here's a live codepen example that shows clone of one object (torus) along with all its animations:
Camera Marker animations