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

Questions
1

Hi,

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;

2

Do it like so:

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

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)?

4

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

2 Likes
5

Thank you very much!