React Three Fiber tutorial - 3D Product Configurator

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
codesandbox.io/p/github/wass0...
Link to the source code
github.com/wass08/chair-confi...
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei#readme
PBR Textures
3dtextures.me/
Create your React App in a minute with Vite
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.
threejs-journey.com/
I also have a discount code just for you to get -20%
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
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev
🎨 The end screen artist (aka My friend) :
/ noemie_pulido

[@WawaSensei]

What's the next 3D Experience you want to create with Three.js together?

[@liorjjj]

mouse event triggers character animation , something simple , mouse over/clicked character jump, thanks

[@codecoffee1554]

This was great to watch! You explained it very clearly and straight to the point. Can you make one where you have a similar UI that has buttons which when clicked allows you to add multiple, different types of models to the scene and also to be able to select each model and drag them around? Maybe once one model touches another model some interaction occurs. Thanks for the tutorial, please do more threes and r3f!

[@WawaSensei]

Ideas noted, thank you guys 🙏

[@liorjjj]

@@codecoffee1554 love your idea

[@tarunsukhu2614]

Third person with camera movements

[@Ryfryrice]

Great content! I've been looking for something like this for awhile now. Great demo & explanations! Thanks!

[@WawaSensei]

Awesome, thank you very much 🥰 Welcome to the journey 🙌

[@valentinkrajzelman4649]

incredible work man, this channel is going to blow up

[@WawaSensei]

Thanks Valentin! 🤗

[@deathmukh81]

Man I love your work. Keep going, you're doing an amazing job. Thank you so much for making this so interesting and easy for us

[@WawaSensei]

🥰 Thank you for the boost of motivation!

[@user-fm5nx3fq3n]

You are really great in terms of teaching style and approach. Keep this explaining pace🎉

[@WawaSensei]

Thanks a lot 😊

[@georgiosburnham]

Thanks to your knowledge I have been able to answer many questions. Very good explanation.

[@WawaSensei]

Glad it was helpful! Thanks a lot for your comment 🙏

[@liorjjj]

Man , you are Awwwwwwsome , so good, so high production value , best tutorial !!! thank you very much helped me a lot

[@WawaSensei]

Wooow, thank you sooo much! 🔥 A pleasure to help 🙌

[@alexkenway9870]

built the project with your awesome video

[@WawaSensei]

Nice! With the same model or you created your own chair?

[@ericliss9600]

Super sweet! Loved this example. As a 3D artist with basic programming skills I think I'd stupid to not learn ThreeJS. I love how easy it is to use CSS styling in the canvas!

[@WawaSensei]

Wow thank you 🙏 You're right, I think it's the perfect combo for you to create beautiful experiences! ps: based on what you said, you should like tomorrow tutorial 😊

[@ilyanemihin6029]

Amazing tutorial, thanks!

[@nixcreativecoding]

Awesome tutorial! Thank you 🔥

[@WawaSensei]

Thanks to you 🫰

[@denizorsel1029]

Liked n subbed. I loved the way you pronounce PROMISE! Have a great journey ahead!

[@WawaSensei]

Awesome! Thank you! Haha, I have googled the pronunciation maybe next time I'll pronounce it correctly (but there will still be a lot of words I need to correct 🤣) Have a great journey too 🙌

[@spqri3]

Awesome. I learned a lot.

[@jayasurya00098]

Awesome videos super clearly explained!

[@WawaSensei]

Glad you think so! Thanks a lot 😍

[@JorgeSantamariaRamos]

Very nice video! this information is so valuable. Thank you!

[@WawaSensei]

You're so welcome! 🙏😊

[@diegoochoaacosta6399]

You are amazing, bro. Thank you to teaching us...

[@WawaSensei]

Ow, thanks to you for this kind comment! It helps getting motivated 🙌

[@HuynhLuong227]

really thanks, your skill help me very much

[@WawaSensei]

Glad to hear that! Thank you for all those nice comments!

[@HuynhLuong227]

@@WawaSensei really your content is amazing, i'm learning up new skill. Big thanks again.

[@udiiiiiit5020]

Thank you❤

[@WawaSensei]

Thanks to you more!

[@codingwithjuan8815]

Hey! I loved the video! Could we see how you could add an image ( a logo for example ) or some text on top of the 3d object in a way that it adapts to its shape? It would be AWESOME I've been trying to find something like this on internet and youtube and I can't find it anywhere. Thank you so much. Loved your content, you gain a new sub :)

[@WawaSensei]

