Animation trigger other actions inside useFrame

Questions
, , ,
1

Hi there, I am trying something different in a react three fiber project with animations and the possibility of it triggering other actions.

I created animations in Blender and exported them into three js, and now I need to make other actions to be triggered when the animation reaches to a certain time in seconds.

I’ve tried the following approach but I feel like it is very hacky and ugly, and I’d like to know another way of how do you think it could be done:

const { actions, mixer } = useAnimations(animations, group);

 const [
    pos_anim,
    fake_walk_anim,
    introduction_anim,
    introduction_backwards_anim,
    talk_table_anim,
    main_walk_anim,
  ] = [
    actions['waitress_pos_anim'],
    actions['waitress_fake_walk_anim'],
    actions['waitress_introduction_anim'],
    actions['waitress_introduction_backwards_anim'],
    actions['waitress_talk_on_table_anim'],
    actions['waitress_main_walk_anim'],
  ];

const dialogueIntroduction = React.useRef(false);

useFrame(() => {

    if (
      introduction_anim &&
      introduction_anim.time > 18 &&
      dialogueIntroduction.current
    ) {
      setWaitressDialogueCurrent('introduction_talk');
      dialogueIntroduction.current = false;

      setTimeout(() => {
        setWaitressDialogueCurrent('');
      }, 4000);
    }
  });

As you can see, there are multiple actions triggering one another, I put a useRef for controlling the firing of this block of code, so it runs only once because in another part of code that I think it is not necessary posting, the ref becomes true at some point, and right after the seconds reached more than 18 in the animation, it runs only once because I disabled the ref value.

Also I needed after some seconds that this code block was fired, then the state should be cleaned, this is why I put a setTimeout, but I feel like it is the worst way I could do it and this is why I thought if there is another way to make it all working in a less hacky way?