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

它排名第一,最高.