如何用Three Js改变对象的顺序？

Question

我使用webgl渲染器创建了一个场景，我放置了多个可以选择和移动的3D对象。但是当选择一个对象时，我想绘制它的轴。将线条绘制到对象的中心没有问题，但是我希望它们出现在场景中的任何其他内容之前，即使其他对象在前面也可以看到它们 - 就像在Blender中一样。

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

感谢您的帮助。

Answer 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