三个复杂形状的透明度

Question

我尝试使用Three.js渲染一个相当复杂的灯：https://sayduck.com/3d/xhcn

产品分为多个网格，与此类似：

主要问题是我还需要使用透明的PNG纹理（为了在保持多边形数量较低的情况下实现复杂的形状），如下所示：

从现场演示中可以看出，这给出了非常奇怪的结果，特别是在灯周围旋转相机时 - 我相信由于网格的z排序。

我一直在阅读关于SO的类似问题的答案，例如https://stackoverflow.com/a/15995475/5974754或https://stackoverflow.com/a/37651610/5974754，以便了解如何在Three.js和WebGL中处理透明度的基本机制。< / p>

我认为从理论上讲，我需要做的是，每个帧，为每个网格明确定义一个renderOrder的透明纹理（因为基于相机距离的顺序在移动时会发生变化），所以Three.js知道哪个像素当前最接近相机。

然而，即使忽略了每一帧明确设置顺序的那一刻似乎也很琐碎，我不确定我理解如何在理论上设置这个顺序。 我的网格具有相当复杂的形状并且相互交织，这意味着从给定的摄像机角度来看，网格A的某些部分可以比网格B的某些部分更靠近摄像机，而在其他地方，网格B的一部分更接近。 在这种情况下，似乎无法定义更接近的网格，因此也不可能定义适当的renderOrder。

我是否理解正确，这基本上达到了WebGL可以处理的极限？

否则，如果这是可行的，那么是否有两个渲染场景（一个用于不透明网格，一个用于透明网格排序到前面）是正确的一个？我应该如何按照Three.js的预期方式来定义前面的renderOrder？

非常感谢你的帮助！