GLTFExporter exporting invalid glTF from FBX

Questions
1

When trying to export this FBX but the glTF file is not valid - doesn’t work on three-js with fbx-loader, on windows 3D viewer or on blender.

This is the exported glTF.

Looks like there’s an images node with an image that doesn’t have a uri:

"images": [ { "mimeType": "image/png" } ]

But removing that node is causing other issue.

Please advise.

2

When importing the FBX into Blender and exporting to glTF, I see this necklace in gltf-viewer.

image

The only problem is that Blender does not handle the displacement map when importing. However, displacement maps are not support by glTF yet so it’s not that bad^^.

2 Likes
3

Thank you @Mugen87

I’m using three-js’s GLTFExporter exporter, not blender’s exporter.

Forgive me if that wasn’t clear.

4

So you import the FBX via FBXLoader and then export to glTF via GLTFExporter, right?

5

That’s right

6

Okay, I can reproduce a wrong behavior. When loading the FBX file with FBXLoader, rendering is fine (although the displacement map is ignored). But when exporting to glTF and validating the glb in a viewer, it looks like so:

image

As you can see, only parts of the pearls are rendered.

1 Like
7

You’ll generally have better results using this tool to convert FBX to glTF, rather than the GLTFExporter:

1 Like
8

Thanks @looeee
We are using it on the server side but on some cases we need to export the scene directly from the browser.

@Mugen87 for me R101's GLTFExporter is throwing an exception about an unexciting image in line 710:
canvas.width = image.width;
“Cannot read property ‘width’ of undefined”

How did you manage to export a valid GLB file?

BTW, would you consider the FBXLoader displacement map issue a bug?

9

I have exported the loaded FBX after it was fully loaded (with textures). Just created an instance of the GLTFExporter and called the respective parse() method similar to the official example.

Looking at the code of FBXLoader, it seems that it supports displacement maps.

So I guess it’s worth to investigate why the map is not respected.

1 Like
10

It seems like I was indeed calling parse() too soon.

Is there a way to detect if all of the textures has been loaded? GLTFLoader for example does not execute the onload callback until all of scene dependencies has been loaded.

11

You can use THREE.LoadingManager for this. The corresponding onLoad() callback fires when all (internal) loaders have finished their work. Just pass in the manager to the loader like so:

const manager = new THREE.LoadingManager();
const loader = new THREE.FBXLoader( manager );
1 Like
12

I added support for displacement maps to thed FBXLoader a while back, but only did very minimal testing as I didn’t have many models to test with.

If you want to open a bug report over Github we can track it there.

3 Likes
13

Done

I appreciate your help.

2 Likes