Hey, I think you need to add a texture to the object, it will wrap around the mesh (so to its shape) Before I cover this topic on this channel this might help you : - codesandbox.io/s/0z8i2c - docs.pmnd.rs/react-three-fiber/tutorials/loading-textures

[@WawaSensei]

Oh, and thanks a lot for your kind message 😍

[@codingwithjuan8815]

@@WawaSensei Thank you for your content 😁 I am already checking the links u sent me, appreciate it!

[@amirnadji5427]

Very Nince. Pour le prochain topic, je suggère une vidéo sur comment gérer le passage entre plusieurs scènes (un gltf par scène) avec un système de fallback dans le suspense pour créer une sorte de loading screen et de nous montrer la manière la plus optimale pour vider les scènes au passage vers une autre scène. I will try to say it in english : can ou please show us how to manage multiple scenes (two gltf) with a loading screen when we load another scene (with suspense if it is the best way) and how can we optimize mesh and textures dispose. Thanks again for this awersome video

[@WawaSensei]

Hello Amir! Could be a good tutorial, do you have any idea of what those scenes would contain?

[@amirnadji5427]

@@WawaSensei may be an indoor and outdoor scene. You are in the street and when you open the door you load the scene of a store (inside the store)

[@yonjaydo2435]

great content

[@WawaSensei]

🙏

[@krims254]

This is awesome! How hard would it be to implement a system on top of this so you can use different with slightly changed values? Trying to think about this since I'm making something similar

[@WawaSensei]

Thank you! It depends on your coding/3D skills and what you want to do but you could achieve it quite easily. I will release another very similar tutorial on Friday, but this time it will be about a table configurator 🤗

[@krims254]

@@WawaSensei Awesome, thanks. Can't wait!

[@Venkatesh-vm4ll]

Please make more project related to r3f, I subscribed your channel

[@WawaSensei]

Welcome my friend! There's a lot to cover about r3f, at least 5 videos about it are coming over the coming weeks 🙏

[@BassShot]

Great tutorial, im kinda new to react three fiber. I see you use an visual studio extension at 2:45 to automatic add the right import. Can i maybe have the name of that vs extension? Thank you.

[@WawaSensei]

Thank you! It's not an extension, it's the auto-completion from VS Studio Code. Just be sure to open the root folder of your project (where package.json is) and it should automatically suggest you the right imports based on the libraries installed on your project

[@dpisati]

Nicee 🔥

[@WawaSensei]

Thanks a lot 🔥

[@user-jn6mr8dx7q]

Hello. I am using this lecture well in Korea. I have a question. The blender's file is much angled than the original modeling shape and appears on the screen. In this case, I wonder if I have to print it out as obj.

[@WawaSensei]

Hello 🙌 I'm not sure to understand but it shouldn't be related to the export format. Did you try to shade smooth and apply the modifiers either in the export settings or manually applying them?

[@riyonjoshi4578]

How did u made the 3d models.. Can u do the breakdown? How both the legs came at first? Please do reply

[@WawaSensei]

Unfortunately, I'm pretty low-level at Blender, I recommend you to follow Blender related channels for this. Here is my top 3 Sensei: - kzbin.info/www/bejne/pHrSiYKmobqpd9k - kzbin.info/www/bejne/bX61oKGwpr59ndk - kzbin.info/www/bejne/hoW6h2ltprqLaM0

[@ManuelBenavides-tf5dc]

Thanks for the tutorial. I have problems with the rendering of the chair. It does not fully render. I have copied the code that you have shared but the chair does not load correctly. Greetings

[@WawaSensei]

Hi, thank you 🙌 Join us on the discord and share screenshots + your code, we will help you! (link in the description)

[@dansonmakeover1125]

hi sensei, would npm works for this as well? instead of using yarn.

[@WawaSensei]

Hey, of course it does! I just feel yarn is faster when installing libraries, but it has no impact as long you install the correct packages 🙏

[@francescogagliardi9383]

Thank you for the amazing tutorial! I have one question. How if i would like to switch more then 2 materials in the meshStandardMaterial property? here you use an if statement but how if i would like to use "switch case"? Thank you for you time :)

[@WawaSensei]

Thanks to you for this kind comment 🙌 You have multiple options for the switch. You can do it in JS before the return, store it in a variable and use it in the render or do it directly inside the return like that: reactpatterns.js.org/docs/switch-case-operator/ (last example)

[@francescogagliardi9383]

@@WawaSensei Thanks a lot. Its working :). only problem now for me is that i need to wait all the textures loads before the model shows in the scene. is there a way to load the default texture => display the model => load the other texture i will configure later? Thanks a lot for your help :)

