Create a Character Configurator Screen with Three.js and React Three Fiber

In this tutorial we'll discover how to :

  • animate smoothly our camera to different positions
  • change the different colors from our model
  • change the facial expression using morph targets
  • take a screenshot from a three.js scene

Link to the starter pack
https://github.com/wass08/r3f-character-customization-started

Link to the final result
https://codesandbox.io/p/github/wass08/r3f-character-customization-final/draft/clever-mahavira?file=/src/App.jsx

Link to the source code
https://github.com/wass08/r3f-character-customization-final/

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

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

Mixamo Animations
https://www.mixamo.com/#/

Unity Asset Store
https://assetstore.unity.com/

Mantine Library
https://mantine.dev/

Create your React App in a minute with Vite
https://vitejs.dev/guide/