Add an Interactive 3D Model to Your Website // Three.js Tutorial for Beginners

In this Three.js tutorial, I'll teach you how to add an interactive 3D model to your website!
Like my videos? Support the channel on Patreon ❤️ / coffeecodecreate
✅ GITHUB REPOSITORY: github.com/dgreenheck/threejs...
✅ LIVE DEMO: dgreenheck.github.io/threejs-...
✅ THREE.JS DOCS: www.threejs.org
✅ MILLENIUM FALCON MODEL: sketchfab.com/3d-models/mille...
0:00 Intro
0:15 File Formats
0:54 Finding a 3D Model
1:37 Project Structure
3:27 Setting up the Scene
8:18 Adding 3D Model
10:17 Orbit Camera Controls
12:19 Shadows
14:38 Final Product

[@Araknidu92]

Really good tutorial, well explained. Was a bit confused at first because I did not see my model, but then figured out it was just too big. Thanks a lot !

[@losrobbosful]

Excellent tutorial. Finally I got my shadows in the scene! Thanks a ton! Turned out, ambient lighting is a silly idea when trying to cast shadows :D Thank you for bringing me on track with the SpotLight

[@coffeecodecreate]

Glad it helped!

[@shahinshahbazi7541]

Perfect. thank you sooooo much. I have searched to find a way to import, and I could find in this tutorial 😍

[@mayaahmed]

Thank you. Simply superb.

[@ManojChauhan-kl3dh]

hi sir I watch your videos they all are very useful and I liked it so much .would you please post very long video for that cover whole process from start to end .like how gltf model export from 3ds max or blender with individual animation clip for the same model and then transfer to threejs work with multiple animation clip and then apply highlighting on individual part with labeling feathure when mouse hover on individual part that means when mouse hover on idividual part it shows higlight part and also shows label .If not possible then make a tutorial series for same please sir !!!

[@pondokkoding5023]

how to load collada file .dae in three js?

[@subhashmandal9525]

How to open glb file by QR code in any website? Please guide me.

[@NikhilHande030490]

This is soo good. Have been searching over internet for a good overview, I dont think is any other which gives this much clear explanation. Had a quick query: I wanted to build a 3D viewer which is inside a container of a flutter web application. Is it possible to embed this viewer inside a flutter web app? I have tried using packages like model viewer and babylon dart and they dont work on flutter web app. Could you guide here please if this is possible?

[@coffeecodecreate]

Thanks for the feedback. Sorry, I am not familiar with Flutter.

[@bestapps4709]

Hello buddy, I have made a model in nomad sculpt app, model.gltf and this model has PBR painting materials. With three js can I see these materials? Can your code in this video help?❤

[@coffeecodecreate]

It should. Three.js supports PBR materials (see MeshStandardMaterial)

[@bestapps4709]

I will try it💖 Thanks buddy! 💓

[@KnOtoUt]

So i want to create a helper function that returns the loaded model and put that function in a separate file. But the returned value of the function is always undefined... help ?

[@coffeecodecreate]

Models are loaded asynchronously so that approach will not work. The model is returned in the `onLoad` callback function (threejs.org/docs/?q=gltf#examples/en/loaders/GLTFLoader).

[@KnOtoUt]

@@coffeecodecreate So, can we wait for the load function to complete and on the onLoad callback store the loaded asset into different globally scoped variable? nvm the implementation might make the code complex and defeat the purpose of separating the function in the first place, right?

[@coffeecodecreate]

@@KnOtoUt Something like that! Doesn’t need to be globally scoped if you are using ES6 modules.

[@igoreksazonov]

great tutorial! Im try to add an functional to hover on mesh and highlight and on click on a mesh store a mesh info to console. Is it possible? Thanks in advance!

[@coffeecodecreate]

Yes. Checkout out the “Implementing Raycasting” chapter of my 3D paint app video: kzbin.info/www/bejne/pX-7qGiwhs58mLs

[@user-op7bz3ig4y]

HI Dan. Watched your helpful tutorial. What is the website url to see the finished site?

[@coffeecodecreate]

You can find the links to the source and demo in the video description.

[@TR360O]

Great tutorial! However I'm running into one problem. Almost all of the gltf files I want to use stay completly black, even after adding the lights. One of the models I'm using doesn't have this problem. Do you know what could be causing this problem?

[@coffeecodecreate]

It's difficult to know without looking at the files. Do they appear correctly in another tool, like Blender? I always start with MeshBasicMaterial to make sure the mesh is coming in correctly, then switch to a material that supports lighting after. If one mesh appears fine and another does not (and you are using identical lighting for both), then it's likely an issue with the mesh itself. For example, the normals could be flipped. The spotlights are also finnicky to setup (e.g., intensity too low, pointing in wrong direction, etc.). Hope this helps!

[@unrealopenworld]

It's all on my PC. How do I get it online to my website? Is it enough to upload the project to the web server?

[@coffeecodecreate]

You use Vite to create a build and you deploy that on your server.

[@unrealopenworld]

@@coffeecodecreate Thanks for the reply. How does that work exactly? Do you have instructions?

[@elchungo7055]

Is anyone else having trouble loading the model? I downloaded the project from github, but the webpage seems to get stuck and only shows 'LOADING 0/100'

[@coffeecodecreate]

Thanks for your comment. There was a breaking change in Three.js v155 that changed how spotlight intensities work. I've updated the code and the demo. I also reduced the textures so it should load faster.

[@elchungo7055]

@@coffeecodecreate Thank you so much!!

[@elchungo7055]

@@coffeecodecreate I'm really sorry too keep annoying you with this, but could it be possible that there's still a mistake? I'm now getting a screen that says "Engaging hyperdrive...". Could it be an error on my side?

[@coffeecodecreate]

Both the demo and a fresh local copy are working for me.

[@AmOnGUs-gy8ql]

@@elchungo7055 i have the same problem

[@Sportshub1135]

Where is the next ep of sim city?

[@coffeecodecreate]

Stay tuned…