FBXLoader Texture / Transparency Process

Questions
,
1

I want to load a FBX character out of Blender into three.js. It has some transparency on its hair. As in the image below, the hair is in parts showing right, in parts not. Some haitips,the part that should be transparent and show the hair underneath, is showing the head. But some hairtips seam to work correctly.!
What is this? Is this because of the renderprocess or the texture itself?
In the Web-Console I have this info/warning:
THREE.FBXLoader: TransparencyFactor map is not supported in three.js, skipping texture.
TransparencyFactor map?
How can I make the hairstrains all look the same and correct?
Thanks for the help.

Transparency%20Hair

2

It seems your link does not work. Can you please have a look?

3

Thanks… It should work yet.

4

Have a look at these two issues on Github:

A possible workaround is to use this:

object.traverse( ( child ) => {
  if ( child .isMesh) {
    child .material.transparent = false;
    child .material.alphaTest = 0.5;
  }
});

However, it is at best a partial workaround and doesn’t give great results for hair.
Can you also try loading your model in Sketchfab and see what the results look like there?

Regarding this warning:

THREE.FBXLoader: TransparencyFactor map is not supported in three.js, skipping texture

There are a number of texture map types in FBX that cannot be supported by three.js. The transparency map should go into the alpha / opacity / transparency color map slot, not the transparency level slot. I’m not sure what this is called in blender.

If there is only one such slot in Blender it’s possible that the blender exporter is outputting the transparency map in the wrong place (there are a number of such bugs in that exporter). Can you share your model and I’ll take a look?

5

Thanks for the answers.

Here is the model and the texture…
I deleated the model here, because it should not be in here all the time…

For the material I use the line:
var material = new THREE.MeshPhongMaterial({ skinning: true, shininess: 15, opacity: 1.0, morphTargets: true, map: texture, transparent: false, depthWrite: true, depthTest: true, alphaTest: 0.5 });

I played around with all the parameters but nothing changes.