Create A 3D Model Showcase With React, Three.js, and React Three Fiber

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
BMW GLB: github.com/coopercodes/bmwGLB
In this video I show you guys how to create a 3D model showcase using Three.js and React Three Fiber. Adding 3D components to your website can make them stand out, and creating a 3D showcase is a great way to also show off products or functionality. This is also a great start for anyone interested in using Three.js in their React projects, and is easy to build upon. Feel free to use any GLB file you want, and the rendering should work the same!
Final code: github.com/coopercodes/3DMode...
Business inquiry? Email [e-mail]
0:00 Intro / Project showcase
0:17 Download BMW GLB (Link in description)
0:27 Create React app
1:30 Project imports
1:53 Create Model component
2:55 Create showcase code
6:34 Final project
6:45 Discussing lighting / canvas options
7:54 Outro / Thanks for watching!

[@scarletsea503]

This helped me a lot. Clear, simple and educating. Thank you for making this tutorial :)

[@baxtables]

Clear and concise.. more on three.js 👌

[@bilalleos]

Thanks You Cooper your video tutorial helps a lot to me.

[@avisongbird6251]

This was very helpful, thank you so much for this information!
I’ve just started coding myself, your video was very easy to understand and I’m thankful to have found it

[@CooperCodes]

Thank you so much for the comment! Glad it was helpful especially from the perspective of a beginner

[@quanghuyleo691]

This was very helpful, thank you so much!
How can i zoom in out by this way?

[@subzero2971]

Hi there thank you for these tutorial
I have a question how can I make button on the object like car door or window when I click on car door call a function i made before ???
And thank you again ❤❤

[@mohamedrawshan280]

Hello, Thank you for the greate content,
I want to make the canva background color white and how to remove the 3D object shadow?

[@MuhammadBilal-hq3xn]

Thank you so much.

[@aliensoul7600]

it's really hard to find three.js tutorial in youtube will super explaining sir like you sir. thank you sir.
Could you please make videos on AR really no one done with react js. Thank you again.

[@carlosveryan5228]

Is there a way to delete the shadow of the car?

[@RidhoRay]

hey how to do it annotation and hotspot

[@alihamzarao1204]

How to do that thing like first we upload our URDF file to firebase and then by using that link we can render/load our 3d model?

[@user-ks3wq5qi6v]

how can we remove the shadow under the car or any model ?

[@abdullohesonov3349]

will it work on mobile or should i do some changes

[@nikhilpakhloo]

How to set the car initial position

[@victor-code]

not working for me :( with react 18.the model,does not move

[@Mostafa-jj9ng]

thank you sir

[@aliensoul7600]

can i set events.?

[@Tommi_P_Laiho]

This works beautifully in Linux Ubuntu Studio also if you just follow the instructions very carefully.

[@MranZupljanin]

thank you for this video, i have question, is there any way i can add components to that car, for example change doors, color, tires idk.. to make some kind of editor not too complicated.
any suggestion how should i do that?

[@jannickpedersen546]

U still looking for an answer?

[@MranZupljanin]

@@jannickpedersen546 well yeah, i mean its not urgent, but i have some project that is still open talks, and i dont know anything about 3d modeling, but i am react developer, and what should be main, is we should have product, for example some machine, that has some components, lets say pc, and that u can import graphic card, processor, ram etc.. to change color, and calculate price whenever u change compoent, so it should be product preview for customer, so he can see what it would look like before order... so key thing of this is, do i need to get from 3d model all those components as files, or it all can be 1 file and 3d model can export me some functions or something that i just call or something like that, i mean just need some general concept how should i begin with. thank u for reply

[@elujobaoluwafemi1668]

THANKS!!. I am building a text editor where users can create notes in a note block, upload images, pdf etc. I am also required to implement a 3D (gltf) selector so that users can select a 3D model and upload it on the editor. They can also preview it. How can I go about this please? @cooperCodes

[@gissltd2590]

When the model rotates, the shadow rotates in the opposite direction