How to monitor the completion of animation playback?

I played the animation 20 times and set timescale to 1.5. How can I monitor the completion of the animation?

this.action = mixer.clipAction(animation);
this.action.setLoop(THREE.LoopRepeat, 20)
mixer.timeScale = 1.5;

You can use

mixer.addEventListener( 'finished', function( e ) { …} )

or

mixer.addEventListener( 'loop', function( e ) { …} )

3 Likes

This method has solved my problem. Thank you very much for your reply. :beers:

1 Like

Hi, how can I remove this event?

this.shootmixer.removeEventListener('finished', () => {})

My way doesn’t seem to work

You have to use a named function.

const onFinish = () =>{};

mixer.addEventListener('finished', onFinish );
mixer.removeEventListener('finished', onFinish );

This applies to all JS event listeners.

           const onFinish = () => {
              this.action.stop()
              this.audio.stop()
              window.shootingData.push(this.HS[19])
              this.initchart()
              this.activelaber.visible = false
              resolve()
            }
            
            this.shootmixer.removeEventListener('finished', onFinish, false)

            this.shootmixer.addEventListener('finished', onFinish, false)

I put this binding in the loop. I will remove the last event before each start, but this method doesn’t seem to work. My listeners are more and more onfinish

image
It doesn’t seem to match this method

Maybe try it like this?

const onFinish = () => {
    this.action.stop()
    this.audio.stop()
    window.shootingData.push(this.HS[19])
    this.initchart()
    this.activelaber.visible = false

    this.shootmixer.removeEventListener('finished', onFinish, false)

    resolve()
 }
            
this.shootmixer.addEventListener('finished', onFinish, false)

Then it’ll remove the event listener once it has been called.

1 Like

This method works, but I don’t understand the principle. :blush: