如何使用 Threejs 更改对象的 zOrder？

Posted 2023-02-27

【中文标题】如何使用 Threejs 更改对象的 zOrder？

【英文标题】：How to change the zOrder of object with Threejs?

【发布时间】：2012-09-21 21:45:15

【问题描述】：

我使用 webgl 渲染器制作了一个场景，其中放置了多个可以选择和移动的 3D 对象。 However when an object is selected, I'd like to draw its axes.将线条绘制到对象的中心没有问题，但我希望它们出现在场景中其他任何东西的前面，这样即使其他对象在前面，它们也是可见的 - 就像在 Blender 中一样。

我尝试使用 renderDepth 参数，但我认为我不了解如何使用它，也没有得到任何结果。

感谢您的帮助。

【参考方案1】：

如果您希望某些对象“在顶部”或“前面”渲染，一个技巧是创建两个场景 - 第一个场景是您的常规场景，第二个场景包含您想要拥有的对象在上面。

首先，设置

renderer.autoClear = false;

然后创建两个场景

var scene = new THREE.Scene();
var scene2 = new THREE.Scene();

像往常一样将您的对象添加到第一个场景中，然后将您想要的对象添加到第二个场景中。

然后，在您的 render() 函数中，执行以下操作：

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );

这将渲染第一个场景，清除深度缓冲区，然后在顶部渲染第二个场景。

这是一个小提琴：http://jsfiddle.net/d9Lzdkkr/

---

编辑：另一种解决方案是只有一个场景，但使用这种模式：

mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer )  renderer.clearDepth(); ;

如果网格有单一材质，它将渲染“在顶部”。

three.js r.85

【讨论】：

非常感谢您的回答和示例。它完全回答了我的问题。干杯。

我也很想感谢WestLangley，这个问题困扰了我很久。

如果渲染器设置了清晰的颜色，这是否有效？当我尝试这个时，只出现第二个场景，大概是因为第二次调用渲染函数时它正在清除。

@Justin 对我有用。如果您需要帮助，请发新帖。

@WestLangley 看起来我忘记了 renderer.autoClear = false 部分。我让它工作了。谢谢。