Uploaded February 2023 | Updated September 2026, 1 week ago
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 🔗
github.com/wass08/table-configurator-three-js-r3F-tutorial-starter
The text version of the tutorial is available here
dev.to/wawasensei/creating-a-3d-table-configurator-with-react-three-fiber-1dl2
#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
codesandbox.io/p/github/wass08/table-configurator-three-js-r3F-tutorial-final/main?workspaceId=5cd54208-3423-4f91-a7e8-14ca07bdc9af&file=%2Fsrc%2FApp.jsx
Link to the source code
github.com/wass08/table-configurator-three-js-r3F-tutorial-final
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
github.com/pmndrs/drei
PBR Textures
3dtextures.me
Create your React App in a minute with Vite
https://vitejs.dev/guide/
Material UI
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.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1
▬▬▬▬▬▬ 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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
instagram.com/noemie_pulido
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 🔗
github.com/wass08/table-configurator-three-js-r3F-tutorial-starter
The text version of the tutorial is available here
dev.to/wawasensei/creating-a-3d-table-configurator-with-react-three-fiber-1dl2
#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
codesandbox.io/p/github/wass08/table-configurator-three-js-r3F-tutorial-final/main?workspaceId=5cd54208-3423-4f91-a7e8-14ca07bdc9af&file=%2Fsrc%2FApp.jsx
Link to the source code
github.com/wass08/table-configurator-three-js-r3F-tutorial-final
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
github.com/pmndrs/drei
PBR Textures
3dtextures.me
Create your React App in a minute with Vite
https://vitejs.dev/guide/
Material UI
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.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1
▬▬▬▬▬▬ 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:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
discord.gg/2wBhwchcWu
📸 Instagram :
instagram.com/wawa.sensei
🎎 Facebook :
facebook.com/wawasenseiyt
🐦Twitter :
twitter.com/wawasensei
🐦TikTok :
tiktok.com/@wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
instagram.com/noemie_pulido
