透明纹理在three.js中相互干扰

Question

我创造了一个简单的人物形象。睫毛使用具有透明度的纹理。 但是，只要我打开面部纹理的透明度，就会创建不应该存在的透明度。 您可以在眼睫毛下方的部位查看面部纹理。

通过使用以下行切换面部透明度来查看效果：

mesh.material.materials[3].transparent = false
mesh.material.materials[3].transparent = true

我希望为面部纹理启用透明度，那么我该如何解决这个问题呢？

演示： http://dev.udart.dk/transparencyProblemStackOverflow/ （等待模型加载）

代码： https://github.com/vibber/transparencyProblemStackOverflow/blob/gh-pages/index.html

Answer 1

透明几何体会手动深度排序，有关详细信息，请参阅Toji的这个规范答案：Transparent textures behaviour in WebGL。

如果您希望此方案正常工作，则必须拆分模型，并将睫毛渲染为单独的（子）网格。这样，three.js可以使用普通的z-buffer方法渲染脸部的其余部分，然后分别应用睫毛（来自深度排序的transaprent对象队列）。