Build a 3D Portfolio with React Three Fiber - Avatar animations
Let's build a 3D portfolio with Three JS and React Three Fiber in the style of David Heckhoff.
In this first chapter, we will:
- create your own avatar with Ready Player me
- learn how to use Mixamo animations without Blender
- move bones independently
- make the head follow the mouse cursor
- display a model in wireframe mode
Get the starter pack here 🔗
https://github.com/wass08/r3f-vite-st...
Our main inspiration for the final portfolio
https://david-hckh.com/
#threejs #r3f #portfolio
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
Final source code
https://github.com/wass08/r3f-portfol...
Ready Player Me
https://readyplayer.me/
Blender
https://www.blender.org/
Mixamo
https://www.mixamo.com/#/
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:38 - Starter pack
01:04 - Avatar Creator
02:23 - Load avatar
04:03 - Mixamo Animations
04:23 - Convert GLB to FBX
05:00 - Load animation
09:29 - Follow camera & cursor
13:15 - More animations
17:09 - Smooth transition
17:50 - Wireframe
19:32 - Scene composition
22:49 - Final result
23:31 - Conclusion
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
https://www.wawasensei.dev
Watch video Build a 3D Portfolio with React Three Fiber - Avatar animations online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 26 May 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 63,655 once and liked it 1.6 thousand people.