Uploaded November 2022 | Updated September 2026, 1 week ago

---

Let's animate our 3D model using threejs with React Three Fiber.
We'll use a model purchased in a pack from the Unity Asset Store and use free animations from Mixamo.

Link to the final result
codesandbox.io/p/github/wass08/threejs-r3f-tutorial-animations/draft/stoic-scooby?file=%2Fsrc%2FApp.jsx

Link to the source code
github.com/wass08/threejs-r3f-tutorial-animations

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

R3F Drei
github.com/pmndrs/drei#readme

Mixamo Animations
mixamo.com/#

Unity Asset Store
assetstore.unity.com

Sketchfab
sketchfab.com/store?ref=header

Mantine Library
https://mantine.dev/

Create your React App in a minute with Vite
https://vitejs.dev/guide/

If you want to dive deeper into Three.js I highly recommend you to follow Bruno Simon complete tutorial named Three.js Journey.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1

#threejs #reactjs #development

===

Final result: (00:00)
Intro: (00:36)
Project Setup: (00:59)
How to get a 3D model: (07:11)
Get free animations on Mixamo: (07:53)
Display your model: (08:22)
Animate your model: (13:01)
Going further: (24:53)
Conclusion: (25:29)

====

💻 The Discord Community
discord.gg/2wBhwchcWu

📸 Instagram :
instagram.com/wawa.sensei

🎎 Facebook :
facebook.com/wawasenseiyt

🐦Twitter :
twitter.com/wawasensei

🐦TikTok :
tiktok.com/@wawasensei08

💻 My website :
https://www.wawasensei.dev

🎨 The end screen artist (aka My friend) :
instagram.com/noemie_pulido