How to build a 3D product configurator? Together we will build a table configurator using threejs with React Three Fiber.
We will customize:
The legs layout
The legs' color
and the table width
Get the starter pack here 🔗
https://github.com/wass08/table-confi...
The text version of the tutorial is available here
https://dev.to/wawasensei/creating-a-...
#threejs #reactjs #r3f
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
Link to the final result
https://codesandbox.io/p/github/wass0...
Link to the source code
https://github.com/wass08/table-confi...
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
PBR Textures
https://3dtextures.me/
Create your React App in a minute with Vite
https://vitejs.dev/guide/
Material UI
https://mui.com/
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...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:44 - 3D Model
01:11 - Project setup
02:37 - Table legs layout
05:08 - Help the channel
05:08 - Legs color
06:00 - Table width
06:40 - Smooth animation with lerp
07:47 - Thank you
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 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
Смотрите видео React Three Fiber tutorial - 3D Table Configurator онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 17 Февраль 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 17,617 раз и оно понравилось 634 людям.