How to give Three.js objects a z-index without setting their z-coordinate?

Question

I'm using Three.js to render a number of 2D objects (THREE.PlaneGeometry) arranged in layers. All of them should be aligned on the same flat plane, but with some objects "in front of" or "blocking the view of" others. In other words, I want to simulate the CSS z-index property, but without actually using the z-dimension, because that would cause perspective issues.

Does Three.js have a facility for this?

Answer 1

You can set the renderOrder of mesh, but material.depthTest should be false firstly.

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

Answer 2

1) You can use object.renderOrder:

http://jsfiddle.net/adt1d5b7/

2) You can use ortographic camera and render 2D canvas to texture of 3D object:

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

3) Combine renderOrder and rendering to texture:

http://jsfiddle.net/mne9hgf8/