THREE.AnimationMixer:The finished Event causes an infinite loop[BUG]

[xjindf]

I used the code to create an animation, but when I wanted to re-execute the last one after the execution of the last animation, the THREE.AnimationMixer's finished event produced an infinite loop and was in great need for your help.

This is my code:

    function createAnimation() {
        mixer = new THREE.AnimationMixer(model);
        mixer.addEventListener('finished', function (e)
        {
            var curAction = e.action;
            var clip = curAction.getClip();

            var len = clip.tracks.length;
            while (len--) {
                var kf = clip.tracks[len];
                var vc = kf.values.length;
                while (vc--) {
                    var value = kf.values[vc];
                    if (value > 0) {
                        kf.values[vc] += 10;
                    }
                }
            }
            curAction.stop();//Is there a need to restore other parameters to stop the current animation? please help me
            //When an animation is executed again, the state should not be completed
curAction.play();//The finished event was fired immediately when playing again
        });
        var positionGo = new THREE.VectorKeyframeTrack('.position', [0, 3], [0, 0, 0, 0, 0, 50]);
        var moveClipGo = new THREE.AnimationClip('Move_Car_Go', -1, [positionGo]);
        var moveActionGo = mixer.clipAction(moveClipGo, car);
        moveActionGo.clampWhenFinished = true;
        moveActionGo.loop = THREE.LoopOnce;
        moveActionGo.play();
    }

[ehs035]

I used the code to create an animation, but when I wanted to re-execute the last one after the execution of the last animation, the THREE.AnimationMixer's finished event produced an infinite loop and was in great need for your help.

This is my code:

    function createAnimation() {
        mixer = new THREE.AnimationMixer(model);
        mixer.addEventListener('finished', function (e)
        {
            var curAction = e.action;
            var clip = curAction.getClip();

            var len = clip.tracks.length;
            while (len--) {
                var kf = clip.tracks[len];
                var vc = kf.values.length;
                while (vc--) {
                    var value = kf.values[vc];
                    if (value > 0) {
                        kf.values[vc] += 10;
                    }
                }
            }
            curAction.stop();//Is there a need to restore other parameters to stop the current animation? please help me
            //When an animation is executed again, the state should not be completed
curAction.play();//The finished event was fired immediately when playing again
        });
        var positionGo = new THREE.VectorKeyframeTrack('.position', [0, 3], [0, 0, 0, 0, 0, 50]);
        var moveClipGo = new THREE.AnimationClip('Move_Car_Go', -1, [positionGo]);
        var moveActionGo = mixer.clipAction(moveClipGo, car);
        moveActionGo.clampWhenFinished = true;
        moveActionGo.loop = THREE.LoopOnce;
        moveActionGo.play();
    }

Has this been ever resolved? I have the same problem.

[xjindf]

@ehs035 Sorry for too long. I can't recall it. I've switched to Tween. JS later. You can re-post for your help.

[Mugen87]

Stopping an action within the finished callback is currently not valid. If you stop an action, a reset is performed which sets AnimationAction.time back to zero. However, this time property is overwritten a few lines later in AnimationAction._updateTime() where the finished event is fired. So when the action is updated again, it's already considered as finished.

The general approach of the presented code section is questionable. Modifying keyframe values at runtime is unusual. It might be more promising to create multiple animation clips and organize them in a chain. IMO, it's best to consider keyframe tracks as immutable after creation.

[ehs035]

@Mugen87 I do not manipulate the keyframe values like the sample above. I just want to play the same clip again after it finished. The clip never plays again and I get an infinite loop of finished events. It works if I play another clip and then this clip.

mixer.addEventListener("finished", function (e) {
    var curAction = e.action;
    curAction.reset();
    curAction.stop();
    mixer.stopAllAction();
    var clip = clips.filter(f => f.name == clipName)[0];
    mixer.clipAction(clip).setLoop(THREE.LoopOnce, 1).reset().play();
 });`

[Mugen87]

@ehs035 Um...it seems if we solve #9857, your use case should work. The fix will require some changes to AnimationAction._updateTime() though which must be properly tested.

BTW: It should not be necessary to call AnimationAction.reset() and AnimationAction.stop(). A call of stop() internally performs a reset via AnimationAction.reset().

[ehs035]

@ehs035 Um...it seems if we solve #9857, your use case should work. The fix will require some changes to AnimationAction._updateTime() though which must be properly tested.

BTW: It should not be necessary to call AnimationAction.reset() and AnimationAction.stop(). A call of stop() internally performs a reset via AnimationAction.reset().

[ehs035]

Danke Schoen @Mugen87. Agree the finish event should trigger after the last frame and should no longer call AnimationAction._updateTime() I know calling reset and stop is redundant. But I got just desperate :-) For now I do the following (not proud of it but works)

  mixer.addEventListener("finished", function (e) {
     var curAction = e.action;
     setTimeout(function () {
          var curAction = e.action;
          curAction.stop();
          playAnimation('talk-1');
      }, 0);
   });