React Three Fiber tutorial - 3D Table Configurator

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