Unable to get FBX hair to render properly

Questions
#1

I am exporting characters from iClone in FBX format but there seems to be some kind of transparency problem with the display of the hair in three.js. It appears that certain locks within the hair elements are fully transparent making the overall look patchy. I have tried every possible combination of in my child traverse setting material transparency, side (DoubleSide), alphaTest, and opacity without success. Everything else about the characters renders fine.

The problem doesn’t appear when viewing the FBX characters in the Autodesk FBX Viewer (albeit of low quality) which makes me think it is something I’m missing in three.js. Example of one in the Autodesk viewer here:
image
and the same character in three.js here:
image

Here’s the traverse code:
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = false;
child.receiveShadow = false;
child.frustumCulled = false;
child.material.transparent = false;
child.material.side = THREE.DoubleSide;
child.material.alphaTest = .04;
child.material.opacity = 1;
}}
I am setting alpha and antialias true for the renderer, but otherwise it is mostly a textbook implementation.

#2

Hey, figured it out after sleeping on it. Turned out to be a depth setting.

#3

Another thing, your alphaTest value is way too low, a value of 0.5 would probably work for your needs. I would suggest something closer to 0.9 even.

1 Like
#4

Can I ask what or where the depth setting is please. Is it a iclone setting or a setting in the three FBXLoader, I am currently using .MeshBasicMaterial but see the same hair issues.