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

Подписаться 959

Просмотров 116 тыс.

50% 1

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
Project code on GitHub: github.com/gjmolter/web-3dmod...
THREE.JS: threejs.org/
SketchFab: sketchfab.com/
👨‍💻 Me
Email: me@gabrielmolter.com
GitHub: github.com/gjmolter
🎨 My Editor:
VS Code: code.visualstudio.com/
Theme: Dracula
#threejs #web3d #webdevelopment #tutorial #javascript #3d #webdeveloper

Наука

Опубликовано:

18 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 110

@covenantersoldier9165 Год назад

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]

@deepak8586 Год назад

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

@valentimgarcia6179 Год назад

Amazing tutorial, keep up with these!

@jaqsentanner5386 7 месяцев назад

Great and quick breakdown! Thank you.

@ucato6278 17 дней назад

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!!!

@ahmedgoniboulama8423 Год назад

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

@user-we5gi5rd8r 4 месяца назад

Thank you so much, this is a great tutorial!

@guillaumedurant7647 6 месяцев назад

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....

@user-pc9nq8me8i 9 месяцев назад

Thank you! It’s very excellent!

@summerjp1997 Год назад

Amazing! thank you so much

@user-yo3po1so2j 4 месяца назад

Amazing tutorial, thanksss

@user-rs9ov6qs7v 5 месяцев назад

cooooooollllll, we need more of three.js , keep it up

@filipemecenas 8 месяцев назад

Thats super cool !!!

@mayurjakate2161 Год назад

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

@deepak8586 Год назад

haha exactly!

@muhammadyameen4998 4 месяца назад

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

@user-lv3uu6cc8s 10 месяцев назад

awesome content bro

@hakkesan Год назад

thank you!

@york2301 Год назад

Good job!

@mohameddarwesh9305 Год назад

Thanks, Keep going

@cauefernandes5706 2 месяца назад

Muito top mano, ajudou dms brasil no topo sempre

@eehm Год назад

Thank you

@KwameGyanko 10 месяцев назад

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

@mathom633 Месяц назад

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

@user-yo3po1so2j 4 месяца назад

perfect

@tbrogoit02 8 месяцев назад

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.

@GabrielMolterIO 8 месяцев назад

I don't know how complex your campfire is, but my best guess would be to have two separate 3D models on the same Three.JS scene (one for the environment and one for the campfire) and I'd have the mouse hover emit some particles or something like that.

@user-vt8ho2jl1r 8 месяцев назад

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

@GabrielMolterIO 8 месяцев назад

No matter what's the model, the code should work as long as it's exported in glTF

@sysadmin9396 7 месяцев назад

I think I finally found a way to give my ai home assistant a “face” . Thank you

@GabrielMolterIO 7 месяцев назад

Hahaha this sounds pretty cool

@chamcamtaco6014 5 месяцев назад

Sorry, I tried to open your .html file with edge and crhome but the modeling doesn't work and the same thing happens with my files, I don't know if I use a program for local host or not

@GabrielMolterIO 5 месяцев назад

Hey, I missed that on the video, but I believe the issue you're having is related to how the model file path on the code is relative to the root of the project, but if you just open the .html file, without using some kind of localhost server, it will look for the root of your computer's file system, which won't work... Try running it with something like the "Live Server" extension for VSCode.

@msg-1995 2 месяца назад

@@GabrielMolterIOok so we have to run it with node or python to create a http socket or else we can make a flask or react app of it ??

@kevinland534 4 месяца назад

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?

@GabrielMolterIO 4 месяца назад

You should be able to switch to the dino by changing line 24: let objToRender = 'eye'; becomes let objToRender = 'dino';

@kevinland534 4 месяца назад

Excellent! Thank you very much!

@ivanovichCetys 23 дня назад

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

@GabrielMolterIO 12 дней назад

I mean, you can make the Canva take the whole viewport size with CSS, doesn’t that work?

@miiukatt4656 3 месяца назад

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? 🙏

@GabrielMolterIO 3 месяца назад

Hey, that's probably related to the import path of the model file. It should work if you add ./ before "models/" on the file path. If I remember well, I've given a slightly more detailed explanation in a previous comment here some days ago.

@bykawali 7 месяцев назад

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

@GabrielMolterIO 7 месяцев назад

Not really, just dragging the file to Chrome should open it without issues. I use a VSCode Plugin called "Live Server", which makes it a bit faster.

@roro4787 6 месяцев назад

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

@GabrielMolterIO 5 месяцев назад

I haven't done that myself, but I'm sure it is possible! ThreeJS basically just puts your scene together and displays it, but the logic of what's going to be rendered is up to you. In the example you gave, you'd still have to create the code to handle the click on the road, read from db, etc... then, when all of that is done, you just send ThreeJS the correct stuff to render at every frame.

@dhruvsehgal1198 2 месяца назад

Is it possible if i made a customization box changing color and rendering text. will it reflect on model also with changing color and text???

@GabrielMolterIO 2 месяца назад

