如何使用 Threejs 更改对象的 zOrder? [英] How to change the zOrder of object with Threejs?

问题描述

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

I made a scene using the webgl renderer where I put multiple 3D objects that I can select and move. However when an object is selected, I'd like to draw its axes. No problem with drawing the lines to the center of the object but I'd like them to appear in front of anything else on the scene so that they are visible even if other objects are in front - Like in Blender.

我尝试使用 renderDepth 参数，但我认为我不明白如何使用它，而且我没有得到任何结果.

I tried to play with the renderDepth param but I don't think I understood how to use it and I didn't get any result.

感谢您的帮助.

推荐答案

如果您希望某些对象在顶部"或在前面"渲染，一个技巧是创建两个场景——第一个场景是您的常规场景场景，第二个场景包含您想要放置在顶部的对象.

If you want some objects to render "on top", or "in front", one trick is to create two scenes -- the first scene is your regular scene, and the second scene contains the objects that you want to have on top.

首先设置

renderer.autoClear = false;

然后创建两个场景

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

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

Add your objects to the first scene as usual, and add the objects your want to have on top to the second scene.

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

Then, in your render() function, do this:

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

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

This will render the first scene, clear the depth buffer, and then render the second scene on top.

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

另一种解决方案是只有一个场景，但使用此模式:

Another solution is to have just one scene, but use this pattern:

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

如果网格只有单一材质，它将在顶部"渲染.

If the mesh has a single material, it will render "on top".

three.js r.85

three.js r.85

这篇关于如何使用 Threejs 更改对象的 zOrder?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！