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