javascript - three.js - 绘制两个重叠的透明球体并隐藏交叉点

Question

我在 webgl 上下文中有两个透明、重叠的球体。在重叠期间，我想控制球体的绘制方式。你可以在这个页面看到我的问题:

http://andrewray.me/stuff/circle-clip.html

当红色和蓝色球体重叠时，我希望蓝色球体隐藏在红色球体后面。

如果我简单地更改球体添加到场景中的顺序(如果我先添加大球体)，我会得到所需的行为: http://andrewray.me/stuff/circle-clip-correct.html

但是，在我的项目中情况有所不同。即使我先添加大球体，我也看到了交叉点。

我最接近的是将较小的球体移近相机。 在此示例中，我将较小的球体移近了 10 个单位:http://andrewray.me/stuff/b-test/

但是，如果您使用箭头键四处移动，您会看到十字路口时不时地闪烁，有时会平缓地粗鲁地保持可见(尤其是气泡从侧面进入时)

我已经尝试在两种 Material 上设置 depwthWrite: false 但这没有任何效果。

我在 renderer.sortObjects = false 上搞砸了一点，但我认为这会删除我希望在场景的其余部分出现的“自然”绘制顺序。我对这些领域有异议。

1. 我可以在 webgl/three.js 中强制透明对象的绘制顺序吗？即使将较小的球体移近 10 个单位，它们似乎也在进行 z 轴战斗
2. 或者有什么方法可以强制重叠透明对象的行为？

Answer 1

经过大量的头部撞击(不是很好的撞击)，我发现您可以通过网格上的标志强制绘制顺序。

对于三个r70 及以上 使用renderOrder

mesh.renderOrder = 0.5; // Value from 0 to 1

对于三个 r69 及以下 使用 renderDepth

mesh.renderDepth = 0.5; // Value from 0 to 1

它先绘制最低的，最后绘制最高的。