[Solved] How to play a gltf animation once when mouse is clicked


I’m new to three.js and I want to make an interactive sketch where you have to click on an object to play the animation.

I’ve got quite far with my code but once I click with the mouse, the animation plays in a constant loop and I don’t know how to change it.

I’ve tried animation.setLoop( THREE.LoopOnce ) but it’s not working (or maybe I’m doing something wrong).

Here is the code;

Do it like so:

var action = mixer.clipAction(gltf.animations[0]);
action.setLoop( THREE.LoopOnce );

Thanks for the quick reply @Mugen87.

I still have the problem that the animation doesn’t play again after the second mouse click. Is there a way that for everytime I click the mouse, the animations starts (and stops, since there is only one loop)?

I have refactored your code a bit so action.play(); is only executed when you perform a click. Stopping the animation action right before ensures you actually start it from the beginning.

Codepen: https://codepen.io/anon/pen/wYQvBG?editors=0010#0

1 Like

Thank you very much!