Skip to main content

GLTF Animations

GLTFAnimationPlugin is bundled with webgi to import, parse, and play animations from gltf and glb.
The plugin parses the animation clips and creates a mixer after an object/scene is imported with the Asset manager plugin or AssetImporter.

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​

info

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

All Animations​

To play all animations: 

const gltfAnims = viewer.getPlugin(GLTFAnimationPlugin);

// Play all animations
gltfAnims.playAnimation()
// Wait for some time
await timeout(2000) // 2 secs
// Pause animation
gltfAnims.pauseAnimation()
await timeout(1000) // 1 secs
// Resume animation
gltfAnims.playAnimation()
// Stop animation
await timeout(3000) // 3 secs
const reset = true // optionally reset the animation to time=0
gltfAnims.stopAnimation(reset)

Animation Clips​

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.
console.log("Animation ended")

// 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")
info

The promise from playAnimation, playClips will return after the animation duration, and does not consider pausing. If pause and 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 await timeout.

Playback options​

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 object.parent.
  • Find all AnimationClips that contain tracks that refer object.name.
  • Clone the animation clip
  • Replace the object.name with clone.name in all track names.
  • Create an AnimationAction with the mixer
  • 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

TODO.