In this @react-three/fiber example, I employeed drei's useGLTF and useAnimation to create a looping collection of Mixamo dance animations (with some state-management help from zustand).

To get the Mixamo assets into react three fiber, check out this excellent tutorial from Code Workshop.

As demonstrated in the above YouTube tutorial, once your Mixamo assets have been prepped and exported to a gltf file, you can use the command-line tool, gltfjsx, to generate a declarative and re-usable react three fiber JSX component.

Animation can then be addeed to the gltfjsx-generated component with useEffect:

  useEffect(() => {
    if (prevActionName !== undefined) {
      actions[prevActionName].fadeOut(0.5);
    }
    actions[actionName]
      .reset()
      .setEffectiveTimeScale(1)
      .setEffectiveWeight(1)
      .fadeIn(0.5)
      .play();
  }, [actions, actionName, prevActionName])

codesandbox.io/s/react-three-drei-gltfjsx

Make sure you have Node.js installed.

git clone https://github.com/patrick-s-young/react-three-drei-gltfjsx.git # or clone your own fork
cd react-three-drei-gltfjsx
npm install
npm start

• @react-three/fiber - React renderer for three.js.
• @react-three/drei - Helper library for @react-three/fiber.
• zustand - State-management solution that uses simplified flux principles.
• Mixamo - Free animated 3D characters for games, film, and more.

• Patrick Young - Patrick Young

This project is licensed under the MIT License - see the LICENSE file for details.