React Three Fiber tutorial - How to animate 3D models
35.4 هزار بار بازدید -
2 سال پیش
-
Let's animate our 3D model
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: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
Instagram: noemie_pulido
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: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
Instagram: noemie_pulido
2 سال پیش
در تاریخ 1401/09/04 منتشر شده
است.
35,403
بـار بازدید شده