Search code examples
javascriptthree.js2dz-index

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


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?


Solution

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