使用Three.js渲染多边形头发时混合工件

Question

尝试使用透明度渲染多边形头发我得到了这个神器：

到目前为止我检查了什么：

1. renderer.sortObjects是真的。
2. 头发的material.side是THREE.DoubleSide。
3. 设置material.alphaTest=0.5 - 减少了问题，但仍然可以看到一些工件。

如何调试？

Answer 1

解决问题的原因是头发两次，首先是背面，然后是正面：

    var hairMesh1 = obj;
    var hairMaterial1 = hairMesh1.material;
    hairMaterial1.opacity = 1.0;
    hairMaterial1.transparent = true;
    hairMaterial1.side = THREE.BackSide;
    hairMaterial1.depthWrite = false;

    var hairMesh2 = hairMesh1.clone();
    var hairMaterial2 = hairMesh2.material = hairMesh2.material.clone();
    hairMaterial2.side = THREE.FrontSide;

    var hairObj2 = new THREE.Object3D();
    hairObj2.add(hairMesh2)
    hairObj2.renderOrder = 1;

    model.add(hairObj1);
    model.add(hairObj2);

this answer中解释了这一点。

我尝试的另一件事就像here - 我设置了

material.alphaTest = 0.5; // between 0 and 1

减少了问题（仍然看到明显的文物）。可以找到解释here。