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

Posted 2023-02-27

【中文标题】三.js：如何控制渲染顺序

【英文标题】：three.js: how to control rendering order

【发布时间】：2013-03-09 00:00:05

【问题描述】：

我正在使用三个.js

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

谢谢

【参考方案1】：

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

【参考方案2】：

你可以设置

renderer.sortObjects = false;

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

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

更多详情请见Transparent objects in Threejs

您可以做的另一件事是使用此处描述的方法：How to change the zOrder of object with Threejs?

three.js r.71

【讨论】：

谢谢你，我用你的 renderDepth 建议做了一些实验，它奏效了！

【参考方案3】：

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

【讨论】：

解决方法是什么？我不喜欢有多个重叠的场景。

【参考方案4】：

在我的情况下使用 object.renderDepth 有效。我有一个玻璃盒，里面有透明的气泡。气泡在某些角度消失了。

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

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

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