如何用Threejs更改对象的zOrder?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (332)

我使用WebGL渲染器制作了一个场景,在这里我可以选择和移动多个3D对象。然而,当对象被选中时,我想画它的轴。画线到物体的中心没有问题,但我希望它们出现在场景中的任何其他物体的前面,这样即使其他物体在搅拌机的前面,它们也是可见的。

我试着使用RendderDepth Param,但我想我不知道如何使用它,也没有得到任何结果。

提问于
用户回答回答于

如果你想要一些物体呈现“在上面”,或者“在前面”,一个技巧是创建两个场景--第一个场景是你的常规场景,第二个场景包含你想要在上面的对象。

第一套

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

扫码关注云+社区

领取腾讯云代金券