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，但这没有任何效果。

我对@9​​87654325@ 有点搞砸了，但我认为这消除了我希望在场景的其余部分中出现的“自然”绘制顺序。正是这些领域我有问题。

1. 我可以在 webgl/three.js 中强制透明对象的绘制顺序吗？即使将较小的球体移近 10 个单位，它们也似乎在进行 z-fighting
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

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