如何在不设置 z 坐标的情况下为 Three.js 对象提供 z 索引？答案

【问题标题】：How to give Three.js objects a z-index without setting their z-coordinate?如何在不设置 z 坐标的情况下为 Three.js 对象提供 z 索引？
【发布时间】：2023-03-15 23:40:01
【问题描述】：

我正在使用 Three.js 渲染多个分层排列的 2D 对象 (THREE.PlaneGeometry)。它们都应该在同一个平面上对齐，但有些物体“在前面”或“挡住”其他物体的视线。换句话说，我想模拟 CSS z-index 属性，但不实际使用 z-dimension，因为这会导致透视问题。

Three.js 有这方面的功能吗？

【问题讨论】：

如果您设置 z 维度，然后使用正交相机？
@Ale_32：这会是一个解决方案，但还有其他原因我需要透视相机。用户将能够在 3D 空间中四处移动，并且 2D 画布应该看起来像一幅平面画。

标签： javascript three.js 2d z-index

【解决方案1】：

你需要使用polygonOffset (http://threejs.org/docs/api/materials/Material.html)

【讨论】：

您能告诉我如何使用该属性来实现我的目标吗？从文档中不清楚。（更好的是，也许你可以创建一个 jsFiddle，基于 stdob-'s fiddle in his answer。）
更新：我想我想通了 (jsFiddle)，它似乎有效！如果您详细说明您的答案，我会接受。谢谢！
您的样本是正确的。您需要使用负值将对象拉近视图。在我的项目中，我对 polygonOffsetFactor 和 polygonOffsetUnit 属性都使用了负值。尝试查找 opengl 资源以了解有关此技术的更多信息。

【解决方案2】：

1) 你可以使用object.renderOrder:

http://jsfiddle.net/adt1d5b7/

2) 您可以使用正交相机并将 2D 画布渲染到 3D 对象的纹理：

http://threejs.org/examples/webgl_rtt.html

3）结合renderOrder和渲染到纹理：

http://jsfiddle.net/mne9hgf8/

【讨论】：

小提琴不错。但如果我稍微旋转一下相机，它实际上不起作用。我实际上会看到所有三个正方形的“混合”，而不是一个很好地在另一个前面。但是renderOrder 的解决方案如果能奏效就完美了。
是的，这就是为什么我提到了第二个选项，可以组合：渲染到纹理。
我明白了。老实说，这是相当先进的，对于我试图解决的问题来说似乎有点矫枉过正。感觉将来可能会引起混乱。（不过，如果没有其他解决方案，我可能会考虑。）

【解决方案3】：

你可以设置mesh的renderOrder，但是material.depthTest首先应该是false。

    body.material.depthTest = false;
    body.renderOrder = 1;

【讨论】：