React Three Fiber tutorial - 3D Product Configurator
45 هزار بار بازدید -
2 سال پیش
-
Let's build together a 3D
Let's build together a 3D Product Configurator using threejs with React Three Fiber. To follow the tutorial you will need to understand the basics of React hooks, but you should be able to reproduce easily.
Link to the final result
https://codesandbox.io/p/github/wass0...
Link to the source code
https://github.com/wass08/chair-confi...
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei#readme
PBR Textures
https://3dtextures.me/
Create your React App in a minute with Vite
https://vitejs.dev/guide/
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...
#threejs #reactjs #r3f
===
Intro: (00:00)
Project Setup: (00:46)
Scene Setup: (04:22)
Generate Model Component: (13:35)
User Interface: (25:35)
Conclusion: (50:37)
====
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
Instagram: noemie_pulido
Link to the final result
https://codesandbox.io/p/github/wass0...
Link to the source code
https://github.com/wass08/chair-confi...
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei#readme
PBR Textures
https://3dtextures.me/
Create your React App in a minute with Vite
https://vitejs.dev/guide/
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...
#threejs #reactjs #r3f
===
Intro: (00:00)
Project Setup: (00:46)
Scene Setup: (04:22)
Generate Model Component: (13:35)
User Interface: (25:35)
Conclusion: (50:37)
====
💻 The Discord Community
Discord: discord
📸 Instagram :
Instagram: wawa.sensei
🎎 Facebook :
Facebook: wawasenseiyt
🐦Twitter :
Twitter: wawasensei
🐦TikTok :
TikTok: wawasensei08
💻 My website :
https://www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
Instagram: noemie_pulido
2 سال پیش
در تاریخ 1401/08/29 منتشر شده
است.
45,043
بـار بازدید شده