Why does calling an animation function multiple times cause it to skip animations in three js?

Questions
1

I want to repeat an animation group (the sphere moving then the rectangle) then write the number of times it has been repeated in the div named expected_output. But for some reason it skips the animation, i.e. the animation doesnt start.

Here is the function code:

 var j = 1
  var fieldNameElement = document.getElementById("expected_output");
  function animator_repeat(){ 
    const animationClip = new THREE.AnimationClip(null,3, [track1]);
    const animationClip1 = new THREE.AnimationClip(null,3, [track]);
    const animationAction = mesh.userData.mixer.clipAction(animationClip);
    const animationAction1 = cube.userData.mixer.clipAction(animationClip1);

    animationAction.setLoop(THREE.LoopRepeat ,1);
    animationAction.play();
    mesh.userData.mixer.addEventListener( 'finished', () => {

      animationAction1.setLoop(THREE.LoopRepeat ,1);
          animationAction1.play(); 
          cube.userData.mixer.addEventListener( 'finished', () => {
          if(j<6){
             fieldNameElement.textContent = "Number: "+(j+1).toString();
             animator_repeat() 
             j = j+1 
            }
          });
     } )
  }

Here is the jsfiddle: https://jsfiddle.net/xgnj4fbh/6/

As you can see it skips, 3,4

Could someone explain whats going wrong?

Thanks

2

/cc

3

As mentioned at stackoverflow, it’s not intended to add an event listener multiple times to the animation mixer. You do this just once. The respective event listener will fire for each animation action that has been finished.

1 Like
4

I am removing the event listener and playing the animation action again but the animation is still not playing even though the finished event listener is being triggered again

5

@udaybansal19 you’ll need to provide enough information for someone to quickly and easily reproduce the problem you are seeing. Code or a demo is the best way to get help efficiently. It’s usually best to start a new thread for such questions.

6

I will try to add a demo too.