[@WawaSensei]

@@francescogagliardi9383 if you separate the textures when you export the file and load the textures manually yes You can then set a default material when it's not loaded and the texture when it is

[@canbekiroglu9905]

can we use ".max" as well? i have a model with .max so what should i do?

[@WawaSensei]

Hey, sure you can use it, you need to generate a GLTF file. The documentation says it cannot generate a .gltf but an FBX, then you can convert it into .gltf (blender can do it for you for example) www.autodesk.com/support/technical/article/caas/sfdcarticles/sfdcarticles/Exporting-GLTF-format-from-3ds-Max.html

[@raulpineda6832]

niiiiiice

[@WawaSensei]

Thank you!

[@georgiosburnham]

Hi again, at 09:00 you add and but I get the plane exactly in the middle of the geometry. I made an issue in your project in gitgub. Thanks Wawa Sensei. Note: What version of node.js did you use when you made this video?.

[@WawaSensei]

Hey again, wow it's so weird, I'll answer to you on GH

[@georgiosburnham]

@@WawaSensei I made some research and was the version of Node.js. I was using the last version. I had to use Node.js 16.19.0 and is OK. The thing is to find a solution with the last one. Thanks.

[@WawaSensei]

@@georgiosburnham oh good, when you say the latest, it's the LTS? But I guess it's more an issue with the libraries if ever.. But you couldn't move down the plane?

[@georgiosburnham]

@@WawaSensei I let you a msg in github with all the information. Maybe we can be in touch and let you know.

[@user-ib5lc4zj1e]

Try to specific the version of @react-three/drei to the same of this tutorial ^9.40.4 "@react-three/drei": "^9.40.4",

[@thimethimesha8495]

This is awesome!..Do I need to know how you designed this chair?🙃

[@WawaSensei]

Thank you very much! Well my Blender skills are very basic.. You can learn by following some tutorials online but you can also use free assets from poly.pizza/ for example

[@thimethimesha8495]

Thank you very much sir..👀👌🥳

[@kuroisan2698]

I haven't watched the video yet, However I have a question, is this how It works ? I mean, if we take Porsche's website, are their cars 3D models, It's just they are so realistic ?

[@WawaSensei]

Yes! Porsche website seems to rely on images but look at this codesandbox.io/s/lwo219 (from the same library I teach)

[@alwin5995]

Hi, my floor is right in middle of the geometry.....how do i rectify that?

[@WawaSensei]

Hi, are you the one who asked it on Discord? (If it's not the case come into the Discord and we'll help you 🙌)

[@georgiosburnham]

This video was nice, I could say that it has helped me update certain knowledge, it would be great if you could teach us how to upload this code to the web, I did it but with some errors. the presentation on the local server is somewhat different than on the dedicated web server.

[@WawaSensei]

Thank you, I'll try to upload a quick win tutorial on how to deploy it next week 🙏

[@georgiosburnham]

@@WawaSensei once again, thank you.

[@WawaSensei]

@@georgiosburnham hey, I just tried to deploy the repository with Vercel with default settings (touched nothing) and it worked directly chair-configurator-three-js-r3-f-tutorial.vercel.app/ Can you try deploying your project using Vercel (vercel.com/)?

[@georgiosburnham]

@@WawaSenseiI just see the msg, I am going to do it tomorrow morning and let you know.

[@WawaSensei]

@@georgiosburnham hey, I finally got time to record the tutorial, here it is kzbin.info/www/bejne/gYWcZntsorGem68

[@espacetalib644]

hi, for beginers what are the tools used for this purpose?

[@WawaSensei]

Blender but any 3D tool can help (Spline for example)

[@user-jm5pw7zq6o]

what is meshNormalMaterial tag vscode plugin show code ?

[@WawaSensei]

Hey, you can get info on it here threejs.org/docs/#api/en/materials/MeshNormalMaterial

[@jonael123]

Using changes my position of my modell when i uppdate the page? only when i comment out the stage does my modell work i even tried disabeling controlls and adjust camera but still no luck, do you know what the issue could be?

[@WawaSensei]

Hey, Stage component is done to center the model so it's not really an issue. You can just not use Stage if it's not what you need.

[@jonael123]

@@WawaSensei Yes i understand but thats the problem it dosent center it haha, thanks for reply :)

[@WawaSensei]

@@jonael123 You're welcome! Are you using the model from my project or one of yours? Look at the center of your object in Blender if it's one of yours. (orange dot)

[@jonael123]

@@WawaSensei Thank you !!!

[@themood7907]

