如何用Threejs更改对象的zOrder？

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 );

这将渲染第一个场景,清除深度缓冲区,然后渲染第二个场景.

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

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

如果网格物体具有单一材质,则它将呈现"在顶部".

three.js r.85