# GLTFLoader loading multiple models in a "for" loop - referencing problem

**URL:** <https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [October 28, 2019, 1:48pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487 "2019-10-28T13:48:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![skye0402](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@skye0402](https://discourse.threejs.org/u/skye0402)\
**Post date:** [October 28, 2019, 1:48pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/1 "2019-10-28T13:48:35Z")

</div>

Hi experts,

I’m loading models in a _for_ loop and although the models are loaded (and the 3D models is correct, they are different) the position and name is always set by the last entry of the for loop, meaning (in my case) all three objects have **same name and position** (see screenshot below). It seems the reference to the variable is kept but I don’t know why.

Code looks like this:

> ```
> for (i = 0; i < resourceData.length; i++) {
> var loader = new THREE.GLTFLoader();
> var oResource = resourceData[i];
> var sModelName = "resources/" + oResource.model3D + ".gltf";
> loader.load(sModelName, function (gltf) {
> gltf.scene.traverse(function (node) {
> if (node instanceof THREE.Mesh) {
> node.castShadow = true;
> }
> });
> gltf.scene.name = oResource.model3D + "-" +oResource.tagID;
> gltf.scene.position.x = parseFloat(oResource.x);
> gltf.scene.position.y = parseFloat(oResource.y);
> gltf.scene.position.z = parseFloat(oResource.z);
> scene.add(gltf.scene);
> }, undefined, function (error) {
> console.error(error);
> });
> };
> 
> ```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/009b0925348bc72c6c917524d5793d42cb2f1a4b.png)

I have no idea where to look at. I have a similar for loop in another context and it works just fine.  
oResource looks like this:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/416148b8a944af7f31216c6cbf4e886b5636cea0.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 28, 2019, 2:09pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/2 "2019-10-28T14:09:59Z")

</div>

Hi!  
Wouldn’t it be better to move the loader variable out of the loop and use `let` instead of `var` inside the loop?

```auto
var loader = new THREE.GLTFLoader();
for (let i = 0; i < resourceData.length; i++) {
    let oResource = resourceData[i];
    let sModelName = "resources/" + oResource.model3D + ".gltf";
    loader.load( sModeName, function (gltf) {
        // the same code as in your original post
    }, undefined, function (error) {
        console.error(error);
    })
}

```

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 28, 2019, 2:40pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/3 "2019-10-28T14:40:50Z")

</div>

I think @prisoner849 provides a solution ~~(except of the redundant creation of a loader in each iteration)~~.

`loader.load()` takes a callback which will be executed _after_ the file has been loaded. The problem is that `var` is function-scoped. Thus, the variables will be modified in every loop iteration until the last, _before_ any files are done loading, and the values will all be the last ones. `let`, on the other hand, is locally scoped, that is to the end of the loop iteration. So with `let`, each callback will have their own corresponding settings.

I think it’s a pretty cool bug. 😉

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 28, 2019, 2:43pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/4 "2019-10-28T14:43:31Z")

</div>

@EliasHasle Thanks for pointing 😄

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [October 28, 2019, 3:15pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/5 "2019-10-28T15:15:57Z")

</div>

A minor simplification tip is to repalce

```auto
for (let i = 0; i < resourceData.length; i++) {
    let oResource = resourceData[i];

```

with

```auto
for (let oResource of resourceData) {

```

---

<div class="post-metadata">

**Author:** ![skye0402](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@skye0402](https://discourse.threejs.org/u/skye0402)\
**Post date:** [October 28, 2019, 6:37pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/6 "2019-10-28T18:37:45Z")

</div>

@EliasHasle @prisoner849  
Gentlemen, thank you indeed for your help - I’m learning every day! Especially about the scoping of var and let! Now it works like a charm! And I also simplified the code as suggested! 😊

---

<div class="post-metadata">

**Author:** ![Craig\_von\_Chamier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/craig_von_chamier/32/18780_2.png) [@Craig\_von\_Chamier](https://discourse.threejs.org/u/Craig_von_Chamier)\
**Post date:** [June 8, 2021, 12:22pm UTC](https://discourse.threejs.org/t/gltfloader-loading-multiple-models-in-a-for-loop-referencing-problem/10487/7 "2021-06-08T12:22:02Z")

</div>

Old thread i know, but just incasr a lonely traveller hits it. I came across this which may be of help [https://redstapler.co/load-multiple-model-three-js-promise/](https://redstapler.co/load-multiple-model-three-js-promise/)