FBX textures black (maybe a transparency issue?)

Questions
,
1

14%20AM

https://fuzzywobble.com/projects/webgl/fbx_loader/index.html
^ demo

Textures were originally tga format which does not seem great for the web so were converted to png. Seems it should be transparent at some spots but is instead, black. Any ideas what I could try to fix this?

2

Um, your FBX file seems to have some problems:

image

Two PNG textures were not found. And the loader still tries to load a TGA texture.

BTW: The screenshot is from Chrome Dev Tools.

3

Oh wow yes that TGA must be the issue.

Let me switch that over to PNG and see if it fixes it.

THANKS!

4

Just to be clear, three.js has a TGALoader which is internally used in loaders like FBXLoader or ColladaLoader. You just have to include it in your project and then you can load assets which refer to TGA textures.

In any event, converting TGA to PNG makes sense since you have much smaller files. TGA files are usually uncompressed whereas PNG files are lossless compressed. So there is no difference in quality.

5

good to know!

probably going to do everything possible to avoid TGA given the file sizes…

6

ok switched everything over to PNG. no missing files. sadly, same issue =U

https://fuzzywobble.com/projects/webgl/fbx_loader/index.html

I have this warning: “THREE.FBXLoader: ShininessExponent map is not supported in three.js, skipping texture.”

7

Um, loading and rendering the model at sketchfab produces a better result. Although the black parts around her arms look strange…

image

You should check the uv-coordinates in a tool like Blender in order to ensure the textures actually cover the problematic black parts.

8

Sadly my blender skills are even weaker than my threejs skills : [_]

I did however switch to glTF by uploading to Sketchfab, then downloading the glTF, then loaded into threejs.

https://fuzzywobble.com/projects/webgl/gltf_loader/index.html

^ demo

Is this a reasonable workaround? Sketchfab actually has a really nice GUI for model settings.

9

glTF is the recommended format of three.js (see link) so it’s good if you are going to use it in your apps.

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

In any event, using glTF does not solve modeling failures. In such a case, a correction of geometric data is the best way to fix visual glitches.

10

@Mugen87 Do you know any rock-solid converters from DAE/FBX/OBJ to glTF that exist?

11

I only know the converters mentioned in the guide from my previous post. Another workflow which works quite well for me is to upload stuff to Sketchfab and download it as glTF :innocent:.

1 Like