How to monitor the completion of animation playback?

Questions
1

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;
1 Like
2

You can use

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

or

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

5 Likes
3

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

1 Like
4

Hi, how can I remove this event？

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

My way doesn’t seem to work

5

You have to use a named function.

const onFinish = () =>{};

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

This applies to all JS event listeners.

6 
           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
image1171×166 4.51 KB

7

image
It doesn’t seem to match this method

8

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
9

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