# Loading multiple FBX in three.js does not work

**URL:** <https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [October 1, 2019, 9:24am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979 "2019-10-01T09:24:39Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 9:24am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/1 "2019-10-01T09:24:39Z")

</div>

I just made a SO post about an hour ago, but I’m in a bit of a hurry to get this working… My problem is that in r108 and I am trying to get multiple FBX files imported, which does not seem to work. I can import them separately, but as soon as I load more than one, the second is ignored. I need to load about 10 different objects that will be changed dynamically at runtime so I can’t make them into a single mesh…

For convenience and not cross-posting between forums I would like to add in a link to SO to make it easier: [https://stackoverflow.com/questions/58180870/loading-multiple-fbx-in-three-js-does-not-work](https://stackoverflow.com/questions/58180870/loading-multiple-fbx-in-three-js-does-not-work)[Camargue\_aluminium.FBX](https://discourse.threejs.org/uploads/short-url/f0O2wj5gsPrceD1vxzWga8yBBuq.FBX) (26.8 KB) [Camargue\_wood.FBX](https://discourse.threejs.org/uploads/short-url/mfGK1Sf7DhAwWDwe9LJY5rXnpBd.FBX) (28.0 KB)

---

<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:** [October 1, 2019, 9:53am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/2 "2019-10-01T09:53:20Z")

</div>

Can you please share both FBX here in this topic? I’ll try to load them with the official `three.js` FBX example on my computer.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 9:55am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/3 "2019-10-01T09:55:43Z")

</div>

I have added them to my post, might be more convenient to have it there than inside the comments.

---

<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:** [October 1, 2019, 10:31am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/4 "2019-10-01T10:31:59Z")

</div>

Looking good:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/1076885ce368e53276929e413330210fbcd8c9db.png)

I’ve just replaced the loading code in [webgl\_loader\_fbx](https://threejs.org/examples/webgl_loader_fbx) with this:

```auto
var loader = new FBXLoader();
loader.load( 'models/fbx/Camargue_aluminium.fbx', function ( object ) {

	scene.add( object );

} );

loader.load( 'models/fbx/Camargue_wood.fbx', function ( object ) {

	scene.add( object );

} );

```

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 10:50am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/5 "2019-10-01T10:50:47Z")

</div>

What the hell. I am doing the exact same thing and it only loads the first one I load… I am doing this in VSCode and imported the npm package for the fbx loader though. Is that a different/non-official version? I might be using the wrong fbx loader. Though weird, my package.json saids “dependencies”: {  
“three”: “^0.108.0” } I also just tried it in the editor on the threeJS website and it loads there as well.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 11:17am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/6 "2019-10-01T11:17:21Z")

</div>

Appearantly the mesh is loaded correctly, but not being rendered. I have no idea why though…  
If you have the time can you take a look at my code, check if I have’nt missed anything important, but I dont think I have. [https://pastebin.com/fgwkwqWZ](https://pastebin.com/fgwkwqWZ)

---

<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:** [October 1, 2019, 11:46am UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/7 "2019-10-01T11:46:35Z")

</div>

> [@Torben\_Van\_Assche](#):
>
> Is that a different/non-official version?

Yeah, there are many `three.js` related third-party packages, most of them not really maintained. Please use the `FBXLoader` from the `three` npm package. But looking at your pastebin, you are already doing this.

Besides, please use just a single instance of `FBXLoader`. There is no need for `loader2`.

Apart from that, I can’t see something unusual in your code. Consider to share your entire repository (with all assets) via github so it’s possible to locally execute your app.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 12:00pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/8 "2019-10-01T12:00:40Z")

</div>

I’ve uploaded my project folder and anything that was needed to make it run that I can think of into my github. I was not sure about including the npm dependencies but they’re there just in case. [https://github.com/GrimZero/Configurator](https://github.com/GrimZero/Configurator)

I should tell you as well that I am relatively new to JavaScipt but have been doing C# in my education. Thats why the typescript dependency is there but I couldnt get it to work.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 12:27pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/9 "2019-10-01T12:27:55Z")

</div>

OK. Now I am really confused. I was messing with my orbitcontrols and zooming out quite a bit and zooming back in to the default camera position. Somehow this made the second mesh appear. This is one of the weirdest things I have seen in a while.

---

<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:** [October 1, 2019, 12:34pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/10 "2019-10-01T12:34:51Z")

</div>

BTW: I suggest you delete the issue at stackoverflow. We should be able solve your issue here.

---

<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:** [October 1, 2019, 12:50pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/11 "2019-10-01T12:50:41Z")

</div>

Um, I’ve overlooked this at first sight: You have imported `three.js` the wrong way. It should be:

```auto
import * as THREE from './../node_modules/three/build/three.module.js';

```

Otherwise you load `three.js` twice since the JSM module use `three.module.js`. May I ask: Where have you seen the other import style?

BTW: It’s not necessary to add the camera to the scene. So `scene.add( perspectiveCamera );` can be removed.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 12:57pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/12 "2019-10-01T12:57:19Z")

</div>

I think that was VSCode auto-importing it when I used the three keyword for the first time. Either that or I just messed up at the start, which is more likely.  
Changing that import seems to have resolved the mesh not loading in correctly.

I removed the line where I added the camera to the scene as well. Now I’ll have to spend a lot of time trying to get a good render. I was planning to make a geometry shader for the grass to make it look nice. But I forgot this is not HLSL but GLSL. The grass looks pretty bad (but that has nothing to do with my problems, I just kinda suck at lighting and materials xD)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [October 1, 2019, 1:12pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/13 "2019-10-01T13:12:32Z")

</div>

> [@Torben\_Van\_Assche](#):
>
> I think that was VSCode auto-importing it when I used the three keyword for the first time

VSCode auto importing seems to make a lot of mistakes. Personally I disabled it.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [October 1, 2019, 1:14pm UTC](https://discourse.threejs.org/t/loading-multiple-fbx-in-three-js-does-not-work/9979/14 "2019-10-01T13:14:18Z")

</div>

I am honestly a little surprised it only happened at this point, it didnt complain up to now. I find that a little odd.