Threejs tutorial - Character Configurator Screen

Опубликовано: 05 Декабрь 2022
на канале: Wawa Sensei

10,898

235

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

Смотрите видео Threejs tutorial - Character Configurator Screen онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 05 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,898 раз и оно понравилось 235 людям.