Yeah, I remember seeing something similar to that on the THREE.JS documentation, maybe take a look at the examples there and you can find a path to follow

@mathom633 Месяц назад

somehow it doesnt work, i downloaded everything from guithub but it only renders a black screen with the header

@GabrielMolterIO 12 дней назад

Yeah, that’s probably an issue with the file pathname, I wrongly assumed everyone would be running this in a server-like environment, with the project folder at the root. I’m pretty sure I’ve given detailed instructions on how to solve it in another comment here, but you basically have to change the 3d model file path and it will work

@rolandmaroun2233 2 месяца назад

video is so cool but the final index.html file in your repository didn't work once launched on google chrome from my side any idea why?

@GabrielMolterIO Месяц назад

You might either need to change the path of the 3d models or run the index.html file using some king of server software, like VSCode's Live Server Extension

@user-bg3ic6xw2y 5 месяцев назад

Hello! Could you please tell me what format of the 3D model is needed to upload it to the site?

@GabrielMolterIO 5 месяцев назад

This video uses GLtf format, but you can use a bunch of others as well, just take a look at the documentation on loaders.

@hitheshsuvarna2198 2 месяца назад

ive downloaded other models from sketchfab and included in project directory but when i link them and load they are not coming in the website what may be the reason, i think all model must work, its same format as u mentioned

@GabrielMolterIO 2 месяца назад

They should all work, but the settings for each model can be wildly different. So make sure you play around with light sources, camera positions, object materials, etc. Once you get something to appear on the screen you can start tweaking the values and hopefully you'll be able to adjust it the way you want it.

@hitheshsuvarna2198 2 месяца назад

@@GabrielMolterIO yea man understood it thank you for the info

@tigreonice2339 Год назад

What do you prefer? This, 3js, or spline library?

@GabrielMolterIO Год назад

I haven't yet tried Spline... seems really cool tho!

@drdistic 3 месяца назад

Can I create scroll trigger animations for this 3d model?? Please answer

@GabrielMolterIO 3 месяца назад

Yeah, just set your scroll event listener, save the scroll position into a variable and use that variable on the animation loop to make whatever animation you want

@user-hk3gd2fv5s 11 месяцев назад

Thank you so much for this tutorial. I have a problem: my 3D model is so small and it is located so far from my current camera position, so i am confused. I repeated all code, which you have done, please, help me sir😇

@GabrielMolterIO 10 месяцев назад

Sounds like you should play around with the camera.position.z setting a bit. The values I used on the video worked for the models I used, but you'll have to tweak them to make them work with your models.

@benxfpg Год назад

Hi! Im curious how to get this working on my wordpress site😁

@GabrielMolterIO 10 месяцев назад

I'm fairly certain that if you just upload the models to wp-content/uploads, update the path to the file on the code and then place it all inside an HTML block, it should work. There's probably better ways, like using a custom page template file, etc... I'm going to be testing this in the future and I might make a video about it, as I've gotten that same question a few times now.

@imasunflowerlilfunny3353 2 месяца назад

if my project is in react js , how do i add this in my homepage?

@GabrielMolterIO 2 месяца назад

For React projects I'd use @react-three/fiber and maybe "useGLTF" from @react-three/drei to load the GLTF model. I might make a video on that in the near future.

@Psycandy 5 месяцев назад

right at the end you type some weird sort of arrow. That symbol does not exist in ASCII so it would be useful to know how you managed to get half the special characters you magically paste in, leaving us to type it up wrong, and it won't work. I guess you aren't supposed to type it out, just copy paste from somewhere, which will remain a secret. Super.

@bzsteachings511 5 месяцев назад

If I understood what you meant, what you are talking about are legatured, those are basically more characters combined for a different look. You can enable them in VS in the options, for the arrow is just = and > combined that look like an arrow

@alex.29899 2 месяца назад

Which font style do you use in your Vs code ?

@GabrielMolterIO Месяц назад

I use Fira Code with ligatures activated

@IrvineMesa 6 месяцев назад

hi where did you get the background music

@GabrielMolterIO 6 месяцев назад

I believe that one is from RU-vid's free library, if I remember correctly

@honeynet 2 месяца назад

May I know what's the purpose of "Dino"? The example unable to work properly without this "Dino" thing. Thanks.

@GabrielMolterIO Месяц назад

It's the selector I'm using to choose which file to render, either "dino" or "eye". You may very well just hardcode that on a real project

@ftmullah 5 месяцев назад

hey, how do you go about obj files? please help

@GabrielMolterIO 5 месяцев назад

You’d have to replace the glTF loader with the OBJ one, just take a look at the ThreeJS docs: threejs.org/docs/#examples/en/loaders/OBJLoader

@tunahanergul9945 5 месяцев назад

hey um how can I add a background image, in my site I can change colors only

@GabrielMolterIO 5 месяцев назад

If the background doesn't interact with the model you can just add it with CSS in element you want, like: body { background-image: url(path_to_your_img) }

