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 !
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
Very good explain. I'm looking for a tutorial on how I can use 3D model on AR and interact with that object by clicking/ touch certain area of the 3D object to make some action, but only find tutorials to click on the first 3D object on the scene. Some 3D models have differents parts like buttons and I'm interested on how do that.
You need to build a hierarchy of objects, with the button and interactive elements being separate objects that are children of the main object. Then you can raycast against these separately.
i copied everything from "setting up the scene" but when i open my page with liveserver i dont see anything. can someone please help? i should add that i dont know what three.js is and i just use the github codespace because its for a school project.
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!
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?
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?❤
you just won a subscriber right here! love your content, if you could send all the codes in a text format file, it would be wonderful, thank you in advance! cheers
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 !!!
hello i've been struggling with a project where i need to load a 3D model of "Hannibal Barca " (Carthaginian general ) where he appears in a video call with a user and interacts with him can someone help me i have a deadline of 2 weeks
I could see the model is loaded from the local public folder. In my case, I need to load the models dynamically from remote URL (...). Any suggestions? :)
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'
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.
@@dangreenheck 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?
Once you get to adding the ground plain, I do not see it, I have the black background and the title text, I've added the camera, made it look at the coordinates your example code said so, I've added the ground plain, and even added the spotlight, when you got to that point and I still see no ground plane in sight
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?
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!
Hello. Thank u, I did it. Now I want to know how to put the model and the camera on the center of the renderer. The mesh.postion.set() is confusing for me and I have tried so many coordinates
@@dangreenheck I did it, it appears to be closer to the model but it is not centered. And now I am trying to find a new model, I think it renders but it is nowhere to be found on the renderer. I have tried to change the lights, the camera, the orbit controls and the model position itself, but I cannot find it (and I know it works because I can visualize it in other sites). I would really appreciate your help :))
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 ?
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).
@@dangreenheck 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?
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 !
Thank you. Simply superb.
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
Glad it helped!
Very good explain.
I'm looking for a tutorial on how I can use 3D model on AR and interact with that object by clicking/ touch certain area of the 3D object to make some action, but only find tutorials to click on the first 3D object on the scene. Some 3D models have differents parts like buttons and I'm interested on how do that.
You need to build a hierarchy of objects, with the button and interactive elements being separate objects that are children of the main object. Then you can raycast against these separately.
Perfect. thank you sooooo much. I have searched to find a way to import, and I could find in this tutorial 😍
what a good tutorial man, thanks so much teacher!
how to use a url from external server as a glb file as it is giving cors error
VERY THANKS! ITS REALY HELPS
How to open glb file by QR code in any website? Please guide me.
i copied everything from "setting up the scene" but when i open my page with liveserver i dont see anything. can someone please help?
i should add that i dont know what three.js is and i just use the github codespace because its for a school project.
Very cool!
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!
Yes. Checkout out the “Implementing Raycasting” chapter of my 3D paint app video: ua-cam.com/video/oNXw5zQiIbY/v-deo.html
HI Dan. Watched your helpful tutorial. What is the website url to see the finished site?
You can find the links to the source and demo in the video description.
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?
Thanks for the feedback. Sorry, I am not familiar with Flutter.
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?❤
It should. Three.js supports PBR materials (see MeshStandardMaterial)
I will try it💖
Thanks buddy! 💓
you just won a subscriber right here! love your content, if you could send all the codes in a text format file, it would be wonderful, thank you in advance! cheers
Thanks! Link to source code is in the description.
WHAT UP DAN! Your videos are excellent! and easy to understand, I like your work so much that i subscribe to your channel.
Awesome, glad to hear it!
Thanks i just got recomended
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 !!!
hello
i've been struggling with a project where i need to load a 3D model of "Hannibal Barca " (Carthaginian general ) where he appears in a video call with a user and interacts with him
can someone help me
i have a deadline of 2 weeks
I could see the model is loaded from the local public folder. In my case, I need to load the models dynamically from remote URL (...). Any suggestions? :)
Works the same! Just use the URL.
i know its been a while since this vid came out but ive encountered an issue where the 3d model is just plain white the colors arent there
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'
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.
@@dangreenheck Thank you so much!!
@@dangreenheck 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?
Both the demo and a fresh local copy are working for me.
@@elchungo7055 i have the same problem
Once you get to adding the ground plain, I do not see it, I have the black background and the title text, I've added the camera, made it look at the coordinates your example code said so, I've added the ground plain, and even added the spotlight, when you got to that point and I still see no ground plane in sight
nevermind, I had to crank the intensity up from 3 to around 100 to just vaguely see the plane
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?
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!
You are awesome. It is possible to add AR mode or VR mode to the site?
I actually haven’t done any VR or AR but that would be cool. I will have to look into it.
Hello. Thank u, I did it. Now I want to know how to put the model and the camera on the center of the renderer. The mesh.postion.set() is confusing for me and I have tried so many coordinates
You need to set the target of the orbit camera to the position of the mesh.
@@dangreenheck I did it, it appears to be closer to the model but it is not centered. And now I am trying to find a new model, I think it renders but it is nowhere to be found on the renderer. I have tried to change the lights, the camera, the orbit controls and the model position itself, but I cannot find it (and I know it works because I can visualize it in other sites). I would really appreciate your help :))
Very good video
how to load collada file .dae in three js?
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 ?
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).
@@dangreenheck 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?
@@KnOtoUt Something like that! Doesn’t need to be globally scoped if you are using ES6 modules.
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?
You use Vite to create a build and you deploy that on your server.
@@dangreenheck Thanks for the reply. How does that work exactly? Do you have instructions?
Good video, but I have a problem, the model does not load and errors appear on the console, can you help me please?
What are the errors?
Where is the next ep of sim city?
Stay tuned…