如何在不设置 z 坐标的情况下给 Three.js 个对象一个 z-index？

Question

我正在使用 Three.js 来渲染多个按层排列的 2D 对象 (THREE.PlaneGeometry)。所有这些都应该在同一个平面上对齐，但有些对象 "in front of" 或 "blocking the view of" 其他对象。换句话说，我想模拟 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) 您可以使用正交相机并将 2D canvas 渲染到 3D 对象的纹理：

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

3) 结合renderOrder和渲染到纹理：

http://jsfiddle.net/mne9hgf8/

Answer 3

可以设置mesh的renderOrder，但是material.depthTest应该先false。

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