如何在不设置z坐标的情况下为Three.js对象提供z-index？

Question

我正在使用Three.js渲染分层排列的多个2D对象（THREE.PlaneGeometry）。所有这些都应该在同一个平面上对齐，但是有些物体“在前面”或“阻挡”其他物体的视图。换句话说，我想模拟CSS z-index属性，但没有实际使用z - 维度，因为这会导致透视问题。

Three.js是否有此功能？

Answer 1

您需要使用polygonOffset（http://threejs.org/docs/api/materials/Material.html）

Answer 2

1）您可以使用object.renderOrder：

http://jsfiddle.net/adt1d5b7/

2）您可以使用ortographic相机并将2D画布渲染为3D对象的纹理：

http://threejs.org/examples/webgl_rtt.html

3）将renderOrder和渲染结合到纹理：

http://jsfiddle.net/mne9hgf8/

Answer 3

您可以设置网格的renderOrder，但是material.depthTest应该首先是false。

    body.material.depthTest = false;
    body.renderOrder = 1;