Uploaded May 2023 | Updated September 2026, 1 week ago

---

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 🔗
github.com/wass08/r3f-vite-starter

Our main inspiration for the final portfolio
david-hckh.com


#threejs #r3f #portfolio

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Final source code
github.com/wass08/r3f-portfolio-avatar

Ready Player Me
readyplayer.me

Blender
blender.org

Mixamo
mixamo.com/#

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

R3F Drei
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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 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