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/

但是，如果您使用箭头键来回走动，您会时不时地看到交叉路口闪烁，有时会平缓地保持平整，以保持可见状态（尤其是气泡从侧面进入）

我尝试在两种材质上设置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

它绘制最低的第一，最高的最后。