THREE.js FBXLoader treats .png as if it is a .psd, and doesn't load the material

Question

When using the THREE.js FBXLoader to load a .fbx file, it is loading the model partially, with the alpha textured parts of the model not being loaded.

I am getting the error:

FBXLoader: PSD textures are not supported, creating empty placeholder texture for pinebranchColor.psd

Despite there being no .psd files in the materials folder. As you can see from the below screenshot, it seems to think that in the material alphaMap, the texture name is pinebranchColor.psd.

This is what the FBX model is being rendered as:

And this is what it renders as if I load the GLTF version (note: the transparent parts for the leaves are not picked up as transparent) - which is closer to how it should look, but not fully.

This is how the model is supposed to look, according to sketchfab :

Why do you think it says the alpha material is a .psd? Could this be as referenced in the .fbx file itself? The original problem was how do I get the alpha/transparency for the leaves to render correctly, rather than as block colour. Maybe I could set a property in the THREE.js material of the GLTF version and that would work?

This is the first model I have ever imported into THREE.js as I have just started learning, so please explain as best you can.

EDIT: In dev tools I found a material for the leaves, and set transparent to true. This worked! To an extent. But there are still some rendering issues. So I think this is the route to go down.

George George · Accepted Answer · 2019-05-27T22:41:25

I'm not sure why the FBX alpha material could not be loaded, but I solved the transparency problem with the GLTF version by using the THREE.js scene.traverse function, and setting the material transparent property to true, for all leaf materials in the scene.

This solved the core issue, but there were still some artifacts as seen in this picture, where leaves behind are blacked out:

The solution was to also set alphaTest to 0.5 on the material, giving this result:

Here is the code:

gltf.scene.traverse(child => {
  if (child.isMesh && child.name.includes('leaf')) {
    child.material.alphaTest = 0.5;
    child.material.transparent = true;
  }
});

THREE.js FBXLoader treats .png as if it is a .psd, and doesn't load the material

1 Answers