Loading multiple FBX in three.js does not work

Questions
1

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-workCamargue_aluminium.FBX (26.8 KB) Camargue_wood.FBX (28.0 KB)

2

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.

3

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

4

Looking good:

image
image.png2542×1230 237 KB

I’ve just replaced the loading code in webgl_loader_fbx with this:

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 );

} );
5

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.

6

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

7

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.

8

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

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.

9

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.

10

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

11

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

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.

12

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)

1 Like
13

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

14

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