React Three Fiber tutorial - How to animate 3D models

Published: 25 November 2022
on channel: Wawa Sensei

39,012

938

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
https://codesandbox.io/p/github/wass0...

Link to the source code
https://github.com/wass08/threejs-r3f...

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei#readme

Mixamo Animations
https://www.mixamo.com/#/

Unity Asset Store
https://assetstore.unity.com/

Sketchfab
https://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.
https://threejs-journey.com/
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawa...

#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

📸 Instagram :
  / wawa.sensei

🎎 Facebook :
  / wawasenseiyt

🐦Twitter :
  / wawasensei

🐦TikTok :
  / wawasensei08

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

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

Watch video React Three Fiber tutorial - How to animate 3D models online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 25 November 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 39,012 once and liked it 938 people.