Back to videos

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/

Need help with this tutorial? Join our Discord community!