如何给Three.js对象一个z-index，而不设置其z坐标？

Question

我正在使用Three.js渲染一些2D对象(THREE.PlaneGeometry)按层排列。所有的对象都应该在同一个平面上对齐，但有些对象 "在 "其他对象的前面或 "挡住 "其他对象的视线。换句话说，我想模拟CSS中的 z-index 属性，但不实际使用 z-维度，因为这样会造成透视问题。

Three.js有这方面的功能吗？

Answer 1

你需要使用多边形偏移 (http:/threejs.orgdocsapimaterialsMaterial.html。)

Answer 2

1) 您可以使用 object.renderOrder:

http:/jsfiddle.netadt1d5b7

2) 您可以使用光栅相机，将2D画布渲染成3D对象的纹理。

http:/threejs.orgexampleswebgl_rtt.html。

3）结合renderOrder和渲染到纹理。

http:/jsfiddle.netmne9hgf8

Answer 3

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

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