Triggering Animations

When we interact with a model, it often responds with an animation. It walks or jumps or wiggles. We make our models responsive using the glTF loader and animation system that we built earlier. This renderer bounces a jewel when the viewer presses Space and spins it on any other key:

The viewer may press a key at any time. What if the jewel is at the top of its bounce when it's supposed to start spinning? Won't that be an abrupt transition between the two animations? No, because the animation system provided by the glTF loader smoothly blends between them. All we need is a listener that triggers the desired animation, like this one:

const model: gltf.Model = await gltf.Model.readFromUrl(url);

window.addEventListener('keydown', event => {
  if (event.key == ' ') {
    model.play('jump');
  } else {
    model.play('spin');
  }
});

const model: gltf.Model = await gltf.Model.readFromUrl(url);

window.addEventListener('keydown', event => {
  if (event.key == ' ') {
    model.play('jump');
  } else {
    model.play('spin');
  }
});

To stop an animation, we either need to switch to a shader that doesn't apply the pose transformations or give our model an idle animation.