Adding a 3D model to a website using THREE.JS

Discover the power of 3D graphics in web development! In this step-by-step tutorial, we'll show you how to easily add a stunning 3D model to your website using the popular JavaScript library, THREE.JS. Perfect for beginners and experienced developers alike, we'll dive into the fundamentals of 3D rendering and scene management, making your website more immersive and interactive than ever before!

🔗 References

👨‍💻 Me

🎨 My Editor:
Theme: Dracula

#threejs #web3d #webdevelopment #tutorial #javascript #3d #webdeveloper

[covenantersoldier]

Tip of the hat to you Gabriel, what a breakthrough. after all the videos of trying to host this thing through a server is somewhat hard being somewhat a technical idiot, just decided going blindside, with something no one talks about, skypack.
This tutorial was the second most successful and easy to understand tutorials I've come across, simon devs videos are brilliant, a easy chill dev creating some really great projects, well done. [pat on back]

[deepak]

wee need more threejs stuff this is so cool!! short and on point!!

[ucato]

I think this video is a great starting point for whoever wanna try to mess with models in three.js (such as myself), great job my guy!!!

[valentimgarcia]

Amazing tutorial, keep up with these!

[ahmedgoniboulama]

Nice video, it will be great to see another video in which we can in example learn how to upload 3d objects to our scene from our local storage

[guillaumedurant]

Hi. Thank you for your explanations. This is exactly what I was looking for. I'm a newbie in Javascript. I'm still able to understand all you said. I guess I will I to watch your video again and again and again....

[wegirdr]

Thank you so much, this is a great tutorial!

[mayurjakate]

Thanks, Gabriel, This is the best and simple video to learn three.js

[muhammadyameen]

thanks for it. got lead for a jump start. thanks bud

[mathom]

somehow it doesnt work for me, i literally downloaded everything on github but the eye still doesnt show up, its just a black screen with the header

[tbrogoit]

I probably wont get an answer but I was wondering what you'd do if you had a scene made in Blender and wanted one specific object within that scene react to mouse movement? To be specific, I want to make a campfire with sparks coming out, but want the sparks to interact with the mouse if it hovers over them and the fire interact differently if the mouse goes over it.

[KwameGyanko]

I dont understand it now but in a few months it will all make sense 😅. thank you

[cauefernandes]

Muito top mano, ajudou dms brasil no topo sempre

[vthojlr]

Thanks for this video. It would be very helpful if you do this for 3D House model

[miiukatt]

Hello!
Thank you very much for this, I've been watching for a tutorial for days and I wasn't able to find it until now!
I have a problem and it's that I can see the preview of the webside with the extension 'Live Preview', but when I run it on browser the 3Dmodel doesn't appear. Could someone help me with that, please? 🙏

[lovanshgaur]

if i download other models, they are not shown. though the dino and eye are working

[kevinland]

Very awesome job with this video! The only thing is that I can only view the eyeball model. Do I need to create another webpage and change the code so that I can view the dinohead?

[roro]

Can we create a road in 3D with exact dimensions, where the data such as thickness, measurements and more stored in a database is displayed once I click a point on this road?

Thank you soo much

[bykawali]

Do i have to install anything only my computer (Mac) to be able to run it locally via VS Code and debugging in Chrome?

[ivanovichCetys]

Thank u, amazing tutorial bro, however, how can object only limit like a canva and not all the screen?