three.js：如何控制渲染顺序

Question

使用three.js

如何控制渲染顺序？假设我有三个平面几何，并且想要以特定的顺序渲染它们，而不管它们的空间位置如何。

感谢

Answer 1

您可以设置

renderer.sortObjects = false;

并且对象将按照它们添加到场景中的顺序进行渲染。

或者，您可以将sortObjects保留为默认值true，并为每个对象指定object.renderOrder的值。

有关详细信息，请参阅Transparent objects in Threejs

您可以使用此处描述的方法：How to change the zOrder of object with Threejs?

three.js r.71

Answer 2

对于threejs r70及更高版本，删除了renderDepth。

Answer 3

在我的案例中使用object.renderDepth。我有一个玻璃盒，里面的气泡是透明的。气泡在某些角度消失了。

因此，将renderDepth设置为较大的数字并在场景中使用其他元素深度修复了问题。将dat.gui控件连接到renderDepth属性使得很容易调整所需的深度以使场景工作。

所以，在我的fishScene中，我有砾石，坦克和泡泡。我用一个dat.gui控件连接了砾石网格，几秒钟后，我就得到了我需要的深度。

this.gui.add(this.fishScene.gravel, "renderDepth", 0, 200);

Answer 4

我有一堆对象，这些对象是从随机位置x和y ...和obj.z ++中的for循环克隆的，所以它们会排成一行..包括obj.renderOrder ++;在循环中解决了我的问题。