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-configurator-three-js-r3F-tutorial-starter
The text version of the tutorial is available here
https://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
https://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
https://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
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/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:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me ? ▬▬▬▬▬▬
? The Discord Community
https://discord.gg/2wBhwchcWu
? Instagram :
https://instagram.com/wawa.sensei
? Facebook :
https://www.facebook.com/wawasenseiyt
?Twitter :
https://twitter.com/wawasensei
?TikTok :
https://www.tiktok.com/@wawasensei08
? My website :
https://www.wawasensei.dev
? The end screen artist (aka My friend) :
https://www.instagram.com/noemie_pulido
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «React Three Fiber tutorial - 3D Table Configurator», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.