Gltf loader using threejs


I have a situation here, I’m using Threejs with react and I’m unable to load all the gltf or glb models into my project. I get parse errors when loading from local or from url on some 3d models.

I’m using gltf loader from here.

git repository of my code is here

for some models the error is:

The Gltf model url is here

TypeError: Cannot read property ‘URL’ of undefined
at GLTFParser.loadTexture (gltfLoader.js:1896)
at GLTFParser.getDependency (gltfLoader.js:1636)
at GLTFParser.assignTexture (gltfLoader.js:1998)
at GLTFParser.loadMaterial (gltfLoader.js:2214)
at GLTFParser.getDependency (gltfLoader.js:1632)
at GLTFParser.loadMesh (gltfLoader.js:2672)
at GLTFParser.getDependency (gltfLoader.js:1616)
at gltfLoader.js:3067
at GLTFParser.loadNode (gltfLoader.js:3123)
at GLTFParser.getDependency (gltfLoader.js:1612)
at buildNodeHierachy (gltfLoader.js:3214)
at gltfLoader.js:3294
at async Promise.all (:3000/index 7)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)
at async Promise.all (:3000/index 0)

Can anyone help me with the solution on how to load gltf or glb models to load correctly.

l also wanted to know if it would help my project any better if I’m using threejs with react. Thanks in advance.

can anyone help me with this?

It seems you are hitting this issue:

I’ve have changed the problematic line in GLTFLoader to the following and the error goes away:

var URL = window.self.URL || window.self.webkitURL;

You can then also remove var self = this; from the top of the file.

Unfortunately, we can’t apply this patch to GLTFLoader since window can’t be used in workers.

Thanks for the reply.

Is there any difference in using GLTF loader with and without React?

any workaround, so that I can make this work with React?

Sorry, I’m not using React so I can’t help any further. It makes probably more sense to ask this question to the React community.