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-starter

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-portfolio-avatar

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-fiber/getting-started/introduction

R3F Drei
https://github.com/pmndrs/drei