I have tried many videos, but I haven't got the output. But you are really great. You have explained each and every step. Now I got the output. Thank you very much, Mike.
Thank you soooo much. Just one problem I faced was when importing GLTFLoader at 4:20 in the video. So I installed three.js using npm on the project directory and did not change the line 64 on GLTFLoader.js file. Then imported it using import {GLTFLoader} from "./three/examples/jsm/loaders/GLTFLoader.js"; instead of "./GLTFLoader.js" (5:00) and everything worked just fine!
Thanks bro, this awesome, i look many videos and read many documentation, but dont understand, and when i look u video i understand all mechanics, thank u, u cool bro
I'm getting an error with my code. Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
I like this guy's honesty, he's not trying to read a statement from wikipedia presenting himself as mr. known it all(which most other uthubers do). When you don't know much about a topic then dont buII$hlt
Great! Helped me. Also, if you guys want to get rid of that errors in console at the end of the video, then place animate() call into loader.load() second parameter (on loaded function).
its CORS kind sir, to resolve: 1.you can use an extension 2. dont load them from your pc, get them hosted somewhere and just link it up. 3. if you host that in flask for example, flask cors will take care of it for you
Hey Mike, Thanks for the tutorial, the error you thrown in the last minute of your video is not caused by the live server. It's loader.load() function is asynchronous So basically the loader is still loading the scene.gltf and JS will continue to run the code below, however since the obj.rotation and scene.add(light) depends the loading, then you see all the errors on the console. To solve this issue you need to do the following: //let's load the scene.gltf file //loader.load takes 2 parameters //1) .gltf file //2). a callback function loader.load("scene.gltf", function (gltf) { obj = gltf.scene; scene.add(gltf.scene); //after the scene is loaded //we can add the background and light //also run the animate function scene.background = new THREE.Color(0xffffff); var light = new THREE.HemisphereLight(0xffffff, 0x000000, 10); scene.add(light); camera.position.set(0, 10, 40); animate(); }); basically, you set the backgound and the light inside this callback function and finally run the animate() function The async javascript is tricky, check this article developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
Hmm, I would go to that directory and see if there is a .js file extension on that file to get some more insight. Seems weird that it wouldn't be included on the file. Maybe some sort of bug happened when it was being downloaded, or perhaps you got the files from a different place than I did?
It works after following this video , but how can I setup the shadow to make it more like reality? And one more. How can I navigate or can rotate by the mouse cursor like an orbit function on website. thank you for the helpful video!
Thanks for your video, but I got an error showed "The requested module './GLTFLoader.js' does not provide an export named 'GLTFloader'", could you please help me with that?
Hey Smith, I followed each one of your steps but I get an error on the browser console: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". If you or anyone can solve this it'be great!!
I'm unfortunately taking a break from videos for school at the moment, but I'll remember this in the future! For now, try looking at the three.js documentation, or perhaps what you could do is change the model colors in whatever 3d modelling software you're using and then switch the models at a press of a button. That solution would work, but would perhaps be inefficient loading so many models, I'm sure there is a way to do it within three.js.
Hey smith, you're such a great programmer. Can I ask a video from your tutorial here in youtube. A 3D model in sketchfab which you can navigate or can rotate by the mouse cursor like an orbit function in sketchup. Thank you. I'm your new subscriber
Hey Mike great video but I'm a little stuck on something and was wondering you could me out. I've downloaded the three.js zip folder from the three.js site but the code within GLTFLoader.js file is completely different from the one you have, am I getting the wrong files? I ended up grabbing your version from a previous comment but I'm just wondering why your file is different from the one off the site?
Amazing job, please dont stop, you help a lot. One question, do you know how to do this, if i click on the gltf model it will change color? please thanks
hi sir, thanks for the great work I am new to Three.js, and I follow your steps, but it doesn't work with me. my question is do I need NodeJs to use "import {filename} from" or it should be work fine by adding type="module", or maybe its just the package version issue, I really need to know why it doesn't work even the background was white, but with no error on the console. thanks in advance
Hey Mike, Firstly Thanks a lot for this full of information video. I think my fault but can you help me? I have this errors on my page. When I save the codes I dont see anything. I am clearly write the codes but not works. three.module.js:49851 WARNING: Multiple instances of Three.js being imported. 3D.html:30 Uncaught TypeError: THREE.WebGlRenderer is not a constructor
I did not include the model files I used because they were too big for github, but if you just put your .gltf and .bin file into the source directory it should work. You might have to mess around with background colors and camera position, check my reply to Philip Rosner in this comment section for more on that. (Also, be sure that you are using some sort of live hosting feature as you cant just open the .html file, it has to be hosted because of some obscure browser rules with model files, see the link in the description for more on that.)
Improvements : 1. Upload the source code to Github so that people don't have to copy the code according to your video like an idiot. 2. Your camera feed is way too large and it blocks the code, which is much important than your face.
I have tried many videos, but I haven't got the output. But you are really great. You have explained each and every step. Now I got the output. Thank you very much, Mike.
I've tried not just one or two videos like this but you just break my curiosity as to why mine wasn't working. many thanks for putting this out here.
Thank you soooo much. Just one problem I faced was when importing GLTFLoader at 4:20 in the video. So I installed three.js using npm on the project directory and did not change the line 64 on GLTFLoader.js file. Then imported it using import {GLTFLoader} from "./three/examples/jsm/loaders/GLTFLoader.js"; instead of "./GLTFLoader.js" (5:00) and everything worked just fine!
Finally a clear and simple video about this topic, thanks man!! :)
Very good video by the way sad that you got not that much subscribers, content 10+
Thanks bro, this awesome, i look many videos and read many documentation, but dont understand, and when i look u video i understand all mechanics, thank u, u cool bro
I'm getting an error with my code. Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
even i am getting same error, have you resolved it ?
Dude...AWESOME tutorial, thanks for the clarity.
I have been seeking this for hours. Thank u ,u made my day (qwq)
I like this guy's honesty, he's not trying to read a statement from wikipedia presenting himself as mr. known it all(which most other uthubers do). When you don't know much about a topic then dont buII$hlt
Great! Helped me. Also, if you guys want to get rid of that errors in console at the end of the video, then place animate() call into loader.load() second parameter (on loaded function).
You're doing an amazing job man, such a helpful video
Thanks a lot !!! I was struggling for 2 days with this shit ! God bless you
AHHHH Finally Something that works!!! , subscribed
its CORS kind sir, to resolve: 1.you can use an extension 2. dont load them from your pc, get them hosted somewhere and just link it up. 3. if you host that in flask for example, flask cors will take care of it for you
Hey Mike,
Thanks for the tutorial, the error you thrown in the last minute of your video is not caused by the live server. It's loader.load() function is asynchronous
So basically the loader is still loading the scene.gltf and JS will continue to run the code below, however since the obj.rotation and scene.add(light) depends the loading, then you see all the errors on the console.
To solve this issue you need to do the following:
//let's load the scene.gltf file
//loader.load takes 2 parameters
//1) .gltf file
//2). a callback function
loader.load("scene.gltf", function (gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
//after the scene is loaded
//we can add the background and light
//also run the animate function
scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 10);
scene.add(light);
camera.position.set(0, 10, 40);
animate();
});
basically, you set the backgound and the light inside this callback function and finally run the animate() function
The async javascript is tricky, check this article
developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
Thank you so much man, this is the best instruction about gltf!
4:12 I don't have it inside GLTFLoader.js
I found it, looks like library contains two files with the same name... we need one from JSM folder
Thanks so much! Loved your video
Thanks bro very much appreciated 💪🏼
4:30 I could not use this form, I need to write this down instead "./three.module". I don't know why. can you explain to me?
Hmm, I would go to that directory and see if there is a .js file extension on that file to get some more insight. Seems weird that it wouldn't be included on the file. Maybe some sort of bug happened when it was being downloaded, or perhaps you got the files from a different place than I did?
omfg thanks I had some issues with importing the modules
Thank you Mike , very helpful tutorial !
Hi Mike,
I am getting the error : " WARNING: Multiple instances of Three.js being imported. @ three.module.js:49490 ." What could cause this issue?
Same here, I still cant find the solution
Hello. Please make a video on how you would run this on Flask instead of Live server. Thank you
Mr. Cube is the real MVP here...
Thanks for this video. But I got a WARNING: Multiple instances of Three.js being imported. three.module.js:48909 How can this problem be solved?
Can you do this, but with Angular, importing THREE and other dependencies using npm etc. That would be awesome, thanks.
It works after following this video , but how can I setup the shadow to make it more like reality?
And one more. How can I navigate or can rotate by the mouse cursor like an orbit function on website.
thank you for the helpful video!
Thanks for your video, but I got an error showed "The requested module './GLTFLoader.js' does not provide an export named 'GLTFloader'", could you please help me with that?
Hey Smith, I followed each one of your steps but I get an error on the browser console: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". If you or anyone can solve this it'be great!!
now, can you solve this?
In the html, before the threejs import
{ "imports": { "three": "../build/three.module.js" } }
Fantastic it works
hi looking to load ply files to just view?? any help??
Great vid.
Does this work with an OBJ file or would I need OBJ specific loader code?
Would we need to import the OrbitControls in the same manner?
is it possible to use the camera from the [imported] file?
(instead of coding one as demonstrated here)
thanks!
Please make more videos in Three.JS
Can u make the extension content that makes options to change the color of the car?
I'm unfortunately taking a break from videos for school at the moment, but I'll remember this in the future! For now, try looking at the three.js documentation, or perhaps what you could do is change the model colors in whatever 3d modelling software you're using and then switch the models at a press of a button. That solution would work, but would perhaps be inefficient loading so many models, I'm sure there is a way to do it within three.js.
thanks very useful, please make ur camera smaller next time so it doesn't block vsc
Hey smith, you're such a great programmer. Can I ask a video from your tutorial here in youtube. A 3D model in sketchfab which you can navigate or can rotate by the mouse cursor like an orbit function in sketchup. Thank you. I'm your new subscriber
Hey Mike great video but I'm a little stuck on something and was wondering you could me out. I've downloaded the three.js zip folder from the three.js site but the code within GLTFLoader.js file is completely different from the one you have, am I getting the wrong files? I ended up grabbing your version from a previous comment but I'm just wondering why your file is different from the one off the site?
Me too. Wondering. You seem to need exactly that missing piece.
Can you help me out...how can I add color customizer into this??
brother i do the same but facing error i am new would you please help me:
Uncaught SyntaxError: Cannot use import statement outside a module
Can you make a tutorial about displaying a large .obj file on web? The file is over 2.5 gb
Amazing job, please dont stop, you help a lot. One question, do you know how to do this, if i click on the gltf model it will change color? please thanks
Great video! do you know if there is anyway that we could move the model, like up and down ?
thank you sooooo much it final worked
hey can u pls share the the github link for the project
Thanks man its awesome
Good one ! Keep it up
So does this work with the glb binary format also?
Personally feel that I am in love with this wonderful man
Thanks a lot. but there is an error question: TypeError: Cannot read properties of undefined (reading 'rotation')
at animate
found the answer in a minute)) not obj.rotation.y + = 0.01; => scene.rotation.y + = 0.01;
hi sir, thanks for the great work
I am new to Three.js, and I follow your steps, but it doesn't work with me.
my question is do I need NodeJs to use "import {filename} from" or it should be work fine by adding type="module",
or maybe its just the package version issue, I really need to know why it doesn't work even the background was white, but with no error on the console.
thanks in advance
same with me do you got any solution to this?
Hey Mike, Firstly Thanks a lot for this full of information video. I think my fault but can you help me? I have this errors on my page. When I save the codes I dont see anything. I am clearly write the codes but not works.
three.module.js:49851 WARNING: Multiple instances of Three.js being imported.
3D.html:30 Uncaught TypeError: THREE.WebGlRenderer is not a constructor
@mike smith
L capital in GLRenderer
Good.
Can you help me to create a project use three.js ?
same steps on 2023?
you fucking saved my ass! thank you so much. I was searching for days....
hey mike, I tried using your code to import my 3d model but it doesnt work, can i have the code you typed in
or email me
Sure thing, David. I put the files I made in the video on to github at this link: github.com/michaelmss/threejsfileimport
I did not include the model files I used because they were too big for github, but if you just put your .gltf and .bin file into the source directory it should work. You might have to mess around with background colors and camera position, check my reply to Philip Rosner in this comment section for more on that. (Also, be sure that you are using some sort of live hosting feature as you cant just open the .html file, it has to be hosted because of some obscure browser rules with model files, see the link in the description for more on that.)
This is not working now a days!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
me ajudou pkrl valeu 😀
fucking chad, it finally worked
Wow it is awesome
thanks a lot!
Please help me out with color customizer!!
Maybe this link could help you: tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/
@@MikeSmith-mb5em thanks!! Better if u make such videos of adding customizer...
Bro Get IN more Threejs Tuts ...
i would love to se0e
Thanks man :D!
this was SO helpful thank you so much!!!
Tysm
i fucking love you and your voice
❤
the scene and your gltf scene is making a lot of confusion
Improvements :
1. Upload the source code to Github so that people don't have to copy the code according to your video like an idiot.
2. Your camera feed is way too large and it blocks the code, which is much important than your face.