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
Watch video React Three Fiber tutorial - 3D Table Configurator online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 17 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 17,617 once and liked it 634 people.