@tunahanergul9945 5 месяцев назад

@@GabrielMolterIO it isn't working I don't know why, in a few forums they said you have to add new scene and camera

@user-fu3pe2kq8b 5 месяцев назад

when i add the model its not perfectly centred. i even tried setting position and using different models but got same problem. when i add model its not on origin , its at +ive y-axis. anyone know about this problem ?

@GabrielMolterIO 5 месяцев назад

You know when we set camera.position.z on the video? Did you try changing the positions for camera.position.x and camera.position.y as well? I think that might work for you!

@user-fu3pe2kq8b 5 месяцев назад

@@GabrielMolterIO yes i know , i had to set values of camera and of position in thousands. another way was to scale down my model. i was wondering if this happens every time for everyone. it would have been great if imported model were just originate from position 0,0,0. (they actually are but the appear at some other position away from origin 🥲).

@GabrielMolterIO 5 месяцев назад

@@user-fu3pe2kq8b I don’t actually know the reason for that, but in my experience it was rare to find a model that was nicely centralized at 0,0,0 by default. 🤷🏻‍♂️

@user-fu3pe2kq8b 4 месяца назад

@@GabrielMolterIO true , it means its the same case everyone. but there is too much hit and trail in threeJs 😮‍💨 beside knowing dimensions

@a5ac8m 5 месяцев назад

I have downloaded everything and copied the exact folder names but it just shows a black screen with the title

@GabrielMolterIO 5 месяцев назад

I've heard some people are having the same issue. I believe it's related to how the model file path on the code is relative to the root of the project, but if you just open it without using some kind of localhost server, it will look for the root of your computer's file system, which won't work... Try running it with something like the "Live Server" extension for VSCode.

@12alfredjoedevasia59 3 месяца назад

i used live server extension but still not working @@GabrielMolterIO

@crepybozz6011 Год назад

how do you run it\

@GabrielMolterIO Год назад

You can use a plugin on your code editor. I use “Live Server” on my VSCode. Or you can simply drag the html file to your browser.

@iqrahanif7568 8 месяцев назад

When i use my models in your project they did not show on website

@GabrielMolterIO 8 месяцев назад

I'd start by checking if there are any errors on the console. Also, is the model exported in the correct format? I'd also double check the camera position, it might have to be very different from what I'm using on the video, depending on the model you're using.

@breakingtheinternet9622 10 месяцев назад

I clone your project but it only give me the text

@GabrielMolterIO 10 месяцев назад

Not entirely sure what you mean here... The project on GH has all the code AND the 3D models, so it's pretty much ready to run

@Ally-uj3di 9 месяцев назад

I sadly have the same problem. I cloned your GH Repository, but when I open the index.html file, I only see a black screen with the "A Simple Three.Js"-header, but no 3D Object in sight. I have tried it with "Live Server" and with just dragging the html file to my browser. Both don't work. What did I do wrong? @@GabrielMolterIO

@vtminhlien8840 10 месяцев назад

Can't workwith STEP file ?

@GabrielMolterIO 8 месяцев назад

Not as far as I know, I'd recommend you read this issue on GitHub: /mrdoob/three.js/issues/7125

@Rancha51 4 месяца назад

how are running the project ?

@GabrielMolterIO 4 месяца назад

I use a little VSCode Extension called "Live Server", which I highly recommend. You could also simply open the index file with a browser. Keep in mind that, as it is, the code loads the 3D models using paths relative to the root, so to run it without starting a local web-server, you'd have to add a "./" before the file path, to make it relative to the current folder. `models/${objToRender}/scene.gltf` would have to be `./models/${objToRender}/scene.gltf` Again, if you use the extension that change isn't needed.

@angelinepoissonneau 3 месяца назад

@@GabrielMolterIO Hi, I have the same problem, I changed "loader.load( `./models/${objToRender}/scene.gltf`," but I still get a black screen, when I inspect the page in Chrome, it shows the container3D div has a height of 0, but is the same width as the screen

@GabrielMolterIO 3 месяца назад

@@angelinepoissonneau do you get an error on the console or something?

@codywong4052 3 месяца назад

I can't get it to work.

@GabrielMolterIO 2 месяца назад

Do you get an error message on the console or something like that?

@bobbysmurf9915 Год назад

Very specific tutorial that doesn't explain anything and only works with the exact models you use. Disliked.

@GabrielMolterIO Год назад

There’s plenty of in-depth tutorials on Three.JS available. I made this one for people who are already familiar with JS, and wouldn’t mind exploring a bit on their own. As for it working only with the models I’ve used, that’s wrong. It should work with any model given that you change the magic numbers throughout the code to adapt to your model. Play a bit with these numbers and I’m sure you’ll be able to run it successfully.

@franzruggiero8991 9 месяцев назад

this tutorial was great it's just not for beginners or people who don't know how to use Google, obviously different objects might require a different setup than his

@bobbysmurf9915 9 месяцев назад

@@franzruggiero8991 I figured it out a while ago, with an actual good tutorial.