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:
and the same character in three.js here:
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.