How to Load Model file and Animation File Asynchronously

Questions
1

Hi there,
I am using React Three Fiber with Next.js and using useFBX("/urlofthefile") to load the model and animation file similarly.
I am also using useAnimation() to run the animation on the model.
However, I want to asynchronously load the animated file but can’t. Any help?
Here is the code:

import { useAnimations, useFBX } from "@react-three/drei";
import { useEffect, useCallback, useState } from "react";

const model = () => {
  const [animate, setAnimate] = useState<boolean>(false);
  const handleAnimate = useCallback(
    async (event) => {
      const { keyCode } = await event;
      if (keyCode === 80) {
        setAnimate(!animate);
      }
    },
    [animate]
  );

  const fbx = useFBX(
    "https://aws-s3-charaktor-mono.s3.amazonaws.com/characters/test.fbx"
  );

  const fbx2 = useFBX("./test_anim.fbx");

  const { animations } = fbx2;
  const { actions, names } = useAnimations(animations, fbx);

  {
    animate
      ? actions[names[names.length - 1]].play()
      : actions[names[names.length - 1]].stop();
  }

  useEffect(() => {
    window.addEventListener("keydown", handleAnimate);

    return () => {
      window.removeEventListener("keydown", handleAnimate);
    };
  }, [handleAnimate, animate]);

  return (
    <>
      <group position={[0, -75, 0]}>
        <primitive object={fbx} />
      </group>
    </>
  );
};

export default model;
2

i don’t understand. you are loading both asynchronously. do you mean in parallel?
or is it about playing the animations? this is a side effect, it belongs into useEffect, you can’t play the animation in the render function because the view isn’t there yet.

1 Like
3

Thank you for looking into it.
What I meant is, loading the 3d model file while the animation file loads. What is happening now is the program waits for both to load and then display the full. I want to return a promise from the animated file but I can’t.