why stage not working it's giving me this error Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[@WawaSensei]

Hi, can you join the Discord (link in desc) and share a codesandbox of your project? We'll help you find what's wrong for you

[@emmanueleban1096]

possible to replace the image (3d model) with another model ?

[@WawaSensei]

Hey of course it is possible! I'm showing how to do it with this model, but the same applies for any model

[@emmanueleban1096]

@@WawaSensei thanks sir, will try and let you know how it goes

[@thetop_720]

Maybe create a tutorial with BLENDER and EXPORT to react-three-fiber thank you

[@WawaSensei]

I'm planning to do one including baking texture (but keep in mind my blender skills modelling are not incredible 🤣)

[@haseebliaqat9468]

Can we integrate this into Shopify with Add to cart function?

[@WawaSensei]

Yes 🙌

[@haseebliaqat9468]

Do you have this functionality in your course?

[@thimethimesha8495]

I am undergraduate student. I am going to do a project as my 3rd year project regarding "designing a gent's formal costume with customization". for that I need to know how to design a 3D costume model using blender. can you make a small video for how to design a costume model?🙄

[@WawaSensei]

Hey, I've seen your same comment on another video I'll reply there

[@qubitx64]

Very nice tutorial , BTW the demo link is down

[@WawaSensei]

Thanks a lot 🙏 For the demo link I contacted Codesandbox, it's so weird...

[@qubitx64]

I ran it in multiple browsers just to be sure.

[@WawaSensei]

They replied to me on Twitter, it's back! Thanks a lot

[@Diacred]

Three Fiber more like Pedagogic Fiber!

[@WawaSensei]

You're fiberous 😍

[@jodev7158]

@@WawaSensei quel conseil tu nous donnes pour se perfectionner en anglais please

[@WawaSensei]

@@jodev7158 Hello Jo, je dirai de passer tous tes devices en anglais (ordinateur, langue de navigateur, smartphone) et de faire les recherches en anglais + regarder du contenu anglais. En gros s'imprégner au max pour que ça vienne naturellement !

[@deletrious]

Thanks for posting a broken project

[@WawaSensei]

I Updated the project package version. Thanks a lot for noticing me the issue in a very gentleman manner 🙏

[@deletrious]

@@WawaSensei No problem

[@urbanebachelor]

When I use the "" parameter, it brings the model ridiculously close to the viewport. I'm not finding any documentation on how to manipulate .

[@WawaSensei]

Hey, you can find the different props for the Stage component herre github.com/pmndrs/drei#stage Unfortunately this tutorial is a bit "old" so depending on the version of Three + Drei you use, you don't have the exact same result than in the video

[@gobajoseph5064]

Pitié revenez nous en français les chaînes de dev en anglais yen a plusieurs mais pour les francophones yen pas pas tant que ça

[@WawaSensei]

Sorry... 🙏 Malheureusement ça me ferme trop de portes de rester en français. Et je pense sincèrement que c'est important en tant que dev de comprendre un minimum l'anglais pour avoir accéder à toutes les ressources et documentations sans devoir attendre des versions traduites

[@salahr]

i've been looking for this for so long , thanks @wawaSensei .

[@WawaSensei]

Welcome! 🙌

[@abydiouf3940]

Hello . I'm following your tutorial but I've run into a problem when I use the useCustomization() method: it displays this in the console "useCustomization is not a function or its return value is not iterable" and I don't know what to do as I'm a beginner in react-three-fiber. Please help me solve this problem. Note: I use the "@react-three/drei": "^9.75.0", "@react-three/fiber": "^8.13.3", "react": "^18.2.0", "react-dom": "^18.2.0", "three": "^0.153.0"

[@WawaSensei]

Hi! Jump to the discord (link in description) and share a codesandbox to get some help 🙌

[@canbekiroglu9905]

Can Bekiroğlu 1 gün önce @Wawa Sensei i also need to create some pricing for textures and to add extra layers or parts to selected furniture for example if that is a cupboard we can add shelves and for each of them we should increase price and for each texture we give some prices. i really need to finish this before may to get promoted so if possible if you have time i would glad

[@WawaSensei]

Hello! You can join the Discord (link in the description) and ask for help when you need to :) Other developers and me will help you 🙌

[@utsavsinha334]

(drive.google.com/file/d/1u8zvkCdQE49RC82CUawjEu9OkNydwpbf/view?usp=share_link ) getting output like can anyone help me ( ) same code i am using

[@werewoof4056]

try adjusting the position at or edit here

[@WawaSensei]

Thanks for helping 🙌