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 🔗

Our main inspiration for the final portfolio

#threejs #r3f #portfolio

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

Final source code

Ready Player Me

Blender

Mixamo

React Three Fiber documentation

R3F 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:

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

💻 The Discord Community

📸 Instagram :

🎎 Facebook :

🐦Twitter :

🐦TikTok :

💻 My website :

[Tanya-hldk]

Completed this part and i feel amazing, Thankyou for teaching how to build an avatar and control it in react. You are a great teacher. Had some problem initially while converting glb to fbx, i was getting a sphere around the avtar when i would put it in mixiamo. So i converted into fbx as you show in the tutorial and then imported that fbx again into new window in blender and removed the sphere, cntrl+a apply all transitions and then export again as fbx,

[tarunsukhu]

I was not aware that you can integrate animations so easily (off course you make it easy for us 🙂) . Thank you as always .. BTW: Coding along is easier at this pace of the video.

[Aman_yadav]

Please create more 3d portfolios wirh Amazing animations ...your content is amazing...

[avert_]

For my case, .glb file was not working for some reasons. Model couldn't render properly and was throwing errors.
Converted the glb file to gltf and it worked finally. :)

[ew]

Such creative videos. I’m bing watching all of them! Thank you so much for posting and putting so much effort in them! ❤❤

[carolinasoares]

I’m in love with your videos, it’s teaching so much, I’d try to buy your courses, cuz it’s really making the diference for me, so thank you ❤

[losrobbosful]

This is literally the most inspiring channel ever.
Where are the 100K subs?
Only a question of time :D

[SheriffKoder]

Thanks a lot Wawa Sensei for sharing with us this video, even though the avatar sometimes looks a bit scary looking directly to us.. haha ! 🤩

[jupiterdonkey]

Hi WawaSensei, thank you very much for such a great video. I have been learning Three.js and found it difficult to get a head around. Your video is inspiring.

[pulkitmathur]

I finally found the playlist I was looking for. Please post the remaining videos too fast please

[ljtwswt]

Keep going, Wawa Sensei!

реально крут!

[chessknock]

This one is phenomenal! Can’t wait for more videos like this :)

[sakibcoder]

Lets goooo, great video Sensei. You looks amazing today🎉

[kewlfl]

So much great information here, answers a lot of my questions. Thank you!

[critical-games]

Thats really cool! Thank you for this video!

[ooogabooga]

thank you so much for this video, great inspiration for me

[Anonim-utww]

it's perfect, thank you wawa sensei for bringing this content :)

[the_full_stack_junkie]

Great lessons on THREEjs content thanks

[penggreat]

Great tutorial Wawa, thanks for sharing

[lucianostaffa]

Very nice video! This channel is a treasure!