Replaying an animation, increases its speed

Questions
, ,
1

I have a mixamo character that can play 3 different animations. I have used 3 buttons to select which animation to be played. Using LoopOnce, the animation is played only one time, and when it is finished, it goes to Idle mood. Every thing is working as expected, except, when I replay animations, their speed increases, and the more I replay them, the higher their speed becomes. Does anyone have any idea what is wrong? Thank you in advance

Here is my code:

 this.fbxLoader.load('assets/fbx/sample.fbx',
   (object) => {
       (object as THREE.Object3D).animations[0].tracks.shift();
       const animationAction = this.mixer.clipAction(
           (object as THREE.Object3D).animations[0]
       );
       animationAction.setLoop(THREE.LoopOnce, 1);
       animationAction.clampWhenFinished = true;
       this.animationActions.push(animationAction);
       this.modelReady = true;
       /// in the same way 3 other models are loaded hereafter
  },
  (xhr) => {
      console.log('xhr is ', (xhr.loaded / xhr.total) * 100 + '% loaded');
  },
  (error) => {
      console.error("Error loading fbx file: ", error);
  }
 )


   const setAction = (selectedAnimation: number) => {
      if (this.activeAction) {
          this.activeAction.stop();
      }
      let toDoAction = this.animationActions[selectedAnimation];
      if (toDoAction) {
          console.log("Action is changed")
          this.activeAction = toDoAction;
          this.activeAction.setDuration(20); // only the first time works, afterwards, it is every time faster
          this.activeAction.reset().play();
       }
   }

   setAction(selectedAnimation);

   const animate = () => {
      requestAnimationFrame(animate);
      if (this.modelReady) {
         this.mixer.update(clock.getDelta());
      }
      renderer.render(this.scene, this.camera);
   }
   animate()

   if (this.modelReady) {
        this.mixer.addEventListener( 'finished', (e) => {
        if (this.activeAction) {
            this.activeAction.reset().stop();
        }
        let idleAction = this.animationActions[0];
        this.activeAction = idleAction;
        this.activeAction.setDuration(20);
        this.activeAction.reset().play();
        console.log('Action is finished');
    } );
  }
2

Check the values you’re passing to mixer update - and how many times you’re calling it per frame (just put a console log somewhere around it.)

3

I’ve added console.log('clock.getDelta: ', clock.getDelta()) before this.mixer.update(clock.getDelta());, I get many logs (maybe 10 per second), they are mostly like:
.
.
.
clock.getDelta: 0.015
clock.getDelta: 0.016
clock.getDelta: 0.017
clock.getDelta: 0.014
clock.getDelta: 0.018
clock.getDelta: 0.015
.
.
.
`
The log also slows the code noticeably.

4

I’ve found a workaround to artificially control the speed of the animation. I count the number of times each animation has been played and increase the action.setDuration() accordingly.