透明纹理在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 方法渲染面部的其余部分，然后分别应用睫毛（来自深度排序的透明对象队列）。