Thank you sir! I've been sitting at my computer for several hours, watching multiple videos to finally find the tutorial that worked. The last bit with the animate function was what solved the issue for me. Could not see the model before that. Thanks for your help.
I found the issue, it's in the GLTFLoader.js file After changing the import it is working for me Before: from 'three'; After: from '../../../build/three.module.js';
I have been getting the error " Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". " . could you please tell me how to resolve this issue.
I finally found the solution : (from SlimyPickaxe in the comment section) In your Virtual studio code app, open GLTFLoader.js and then go to the line 64 and modify from 'three'; to from '../../../build/three.module.js'; Now it should work
When I import GLTFLoader.js I get the following message Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../ I have tried to change those and alos by moving the file to the root but to no avail.
how to fix this error index.html:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
@knightcube I made code as per your instructions , it work fine till GLTFloader is not added. After adding GFTLoader it start showing error - Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Thank you so much for making this video. You explained it very well ! There are not many RUclips videos out there which teach this. Really appreciate it 😁 Subscribed ✅
Hi @Rajat I really like this video. but while working on same code I am facing error message can you help me out. error - "Uncaught TypeError: Failed to resolve module specifier "THREE". Relative references must start with either "/", "./", or "../"."
This error occurs when you are trying to import a module using a relative path, but the path is not correctly formatted. To fix this error, make sure that the path to the module starts with either "/", "./", or "../". For example, if you want to import a module at the root of your project, you can use a leading slash: import '/path/to/module' If you want to import a module from the current directory, you can use a leading "./": import './path/to/module' If you want to import a module from a parent directory, you can use a leading "../
Uncaught TypeError : Failed to resolve module specifier.Relative references must start with either "/", "./", or "../".I need a help!What do i need to do??
So, at 8:07, I followed exactly your steps, but I'm still not getting a black screen, and the console says "Uncaught TypeError: THREE.WebGl1Renderer is not a constructor type". What am I missing?
Leaving this for anyone who might find it helpful: I ran into the same issues but resolved them by commenting out the shadowMap and gammaOutput lines, and adding: renderer.render(scene, camera) . I also had THREE.WebGLRenderer instead of what is in the video !
thanks for the video. truly helpful. but if i may suggest u, i think it's better to increase the font-size while recording. i only ve 1 monitor, and watching this on spit screen a bit difficult. i end up watch this on my phone.
For Nuxt users: - placing the .GLTF file in the root assets folder didn't work for me, for some reason the path wasn't findable - placing the .GLTF file in the 'static' folder works, e.g. place it in a 'models' folder -> 'models/scene.gltf'
i have that error with the import GLTFLoader: Uncaught SyntaxError: Cannot use import statement outside a module I searched in internet but the only solution is the Open with Live Server with VSCode, but I need to submit it as a project for school and it has to be plug and play, so I can't use Visual Studio Code to start it, any other solutions?
I bought the code, I use Studio Code, I have the files in assets and I've downloaded three.js as it is in the video. It doesn't even show the canvas black screen. I see a white screen.
Sir my screen should be white rather than being black which we saw in the video. How to do that sir. It will be really helpful to me if you respond it quicker.
Hi, thanks for the tutorial. I'm using Autodesk Forge (kind of the same thing). I added the file into the blob storage and now I want to load it but I don't have any url for the load() function. How would I go about this?
@@knightcube Thanks a lot! Turns out Autodesk implemented the gltf loader in a separate worker and they are not exposing the parse() method that could accept a blob, effectively forcing me to upload the gltfs to their cloud. I will submit a ticket to them and ask if that is intentional or not.
I'm working in Autodesk Maya .I'm exporting from Maya. Present comes this error. Can you give any advice for this THREE.FBXLoader: ShininessExponent map is not supported in three.js, skipping texture. THREE.FBXLoader: Vertex has more than 4 skinning weights assigned to vertex. Deleting additional weights.
import * as THREE from './three.js-master/three.js-master/build/three.module.js' ^^^^^^ SyntaxError: Cannot use import statement outside a module sir please help me why are this error occured
For anyone having a constant 404 error on the .glb or .gltf file, I moved my wraith.glb from assets into my main folder(where index.html file is located) and then was able to load. For whatever reason, chrome would never see my assets folder. Also, if anyone has suggestions for my future use of .glb or .gltf files and how to properly use them feel free to comment so I can update my knowledgebase. Thank you.
also be sure to add the .glb at the end of the name , i had the problem that i named my glb file as box_glb, and i was writing: loader.load('/box_glb') but it had to be: loader.load('/box_glb.glb')
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". getting this error can anyone help
@@gert-janakerboom1314 yeah, apparently the GLTFLoader looks for 'three' when loading functions from the module, so you have to declare in your index.html file what 'three' means in the import map. Add this bit before you declare the other { "imports": { "three": "./three.js-master/build/three.module.js" } }
I did everything as per example. Fixed an import error. However, the model is still not displayed, only a black screen. In what there can be a reason? I would be very grateful for your help
@@hanaallouene4433 Found a solution to my problem. Everything is fine with the light. The point is in the studio itself, which does not see gltf files. You need to do the following: If your gltf file has the name: "scene.gltf", then you need to rename it in "scene.txt" and, accordingly, also change the extension to txt in the code
A mí me falló, entonces le compré el código fuente que ofrece y tampoco funcionó...no me aparece la pantalla en negro siquiera y tengo todo bien. Te contaré si lo pongo en funcionamiento.
@@RubenMontecinos Yo lo probé añadiendo un cubo con el código y el cubo si sale aún con fondo blanco pero no me funciona nada más, entonces probe otra herramienta se llama model viewer y con esa pudr añadir mi elemento 3d, no es igual que three.js y no se puede hacer todo lo que se puede con three pero deja añadir el elemento automáticamente con controles
@@gabrielagalvis4775 Gracias Gabriela!. La voy a probar también. A mí me funcionan algunas tutoriales, pero estoy intentando meter un logo rotatorio desde C4D y se me ha complicado.
Get the code here - knightcube.gumroad.com/l/threejs-load-3d-model In this video, I show you how to load a 3D model(gltf/glb) in your browser using the GLTFLoader class in Three.js. I also tell you the difference between GLTF and GLB models. 00:00 - Trailer 00:08 - Setting up the project with THREE.js 00:59 - Downloading THREE.js 01:51 - Checking whether THREE.js is installed correctly 02:45 - Testing with Live Server Extension 04:15 - Boilerplate code 08:42 - Adding a cube in our scene 10:42 - Download a 3D Model 11:56 - Using GLTFLoader class in THREE.js 15:32 - Switching to GLB instead of GLTF 17:23 - How to add lighting in THREE.js 18:25 - Adding the animate function 20:27 - GLTF vs GLB You can download the model that I used in the video from here 👇🏻 - www.cgtrader.com/free-3d-models/character/woman/wraith-cyber-ninja-apex-legends
Hello Rajat, my model doesn't show up at all, This what my console show i tried everything been week i don't find any solution Failed to load resource: the server responded with a status of 404 (Not Found) main.js?t=1645662098551:45 An error occurred client.ts:58 [vite] connected.
Send me a GitHub link or a Sandbox link to your project. There might be something that you forgot to add in your project but you are trying to access it via code.
****** ** ERROR ******* import {gltfLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.JS'; this line showing error Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". actual code import * as THREE from './three.js-master/build/three.module.js'; console.log(THREE) import {gltfLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.JS'; console.log(gltfLoader)
Solved issue by making changes in below code and added all javascript code in html file { "imports": { "three": "./three.js-master/build/three.module.js", "three/addons/": "./three.js-master/examples/jsm/" } }
Hi, I received this error in the console: Uncaught TypeError: Cannot read properties of null (reading 'width') at new WebGLRenderer (three.module.js:25786) at index.js:27 Nothing is appearing on my screen due to that error. Hope you can help solve this.
@@knightcube Thanks for the quick reply-- apparantly when I enter the 1 in between; I am still receiving the same error: Uncaught TypeError: Cannot read properties of null (reading 'width') at new WebGLRenderer (three.module.js:25786) at new WebGL1Renderer (three.module.js:27865) at index.js:27
Ohh I didn't read the error properly. Now I get it. You must have not defined the width property for size. Add this code before the WebGLRenderer line. const sizes = { width: window.innerWidth, height: window.innerHeight }
Hey I am suffering from this: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". Please Help !
Thank you sir!
I've been sitting at my computer for several hours, watching multiple videos to finally find the tutorial that worked.
The last bit with the animate function was what solved the issue for me. Could not see the model before that. Thanks for your help.
Thanks, your guide worked for me. I searched for examples of implementation in three.js for a long time and unsuccessfully, but here I found them!
I keep getting Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". error
I found the issue, it's in the GLTFLoader.js file
After changing the import it is working for me
Before:
from 'three';
After:
from '../../../build/three.module.js';
@@slimypickaxe exact, i had this problem today, i was getting the cnd file, i had to make a corrected copy.
I have been getting the error " Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". " . could you please tell me how to resolve this issue.
same issue...
Same issue for me and still looking for a solution
I finally found the solution : (from SlimyPickaxe in the comment section)
In your Virtual studio code app, open GLTFLoader.js and then go to the line 64 and modify from 'three'; to from '../../../build/three.module.js';
Now it should work
@@quentinhnx you saved me bro
@@quentinhnx bro can u elaborate where is GLTFLoader.js file
When I import GLTFLoader.js I get the following message
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../
I have tried to change those and alos by moving the file to the root but to no avail.
i also face same error ..if you find solution plz share here
how to fix this error
index.html:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
@knightcube I made code as per your instructions , it work fine till GLTFloader is not added. After adding GFTLoader it start showing error - Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
have you solved that?, I´m facing the same error
Thank you so much for making this video. You explained it very well ! There are not many RUclips videos out there which teach this. Really appreciate it 😁
Subscribed ✅
I am glad you liked it. Thanks for watching 🙂
@@knightcubeplease made video, Sketchware 3d model loader 🥺
Hi @Rajat I really like this video. but while working on same code I am facing error message can you help me out.
error - "Uncaught TypeError: Failed to resolve module specifier "THREE". Relative references must start with either "/", "./", or "../"."
This error occurs when you are trying to import a module using a relative path, but the path is not correctly formatted.
To fix this error, make sure that the path to the module starts with either "/", "./", or "../".
For example, if you want to import a module at the root of your project, you can use a leading slash:
import '/path/to/module'
If you want to import a module from the current directory, you can use a leading "./":
import './path/to/module'
If you want to import a module from a parent directory, you can use a leading "../
best video for threejs and glb/gltf thank man!
Thanks for the support!
Thank you, my dude! That's all I needed to load models, now I can start writing more complex logic :) :)
Thank you it is really helpful...
And specially after the last difference between glb and gltf , makes my code run😅
Cool, it works!
Maybe can do video on how to add rotation and scrolltrigger stuff?
Thanks!
I'm getting this problem saying: THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead
Thank you for this tutorial!! It was really helpful!!!!
I'm doing like you, but still I have this 404 error in console with three.module and favicon.ico each in 1 line.
Uncaught TypeError : Failed to resolve module specifier.Relative references must start with either "/", "./", or "../".I need a help!What do i need to do??
So, at 8:07, I followed exactly your steps, but I'm still not getting a black screen, and the console says "Uncaught TypeError: THREE.WebGl1Renderer is not a constructor type". What am I missing?
Leaving this for anyone who might find it helpful: I ran into the same issues but resolved them by commenting out the shadowMap and gammaOutput lines, and adding: renderer.render(scene, camera) . I also had THREE.WebGLRenderer instead of what is in the video !
Awesome Video, Very Well Explained!
Glad you enjoyed it!
Amazing looking forward to learn alot from you.
thanks for the video. truly helpful. but if i may suggest u, i think it's better to increase the font-size while recording. i only ve 1 monitor, and watching this on spit screen a bit difficult. i end up watch this on my phone.
Thanks for the feedback. I will ensure that my new videos have the right font size.
I keep getting the follow error;
THREE.GLTFLoader is not a constructor
I don't know why it doesn't work for me. My browser returns TypeError ./ ../ or / with module "three" in file GLTFLoader.js: line 64
For Nuxt users:
- placing the .GLTF file in the root assets folder didn't work for me, for some reason the path wasn't findable
- placing the .GLTF file in the 'static' folder works, e.g. place it in a 'models' folder -> 'models/scene.gltf'
Big fan of your work (y)
Thank you so much. I am a big fan of your work too🤝
Can you explain how to apply animation to GLB file after GLB object added into scene?
can you make a video on how to load 3D models or scenes from mongodb to a threejs app
that was usefull, thx!
Glad it helped!
I bumped into an error and I need help!
TypeError: undefined is not a constructor (evaluating 'new THREE.Scene()')
i have that error with the import GLTFLoader:
Uncaught SyntaxError: Cannot use import statement outside a module
I searched in internet but the only solution is the Open with Live Server with VSCode, but I need to submit it as a project for school and it has to be plug and play, so I can't use Visual Studio Code to start it, any other solutions?
another solution can be edit the .json files but i don't have anyone
Upload the project to github and then use gh-pages. I made a video on this already.
Here is the link - ruclips.net/video/gpTjJk-pt6s/видео.html
@@knightcube i don't have a good internet in my school
i solved it with copying the entire GLTFLoader Class (like a junior programmer solution)
the error u faced was not with the model, it simply failed to load the texture maps because you didn't copy them
THREE. WebGLRenderer : WebGL 1 support was deprecated in r153 and will ne removed in r163
Can Anyone explain above error?
I bought the code, I use Studio Code, I have the files in assets and I've downloaded three.js as it is in the video. It doesn't even show the canvas black screen. I see a white screen.
Can you please right click > Inspect and see if there are any errors showing in the console?
Thank you for the reply. It doesn't show errors. I am thinking where is the problem.
Sir my screen should be white rather than being black which we saw in the video. How to do that sir. It will be really helpful to me if you respond it quicker.
wraith = cyber ninja
cool
Hi, thanks for the tutorial. I'm using Autodesk Forge (kind of the same thing). I added the file into the blob storage and now I want to load it but I don't have any url for the load() function. How would I go about this?
var blobFile = new Blob([data], {type: 'application/octet-stream'});
var fileURL = URL.createObjectURL(blobFile);
window.open(fileURL);
@@knightcube Thanks a lot! Turns out Autodesk implemented the gltf loader in a separate worker and they are not exposing the parse() method that could accept a blob, effectively forcing me to upload the gltfs to their cloud. I will submit a ticket to them and ask if that is intentional or not.
I'm working in Autodesk Maya .I'm exporting from Maya. Present comes this error. Can you give any advice for this
THREE.FBXLoader: ShininessExponent map is not supported in three.js, skipping texture.
THREE.FBXLoader: Vertex has more than 4 skinning weights assigned to vertex. Deleting additional weights.
Please share the code
Get the code here - knightcube.gumroad.com/l/threejs-load-3d-model
import * as THREE from './three.js-master/three.js-master/build/three.module.js'
^^^^^^
SyntaxError: Cannot use import statement outside a module
sir please help me why are this error occured
For anyone having a constant 404 error on the .glb or .gltf file, I moved my wraith.glb from assets into my main folder(where index.html file is located) and then was able to load. For whatever reason, chrome would never see my assets folder. Also, if anyone has suggestions for my future use of .glb or .gltf files and how to properly use them feel free to comment so I can update my knowledgebase. Thank you.
also be sure to add the .glb at the end of the name , i had the problem that i named my glb file as box_glb, and i was writing: loader.load('/box_glb') but it had to be: loader.load('/box_glb.glb')
i write the same code as u write but in my console module is not showing what should i do ?
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
getting this error can anyone help
Hi there, i am getting the same error, can anyone help here ?
@@gert-janakerboom1314
yeah, apparently the GLTFLoader looks for 'three' when loading functions from the module, so you have to declare in your index.html file what 'three' means in the import map. Add this bit before you declare the other
{
"imports": {
"three": "./three.js-master/build/three.module.js"
}
}
@@giuseppedagostino769 thanks this solved the problem!
@@giuseppedagostino769 I had the same problem. Thanks :D
@@giuseppedagostino769 hello bro, can you show me where to add this code? thank you so much
Which visual studio version are you using. 2019 is completely different from this.
It is Visual Studio Code - code.visualstudio.com/download. Visual Studio is a different IDE.
@@knightcube Thanks
Hi sir one doubt, is both index.html and index.js are developed in three.js-master folder ?
No. index.html, index.js and three.js-master folders are inside the root folder. They are all separate from each other.
how to scaling 3d model in website
Thanks a lot
I did everything as per example. Fixed an import error. However, the model is still not displayed, only a black screen. In what there can be a reason? I would be very grateful for your help
are you sure you added lights to the scene, usually with a scene.add(lights)
any solution for that problem?
@@hanaallouene4433 Found a solution to my problem. Everything is fine with the light. The point is in the studio itself, which does not see gltf files. You need to do the following: If your gltf file has the name: "scene.gltf", then you need to rename it in "scene.txt" and, accordingly, also change the extension to txt in the code
Hey nice video, did you publish the source code some here?, this will help a lot 😅
You can get it here - knightcube.gumroad.com/l/threejs-load-3d-model
can you provide the source code?
how to make an hit test using the above code
can you share plzz github code ?
Added the link in the description
Ayuda no me funciono :( hice todo tal cuál, solo que use un archivo propio pero del mismo formato
A mí me falló, entonces le compré el código fuente que ofrece y tampoco funcionó...no me aparece la pantalla en negro siquiera y tengo todo bien. Te contaré si lo pongo en funcionamiento.
@@RubenMontecinos Yo lo probé añadiendo un cubo con el código y el cubo si sale aún con fondo blanco pero no me funciona nada más, entonces probe otra herramienta se llama model viewer y con esa pudr añadir mi elemento 3d, no es igual que three.js y no se puede hacer todo lo que se puede con three pero deja añadir el elemento automáticamente con controles
@@gabrielagalvis4775 Gracias Gabriela!. La voy a probar también. A mí me funcionan algunas tutoriales, pero estoy intentando meter un logo rotatorio desde C4D y se me ha complicado.
Get the code here - knightcube.gumroad.com/l/threejs-load-3d-model
In this video, I show you how to load a 3D model(gltf/glb) in your browser using the GLTFLoader class in Three.js. I also tell you the difference between GLTF and GLB models.
00:00 - Trailer
00:08 - Setting up the project with THREE.js
00:59 - Downloading THREE.js
01:51 - Checking whether THREE.js is installed correctly
02:45 - Testing with Live Server Extension
04:15 - Boilerplate code
08:42 - Adding a cube in our scene
10:42 - Download a 3D Model
11:56 - Using GLTFLoader class in THREE.js
15:32 - Switching to GLB instead of GLTF
17:23 - How to add lighting in THREE.js
18:25 - Adding the animate function
20:27 - GLTF vs GLB
You can download the model that I used in the video from here 👇🏻
- www.cgtrader.com/free-3d-models/character/woman/wraith-cyber-ninja-apex-legends
gammaOuput 🤦♂️
100% loaded, an error happened.
Error coming as : Failed to load resource: the server responded with a status of 404 (Not Found).for 'three.module.js'...Any solution?
it happens whenever I do GLTFLoader importing
@@nithulAyinikat import { GLTFLoader } from './three.js-master/examples/jsm/loaders/GLTFLoader.js'
Yup got it. Tq
Hello Rajat, my model doesn't show up at all, This what my console show i tried everything been week i don't find any solution
Failed to load resource: the server responded with a status of 404 (Not Found)
main.js?t=1645662098551:45 An error occurred
client.ts:58 [vite] connected.
By any chance did you forget to download the 3D model and put it into your project folder?
@@knightcube nope its inside im sure , i made it from blender
Send me a GitHub link or a Sandbox link to your project. There might be something that you forgot to add in your project but you are trying to access it via code.
****** ** ERROR *******
import {gltfLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.JS';
this line showing error Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
actual code
import * as THREE from './three.js-master/build/three.module.js';
console.log(THREE)
import {gltfLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.JS';
console.log(gltfLoader)
Solved issue by making changes in below code and added all javascript code in html file
{
"imports": {
"three": "./three.js-master/build/three.module.js",
"three/addons/": "./three.js-master/examples/jsm/"
}
}
@@ashokkasar8368 Thanks for this. I had the same issue.
Hi,
I received this error in the console:
Uncaught TypeError: Cannot read properties of null (reading 'width')
at new WebGLRenderer (three.module.js:25786)
at index.js:27
Nothing is appearing on my screen due to that error.
Hope you can help solve this.
Use WebGL1Renderer (add that extra "1" between WebGL and Renderer)
@@knightcube Thanks for the quick reply--
apparantly when I enter the 1 in between; I am still receiving the same error:
Uncaught TypeError: Cannot read properties of null (reading 'width')
at new WebGLRenderer (three.module.js:25786)
at new WebGL1Renderer (three.module.js:27865)
at index.js:27
Ohh I didn't read the error properly. Now I get it. You must have not defined the width property for size.
Add this code before the WebGLRenderer line.
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
Can you upload code please
You can get the code here - knightcube.gumroad.com/l/threejs-load-3d-model
Hey I am suffering from this:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Please Help !
before your index.js
{
"imports": {
"three": "./three.js-master/build/three.module.js"
}
}
@@angeldarco this worked for me thanks!! :D
@@angeldarco thank you. this solved my problem