How to play one animation after another in 3js?

Questions
1

I have one animation in gltf model that I need to play once and when it finishes I need the 2nd one to play .


let previousTime = 0;
loader.load(
  "models/try.glb",
  function (gltf) {
 
    // Get the animations from the loaded model
    const animations = gltf.animations;

    // Create a new animation mixer
    const mixer = new THREE.AnimationMixer(gltf.scene);

    // Play the first animation
    const firstAction = mixer.clipAction(animations[6]);
    // Set the animation to only play once
    // firstAction.setLoop(THREE.LoopOnce);

    // Set the animation to stop at the end
    firstAction.clampWhenFinished = true;
    firstAction.play();

    firstAction.addEventListener( 'finished', function( e ) { 
      console.log("done")
    } )

    // Add the loaded model to the scene
    scene.add(gltf.scene);

    // animate the model in the render loop
    function animate(currentTime) {
      requestAnimationFrame(animate);

      //delta time
      // calculate deltaTime
      const deltaTime = (currentTime - previousTime) / 1000;

      // update the previousTime variable for the next frame
      previousTime = currentTime;

      mixer.update(deltaTime);
      renderer.render(scene, camera);
    }

    animate(0);
  },
  function (xhr) {
    // Callback function when the model is loading
    // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  function (error) {
    // Callback function when there is an error loading the model
    console.error(error);
  }
);

but I get the error “firstAction.addEventListener is not a function”. Solution anyone?

2

It’s AnimationMixer that has event listeners - not the action. See the example at the veeeeery bottom of the AnimationAction page.

(Source)