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

它是最低的，最后的最高。