# Gltf loader using threejs

**URL:** <https://discourse.threejs.org/t/gltf-loader-using-threejs/15116>\
**Category:** Questions\
**Tags:** react, gltf-loader\
**Created:** [May 12, 2020, 6:09am UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116 "2020-05-12T06:09:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![abnormalcoder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abnormalcoder/32/7977_2.png) [@abnormalcoder](https://discourse.threejs.org/u/abnormalcoder)\
**Post date:** [May 12, 2020, 6:09am UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116/1 "2020-05-12T06:09:28Z")

</div>

Hello,

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](https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders).

git repository of my code is here [GitHub - abnormalcoder/gltfReact](https://github.com/abnormalcoder/gltfReact.git)

for some models the error is:

The Gltf model url is [here](https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf)

> 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.

---

<div class="post-metadata">

**Author:** ![abnormalcoder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abnormalcoder/32/7977_2.png) [@abnormalcoder](https://discourse.threejs.org/u/abnormalcoder)\
**Post date:** [May 12, 2020, 4:16pm UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116/2 "2020-05-12T16:16:12Z")

</div>

can anyone help me with this?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 12, 2020, 4:42pm UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116/3 "2020-05-12T16:42:38Z")

</div>

It seems you are hitting this issue:

> <https://stackoverflow.com/questions/44292520/unexpected-use-of-self-no-restricted-globals-react/45500528#45500528>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![abnormalcoder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abnormalcoder/32/7977_2.png) [@abnormalcoder](https://discourse.threejs.org/u/abnormalcoder)\
**Post date:** [May 12, 2020, 9:14pm UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116/4 "2020-05-12T21:14:29Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 12, 2020, 9:35pm UTC](https://discourse.threejs.org/t/gltf-loader-using-threejs/15116/5 "2020-05-12T21:35:09Z")

</div>

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.