• Looking back *I don't recommend* that you use that method of importing models. Here's a way better method (the first half of the video): th-cam.com/video/f1RbD_wkGpc/w-d-xo.html *An even better way is to just use Vite* • Article: waelyasmina.net/articles/three-js-tutorial-for-absolute-beginners/ • To run the server you need to run *npx parcel ./src/index.html* now instead of parcel ./src/index.html • Three.js r155 updates: 1. You need way higher values for light intensity. example: const spotLight = new THREE.SpotLight(0xFFFFFF, 5000); 2. For better output results, ensure to set the colorSpace property of the textures. Check out this video to learn more about color spaces: th-cam.com/video/6XvqaokjuYU/w-d-xo.html • The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* . • This is the boilerplate that I'm using in my tutorials: github.com/WaelYasmina/ThreeBoilerplate
I'm halfway through the tutorial and can definitely say it's the best three.js I've ever followed by far! Tried to get into it several times, even with some paid ones some time ago but just couldn't wrap my head around it. This one is super thorough and easy to follow, big kudos to You.
For those confused about their cube texture not working, make sure your texture is in 1:1 ratio, as in, it must be a square image and rectangles don't work, thought I would clarify since the source images provided are not square and you must crop it to make it work, hope it helps
This video is a time saver; if only I watched this before I jumped into three.js a few days ago. I could have saved myself some headaches. Learned my lesson. I'm here to get a good grounding in the basics. Thank you!
4:00 how to remove the scrollbar in google chrome 29:00 how to take the correct shadow 31:10 solve the pixelaton of spotlight (pixelation: the shadow is not as expected)
for those who are having touble with the mouse recognition, the code in the video is slightly wrong, maybe it was corrected afterwards and i didnt see it, but to get the mouse position in the screen is: const mousePosition = new three.Vector2; window.addEventListener('mousemove', function(e){ mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; mousePosition.y = (e.clientY / window.innerHeight ) * -2 + 1; }) notice the -2 that was missing before, also make sure the size of the renderer is the same as the window, if not, this snippet is useless
For some unknown reason, on refresh, I get (phantom arrays) an 'intersects' array of length 10 and then a series of array lengths 8, even though my mouse was off the page. My sphere was included in these arrays which meant it coloured red from the start. I had to hack this workaround before I could get it to work :- if (intersects.length < 8) { for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.uuid === sphereId) { intersects[i].object.material.color.set(0xFF0000); }; }; }; Maybe if someone knows why I'm getting these phantom arrays in the first place, I can remove my hack.
About spot light, current documentation clearly states that the default decay is 1, and if you want a constant intensity irrespective of distance, you should set decay to 0.
28:30 - DirectionalLightHelper(light) and CameraHelper(light.shadow.camera) are single handedly the best things I have learnt from all of this.. This answered SO SO many questions I had been having and had given up on because it was "just acting weird"... Now I can SEE what is happening, and now I can see the camera was too big, and far/near was just all wrong..
Only half-way through the video and I already understand what three.js is capable of. Very nice explanation and this is a really brilliant video. You got a new subscriber! Please keep up videos like this.
I had to add an intensity to the spotlight manually as it is undefined by default. I added it by initializing the spotlight like this: const spotLight = new THREE.SpotLight(0xFFFFFF, 100000); spotLight.position.set(-100, 100, 0); I hope this helps someone.
I think if this content translated to Arabic it will be one of the most successful content for Arab keep going and thanks for the way you explain every point
it's like using a 3D software! fantastic beginning of the tutorial! sad it stops when it gets interesting, hehe, but really good introduction, thanks a lot. edit:after having tried to get other peoples implementations i have to say, your tutorial rocks!! with all others I had quite problems often to even get it running in the first place, with another solution code-autocomplete didn't work, etc! Great Job on this tutorial :)
The "parcel ./src/index.html" did not work (3:17). The "npx parcel src/index.html" did work. Excellent video! The only YT video, I found, that actually works!
You nailed it brother!! I suggest you please take some topics from Yuri Artiukh's channel and teach us those advanced Three.js concepts too down the line. Yuri explains well, but he does live sessions so his videos are all over 1 hour based on trial and error and not possible for the average man to devote time for. And the npm install thing he uses at the beginning gives a boiler plate with that rainbow coloured plain which he builds over. That I fail to understand. Thanks again and wishing you a bright future :D
Thank you! I'm actually not an expert, I started learning Three.js 10 or 11 months ago. The main idea of the channel is to share what I'm learning with other fellow beginners. And that by creating videos as answers/solutions to questions/problems I once faced. Which makes it easier for them to find the solution instead of putting their time into researching. Having said that, yes as long as I continue learning and experimenting the level will eventually slowly increase. Thus, I will be creating some cool unique stuff.
Very nice tutorial, excellent visually. A tip for future videos is to make your voice a bit less monotone/sound less like youre talking from a script. And "talked" is not pronounced "tal-ked", its "taakt" :)
I'm actually reading from a script. It's hard for me to explain without one because I have to think how to say this in English and also what's going on in the video which so hard for someone who's not a native speaker unfortunately. But I'll try to fix that. Thank you for the tip!
That is an amaaaaaazing explanation which covers everything I wanted to know about threejs. Thanks man! Ps: for who is struggling in understand the concepts of camera, lights raycasting and shaders, maybe taking a look on game development with Unity3d or Unreal might helps you to understand the basics. Agaubs tgabjs Wael, very nice video!
How can I bring the completed file and upload it to my own server // which after learning as you taught It's a great story. And I can do as you teach. But I want to publish this 3D model in the form of instruction on web in my server // But after uploading to the server, the web page shows white. nothing happened Not sure if it's a problem with localhost:1234 yours or not Please help explain. Thank you.
thank you very much for the tutorial, I think I found a small mistake. on the video "39:42", on the graph where the original coordinates are shown, instead of (480, 0) it should be (480, 476)
my package.json is : "devDependencies": { "parcel": "^2.8.3" }, "dependencies": { "three": "^0.149.0" } however I still get error whenever I put CSS into my HTML. Could anyone tell me why?
in line import nebula from '../img/nebula.jpg'; import stars from '../img/stars.jpg'; Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec. help me please
I am having trouble showing up error : @parcel/core: Failed to resolve '.js/scripts.js' from './src/index.html' @parcel/resolver-default: Cannot load file './.js/scripts.js' in './src'. Did you mean './js/scripts.js'? Can you help me out here? Thank you!
were you able to find a solution ? i'm a total beginner and i'm really thinking of giving up because its taking me 3 hours to just do what the tutorial does in 3 minutes
There were some breaking changes in three.js, apparently, because your issue is related to newer versions. A possible solution is to downgrade to 0.133.0 version by run command "npm install three@0.133.0"
great tutorial btw im using sublime text 4 and the browser sync extension and it works great. edit1: at 35:24 i had some issues with loading the images because im not using parcel so instead of doing import name from img file i instead did let name = img file.
Hey man I loved your content. I have a question? Are we able to get the wireframe from an object that we imported to the scene ? Also in 13:10 I want to use the wireframe and the completed object. So, the wireframe will wrap the ball. I think I am going to create 2 identical object one with wireframe and the other not, right?
Hello, thanks for your video ! Have just a problem for shadow and light for (first) plane in moment you change MeshBasicMaterial into MeshStandardMaterial. My scene is very dark and i dont see shadow to sphere.
Hey ! I get this error *Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".* just after I put *import * as THREE from 'three';* as the first line of the script.js file, do you have any idea to fix it ?
Thank you for providing useful tutorial in this video. I've learned about D3.js before, until finally stopped halfway to learn animation. It is highly recommended to be able to draw as an animator. when at the stage of learning to draw, a video appears about AI that can create art with just a typed description. there I was confused whether what I learned could be replaced with AI in the future. Until finally after a long research, I found this content and it is very promising for the current development especially in the future if the metaverse is REAL. Because I enjoy doing work that uses 50% logic and 50% art. Thank you again for sharing this knowledge, I ask permission to learn from this playlist.
That's so nice to hear! I've just watched your videos and I see you're talented at drawing. I bet you'd do some amazing stuff with your drawing skills + Blender + Three.js.
@@WaelYasmina Thanks Sensei :D I did my best to learn three.js over the next 3 months. If this is something I've been looking for all along, then I'll keep learning until I master it
I'm so confused as to why only MeshBasicMaterial works in the newest version of the library (0.157.0). If I changed it to any other Material, like MeshStandardMaterial or MeshPhongMaterial, my IDE tells me there's a type error (which should be impossible since it's not typescript?) and it doesn't render when I reload the page.
• Looking back *I don't recommend* that you use that method of importing models.
Here's a way better method (the first half of the video): th-cam.com/video/f1RbD_wkGpc/w-d-xo.html
*An even better way is to just use Vite*
• Article: waelyasmina.net/articles/three-js-tutorial-for-absolute-beginners/
• To run the server you need to run *npx parcel ./src/index.html* now instead of parcel ./src/index.html
• Three.js r155 updates:
1. You need way higher values for light intensity.
example:
const spotLight = new THREE.SpotLight(0xFFFFFF, 5000);
2. For better output results, ensure to set the colorSpace property of the textures.
Check out this video to learn more about color spaces: th-cam.com/video/6XvqaokjuYU/w-d-xo.html
• The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* .
• This is the boilerplate that I'm using in my tutorials: github.com/WaelYasmina/ThreeBoilerplate
I can't do this parcel./src/index.html
@@HyperEditz333 It's npx parcel ./src/index.html
@@WaelYasmina everything worked out thanks
@@WaelYasmina do you happen to have any telegrams
@@WaelYasmina I have something stopped working can you help
you don't know how hungry I was for these content dude... THANKS!! I'm lovin it!!!
I like those kind of tutorial. Simple, explicit, but straight to the point. No stoopid intro, camera or cringe transitions
This is absolute gold! Thanks for putting this playlist together. This is now my entire learning journey for the next few months 🙌
I'm halfway through the tutorial and can definitely say it's the best three.js I've ever followed by far! Tried to get into it several times, even with some paid ones some time ago but just couldn't wrap my head around it.
This one is super thorough and easy to follow, big kudos to You.
Hey, did you face any issue with the spotlight not hitting the subject
thanks for the review, was useful
I faced the same problem, set spotLight.decay to 0 then voila; it cast lights now@@mohammedhashim6242
I am not very new to Three JS - but this video has definitely inspired me to do some more stuff in Three JS. Thank you!
For those confused about their cube texture not working, make sure your texture is in 1:1 ratio, as in, it must be a square image and rectangles don't work, thought I would clarify since the source images provided are not square and you must crop it to make it work, hope it helps
Bro how do you solve that error?
My cube texture also not working.
@@khantzawhein2605 which texture are you using ?
You're a life saver man. I was stuck on this!
Thanks for this, couldn't figure out why it didn't load!
This video is a time saver; if only I watched this before I jumped into three.js a few days ago. I could have saved myself some headaches. Learned my lesson.
I'm here to get a good grounding in the basics. Thank you!
Very well explained!!! You go into the meaning of every parameter and explain it with simple illustrations. Thank you for your effort.
4:00 how to remove the scrollbar in google chrome
29:00 how to take the correct shadow
31:10 solve the pixelaton of spotlight (pixelation: the shadow is not as expected)
**Khaby Lame reaction**
for those who are having touble with the mouse recognition, the code in the video is slightly wrong, maybe it was corrected afterwards and i didnt see it, but to get the mouse position in the screen is:
const mousePosition = new three.Vector2;
window.addEventListener('mousemove', function(e){
mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1;
mousePosition.y = (e.clientY / window.innerHeight ) * -2 + 1;
})
notice the -2 that was missing before, also make sure the size of the renderer is the same as the window, if not, this snippet is useless
Thanks a lot for that
For some unknown reason, on refresh, I get (phantom arrays) an 'intersects' array of length 10 and then a series of array lengths 8, even though my mouse was off the page. My sphere was included in these arrays which meant it coloured red from the start. I had to hack this workaround before I could get it to work :-
if (intersects.length < 8) {
for (let i = 0; i < intersects.length; i++) {
if (intersects[i].object.uuid === sphereId) {
intersects[i].object.material.color.set(0xFF0000);
};
};
};
Maybe if someone knows why I'm getting these phantom arrays in the first place, I can remove my hack.
These phantom arrays continue until I move the cursor across the page. It then reverts to an empty array untill I move the cursor over an object(s).
Thanks so much, you're a life saver. I was on the verge on giving up when I saw your comment. I can't thank you enough
@@gbadamosimateen940 👍
About spot light, current documentation clearly states that the default decay is 1, and if you want a constant intensity irrespective of distance, you should set decay to 0.
Is that why lights seem kinda darker at my side than his? everything looks lot darker than it looks in the video
Thank sir
This is how a tutorial should be. Thank you! Keep up the good work.
Excellent channel, very clearly explained. You definitely deserve more subscribers and likes! Keep up the good work
TNice tutorials is THE most helpful tutorial on TH-cam imo. I am starting production in Hardstyle, and I find soft soft really useful
28:30 - DirectionalLightHelper(light) and CameraHelper(light.shadow.camera) are single handedly the best things I have learnt from all of this..
This answered SO SO many questions I had been having and had given up on because it was "just acting weird"... Now I can SEE what is happening, and now I can see the camera was too big, and far/near was just all wrong..
thanks a lot .. 💙
free three js tutorials are very rare on youtub
Keep an eye on the channel, because I'll make sure they will not stay as rare as they have been ;)
This is by far the best tutorial on the subject. The allround 3d part was really helpful.
Just found yr channel. I'm def following the entire series!
Awesome, thank you!
Excellent tutorial, a very complete introduction to this incredible library :)
I'm glad you think so, thank you Abraham!
I just clicked your video, and my god, did i skip anything? You did succeed helping me understand this amazing library ❤
Only half-way through the video and I already understand what three.js is capable of.
Very nice explanation and this is a really brilliant video. You got a new subscriber!
Please keep up videos like this.
Thank you!
29:21 regarding the spotLight section,
increasing the intensity value will result in a lighting effect.
const spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-100, 100, 0);
spotLight.castShadow = true;
scene.add(spotLight);
const options = {
sphereColor: '#ffea00',
wireframe: false,
speed: 0.01,
angle: 0.03,
penumbra: 0.5,
intensity: 50000
};
gui.add(options, 'intensity', 0, 100000);
thanks man
great help, thanks a lot!❤
thanks 👍
perfect tutorial for learning, just play with the values to get a better idea
I had to add an intensity to the spotlight manually as it is undefined by default.
I added it by initializing the spotlight like this:
const spotLight = new THREE.SpotLight(0xFFFFFF, 100000);
spotLight.position.set(-100, 100, 0);
I hope this helps someone.
it does thanks
thanksss
great help, thanks a lot!
Thanks a lot friend
Saved me a big headache! I rewound back to the beginning of the lighting section, thinking I had made a mistake somewhere.
I really Love this video how he have explained, camera, Sean, position, look at etc ❣❤❤❤
I thank you so much for what you are doing, this has been the most helpful source material to learn Three. Js
this is an amazing job!!!!! Your really clearly explained very well and I loved the evolution of the content description.
Thank you so much. :) :) :)
this is the most perfect tutorial I've ever seen, great work!
simply the best three.js tutorial out there! thanks man.
شكرا جزيلا يا بيه
This is so great brother straight to the point and very organized/informational.
Fantastic tutorial, well explained/organized. thanks so much
This is so so deep, detail and complete lesson, thankyou for providing this
No problem!
Thank you very much ! Very helpful !
Please make next serie on the immediate or advanced levels.
Sure thing!
Thank You sir! Your teaching method is amazing. I have learnt a lot.
now i am in a good mood
I dont even skip anything. Very wow tutorial
Last this video I hear you speak vertex shader and fragment, wait you make it. Thanks🎉🎉🎉
Thankyou brother i found the best tutorial for three js now.
I think if this content translated to Arabic it will be one of the most successful content for Arab keep going and thanks for the way you explain every point
it's like using a 3D software! fantastic beginning of the tutorial! sad it stops when it gets interesting, hehe, but really good introduction, thanks a lot.
edit:after having tried to get other peoples implementations i have to say, your tutorial rocks!! with all others I had quite problems often to even get it running in the first place, with another solution code-autocomplete didn't work, etc! Great Job on this tutorial :)
The "parcel ./src/index.html" did not work (3:17). The "npx parcel src/index.html" did work. Excellent video! The only YT video, I found, that actually works!
I used the comand but it still didnt worked. It tells me "Failed to resolve 'main.css' from './src/index.html' even after i deleted the css
this really looks cumbersome in oppose to game engines or 3D applications. such a headacge for simple tasls.
Great tips and insights here- Thanks for sharing!
Thanks for this tutorial! It's amazing. You made my day!
You nailed it brother!!
I suggest you please take some topics from Yuri Artiukh's channel and teach us those advanced Three.js concepts too down the line. Yuri explains well, but he does live sessions so his videos are all over 1 hour based on trial and error and not possible for the average man to devote time for. And the npm install thing he uses at the beginning gives a boiler plate with that rainbow coloured plain which he builds over. That I fail to understand.
Thanks again and wishing you a bright future :D
Thank you!
I'm actually not an expert, I started learning Three.js 10 or 11 months ago. The main idea of the channel is to share what I'm learning with other fellow beginners. And that by creating videos as answers/solutions to questions/problems I once faced. Which makes it easier for them to find the solution instead of putting their time into researching.
Having said that, yes as long as I continue learning and experimenting the level will eventually slowly increase. Thus, I will be creating some cool unique stuff.
@@WaelYasmina awesome!!
@@WaelYasmina I was facing some of the same problems. You presented all the solutions I needed. I really appreciate you for doing this.
Awesome! You are my precursor.
Very nice tutorial, excellent visually. A tip for future videos is to make your voice a bit less monotone/sound less like youre talking from a script. And "talked" is not pronounced "tal-ked", its "taakt" :)
I'm actually reading from a script. It's hard for me to explain without one because I have to think how to say this in English and also what's going on in the video which so hard for someone who's not a native speaker unfortunately.
But I'll try to fix that.
Thank you for the tip!
Thanks for the video, very helpful and well explained. Off to make so soft
Thank you so much for this course, it's really great, good luck in your life!
Thanks a lot for this very complete tutorial !
That is an amaaaaaazing explanation which covers everything I wanted to know about threejs. Thanks man!
Ps: for who is struggling in understand the concepts of camera, lights raycasting and shaders, maybe taking a look on game development with Unity3d or Unreal might helps you to understand the basics. Agaubs tgabjs Wael, very nice video!
I needed this. Thank you
This is a very good tutorial i ever seen . many many thanks
many people helped with your tutorial, can you add a tutorial on adding custom animation from mixzamo to three js
Wow, this is amazing and well explained, good job here
amazing tutorial
Great Tutorial!!
Thank You very much! You are an amazing teacher!
Thank you so much for this amazing tutorial
My pleasure!
How can I bring the completed file and upload it to my own server // which after learning as you taught It's a great story. And I can do as you teach. But I want to publish this 3D model in the form of instruction on web in my server // But after uploading to the server, the web page shows white. nothing happened Not sure if it's a problem with localhost:1234 yours or not Please help explain. Thank you.
parcel build ./src/index.html
thank you very much for the tutorial, I think I found a small mistake. on the video "39:42", on the graph where the original coordinates are shown, instead of (480, 0) it should be (480, 476)
Very useful! Thanks a lot, man!
my package.json is :
"devDependencies": {
"parcel": "^2.8.3"
},
"dependencies": {
"three": "^0.149.0"
}
however I still get error whenever I put CSS into my HTML. Could anyone tell me why?
Why when I type npm init in the terminal it says the term npm is not recognized as the name of a cmdlet…
This videos so helpful, thank you so much!!
Very good tutorial, clear and to the point.
Thank you Oumayma!
9:11 I don't know why when i want to use camera.position.z , there is no position property in the drop-down list
Someone kindly help 🙏😭
Type it like that, save, then open the console and see if this gives you an error.
@@WaelYasmina yes it worked thank you very much 🙏♥️
Very well made tutorial, thank you!
in line
import nebula from '../img/nebula.jpg';
import stars from '../img/stars.jpg';
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.
help me please
Very helpful explanation! Thanks
Love this tutorial, thank you.
I am having trouble showing up error : @parcel/core: Failed to resolve '.js/scripts.js' from './src/index.html'
@parcel/resolver-default: Cannot load file './.js/scripts.js' in './src'.
Did you mean './js/scripts.js'?
Can you help me out here? Thank you!
were you able to find a solution ? i'm a total beginner and i'm really thinking of giving up because its taking me 3 hours to just do what the tutorial does in 3 minutes
25:35 after add(directionalLight) my plane color doesnt turn to light, it's gray and grid show on bottom plane ???
There were some breaking changes in three.js, apparently, because your issue is related to newer versions. A possible solution is to downgrade to 0.133.0 version by run command "npm install three@0.133.0"
A life SAVEr!!!
excellent tutorial. Thank you!
this is amzing ty
Awesome tutorial, great work man!
Thank you Yuri!
great tutorial btw im using sublime text 4 and the browser sync extension and it works great. edit1:
at 35:24 i had some issues with loading the images because im not using parcel so instead of doing import name from img file i instead did let name = img file.
for the question at 30:55
yes it still gives pixelated issue it was not ur computer performance issue
Thank you for tutorial!
you are a good teacher ❤❤🙌🙌
Hey man I loved your content. I have a question? Are we able to get the wireframe from an object that we imported to the scene ? Also in 13:10 I want to use the wireframe and the completed object. So, the wireframe will wrap the ball. I think I am going to create 2 identical object one with wireframe and the other not, right?
Hello, thanks for your video ! Have just a problem for shadow and light for (first) plane in moment you change MeshBasicMaterial into MeshStandardMaterial. My scene is very dark and i dont see shadow to sphere.
GREAT JOB!
Hey ! I get this error *Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".* just after I put *import * as THREE from 'three';* as the first line of the script.js file, do you have any idea to fix it ?
Are you using Parcel?
Anyway, you can just use my Three.js boilerplate and you're good to go: github.com/WaelYasmina/ThreeBoilerplate
@@WaelYasmina Yes i'm already using Parcel. I'll try to use your template. Thank you
impressive vid, Thanks!
Thank you so much brother this is a great three.js tutorial
You are welcome!
I want to ask if I am learning web development is it helpful for me?
I have follow an Udemy course and it's well explained as this one, also it's good that you use the helper, I have no idea what it's for previously
Nice!
Really nice and helpful... Thanks!
bro thank you so much . Perfect tutorial.
You're welcome!
When I use the type="module" on the script i have a problem in the website with cors, something about a policy, how can I fix that?? 1:55
Nice tutorial.... Very helpful
Thank you for providing useful tutorial in this video.
I've learned about D3.js before, until finally stopped halfway to learn animation.
It is highly recommended to be able to draw as an animator.
when at the stage of learning to draw, a video appears about AI that can create art with just a typed description.
there I was confused whether what I learned could be replaced with AI in the future.
Until finally after a long research, I found this content and it is very promising for the current development especially in the future if the metaverse is REAL.
Because I enjoy doing work that uses 50% logic and 50% art.
Thank you again for sharing this knowledge, I ask permission to learn from this playlist.
That's so nice to hear!
I've just watched your videos and I see you're talented at drawing. I bet you'd do some amazing stuff with your drawing skills + Blender + Three.js.
Oh and I'm your 15th subscriber btw :p
@@WaelYasmina Thanks Sensei :D
I did my best to learn three.js over the next 3 months.
If this is something I've been looking for all along, then I'll keep learning until I master it
Can three js be used with node js and express? Because I tried to render models on ejs pages using node and express but I couldn't do it.
love it please make more advanced video
Will do. Thank you
great work
Thank you teacher
I'm so confused as to why only MeshBasicMaterial works in the newest version of the library (0.157.0). If I changed it to any other Material, like MeshStandardMaterial or MeshPhongMaterial, my IDE tells me there's a type error (which should be impossible since it's not typescript?) and it doesn't render when I reload the page.
I am unable to load the .glb file and no instance of it is created in the dist folder when I save it.
You should try to import file intead of using URL class. At least It worked for me.