Adding a 3D Model to a Website in 5 minutes (or less)

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
In this project we'll be using Three.js and embedding 3D models directly on a website. We'll step through the basics of adding a simple 3d model to a website, before moving on to integrating it more seamlessly, and reacting to things like scroll events. The point here is to give you a simple example of what's possible, so that you can use that as a starting point for a more complex project.
What we'll cover:
* Embedding a model on a website using three.js and gltf models.
* Constraining the 3d to elements on the page.
* Reacting to events and animating the scene.
Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.
Source: github.com/simondevyoutube/Th...

[@tumunshaily7857]

Bro you rock, I am looking to make a portfolio website that look stunning using 3d stuffs and i cannot find any good resource on youtube. But by going through your videos i have grasps how 3d things work. Amazing !!!

[@grucs]

This is really awesome Simon! I love how these tutorials are quick, to the point, and lack a lot of fluff but still give a great amount of information and documentation for more complex concepts. Keep it up man, I wish there were more creators like you!

[@simondev758]

Glad you like them, got a topic you want covered?

[@cedwards427]

Thanks for this -- I'm coming from Python and trying to learn some web development tricks using JavaScript. I'm enjoying your tutorials and this is the first one that I've grabbed the code for and started playing around with.

[@scott-richardson]

Fantastic tutorial mate

[@TomasHradckyComposer]

Just wonderful. Thank you so much.

[@jankosk8347]

I love you man, you save my life with this amazing video:D

[@joshuakirby6952]

Your tutorials are great! Have you thought about creating a tutorial for interactions like clicking the models to display labels or diagrams? For example, clicking on parts of the U.S.S. Enterprise would show things like "Primary Hull" and clicking another part would show "Propulsion Unit" :) Love the videos and can't wait for more!

[@simondev758]

Great suggestion, thanks!

[@nadjemtech4963]

Amazing Simon.
Pls more video like this
And create professional website

[@simondev758]

Sure

[@envision_change_grow]

Can you please make a video where you use the animation the is already built in the models instead of a static one? Like instead of getting a static one and then adding the animation separately, is there a way you can add all of the model's animation at once when you load the model?

[@MaroSSo1993]

Thanks for your vid! I ran your html and the 3D model was missing, why?

[@deuldmarinho3434]

Could you please show me how I can pass this code to react. Chakar ui I been trying but I tried to change it to canvas but even that dosen't work

[@anficyon]

There is a live version or only in github?

[@simondev758]

Deployed it on Github pages for you: simondevyoutube.github.io/ThreeJS_Tutorial_3DWebsite/
Please remember this is just for reference, so it might have worked on my system but you'll need to rework it for your own projects.
Also, the models take a while to load.

[@anficyon]

@@simondev758 thanks

[@abcoder8845]

From India 🔥

[@OmarRodriguez-qk5gz]

Could you please provide a github example for the enterprise portion and not the zombies?

[@waykzen1775]

Did you find how?

[@OmarRodriguez-qk5gz]

@@waykzen1775 I can load my 3D object to the body, but I can't figure out how to place it inside a specific div within the body. Do you have a github example of how to do this?

[@tumunshaily7857]

A suggestion why don't you make a tutorial on building a portfolio using 3D

[@chriscalver8595]

Tks

[@vincentcleaver1925]

What's up with the high heel shoe?

[@simondev758]

It's a free model from mixamo.com, took it because I thought it looked funny :)

[@alexshel8578]

i don`t know why but it`s not working

[@simondev758]

Most common problem is people opening the index.html file directly instead of hosting the project locally using something like nodejs or python, and navigating to localhost.

[@alexshel8578]

@@simondev758 Yes, sir) i think there is main problem. I have already installed node.js in my VSCode but do not understand how to run npm command correctly. I'm just a designer..))
by the way, I really liked your lessons

[@simondev758]

​@@alexshel8578 Thanks! I serve things locally using python, so:
python -m http.server
Using node, you could look up a package like http-server.

[@alexshel8578]

@@simondev758 OK
I found out that I was running your project using "Open with live server" in VSCode.
Is this method not advanced enough?

[@simondev758]

​@@alexshel8578 Ok tried it your way, installed the Live Server extension for vscode, then opened the ThreeJS_Tutorial_3DWebsite directory and hit "go live", navigated to localhost:5500 in chrome and it was all good, nothing wrong from what I can see
So unfortunately I can't reproduce your issue, you may need to look into this more yourself. I'm not clear what the exact error is that you're getting either, so advice at this point is going to be super vague. I'd try to google the exact error message that comes up.

[@vinayakshete1426]

This is really awesome Simon! I love how these tutorials are quick, to the point, and lack a lot of fluff but still give a great amount of information and documentation for more complex concepts. Keep it up man, I wish there were more creators like you!

[@simondev758]

Thanks, glad you enjoyed them! Let me know if you have topics in mind as well