How does syntax for actions work in react three drei?

I would like a button, when clicked, to only go through the pressing animation once.

I couldn’t find much info about how to chain on things like repetition. Would you please edit this snippet of code to include repetition?

  useEffect(() => {
    actions['Button_Press'].play()
    return () => {}
  }, [currentButtonPressed]);

Thank you for your time.

These are regular actions, look into the three docs. That hook useAnimations only creates a mixer and sets up actions from the gltf data.

You could do all that yourself if you want, it’s more boilerplate but at least you know what you’re doing. The hook gives those convenience that already know threes animation api.

1 Like

I read the documentation about AnimationAction, as well as the documentation about AnimationMixer and they were super insightful.

I also found this stackoverflow answer that showed how to set different properties of an action. It turns out that I could not just chain properties and functions onto a specific action, and that they have to be added separately. I also noticed that in order to play the button pressing action after each click, I had to reset the animation.

Here is what my code looks like now:

  useEffect(() => {
    actions['Button_Press'].reset()
    actions['Button_Press'].setLoop(THREE.LoopOnce);
    actions['Button_Press'].play()

    return () => {}
  }, [active]);

I sincerely apologize for not reading those first two links before, I really should have looked at the documentation a little more first before doing anything else.

I think you can chain these calls: action.reset().foo().play()