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-charact...
Link to the final result
https://codesandbox.io/p/github/wass0...
Link to the source code
https://github.com/wass08/r3f-charact...
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
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/wawa...
#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
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
/ noemie_pulido
Watch video Threejs tutorial - Character Configurator Screen online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 05 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,898 once and liked it 235 people.