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?

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?

• javascript
• three.js
• 2d
• z-index

• 1 if you set z-dimension and then use a ortographic camera? – Ale_32 Commented Sep 16, 2015 at 12:43
• 1 @Ale_32: This would be a solution, but there are other reasons I need a perspective camera. The user will be able to move around in the 3D space, and the 2D canvas should look like a flat painting. – mhelvens Commented Sep 16, 2015 at 13:19

3 Answers 3

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

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

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/

You need to use polygonOffset (http://threejs.org/docs/api/materials/Material.html)