Threejs tutorial - Character Configurator Screen

Learn how to create a character configurator screen using 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=%2Fsrc%2FApp.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/ If you want to dive deeper into Three.js I highly recommend you to follow Bruno Simon complete tutorial named Three.js Journey. https://threejs-journey.com/ I also have a discount code just for you to get -20% https://threejs-journey.xyz/join/wawasensei1 #threejs #reactjs #development === Intro: (00:00) Camera animations: (00:54) Colors customization: (13:27) Facial expressions: (27:21) Screenshot: (36:51) Conclusion: (42:09) ==== 💻 The Discord Community https://discord.gg/2wBhwchcWu 📸 Instagram : https://instagram.com/wawa.sensei 🎎 Facebook : https://www.facebook.com/wawasenseiyt 🐦Twitter : https://twitter.com/wawasensei 🐦TikTok : https://www.tiktok.com/@wawasensei08 💻 My website : https://www.wawasensei.dev 🎨 The end screen artist (aka My friend) : https://www.instagram.com/noemie_pulido