three.js: how to control rendering order

Question

Am using three.js

How can I control the rendering order? Let's say I have three plane geometries, and want to render them in a specific order regardless of their spatial position.

thanks

Answer 1

You can set

renderer.sortObjects = false;

and the objects will be rendered in the order they were added to the scene.

Alternatively, you can leave sortObjects as true, the default, and specify for each object a value for object.renderOrder.

For more detail, see Transparent objects in Threejs

Another thing you can do is use the approach described here: How to change the zOrder of object with Threejs?

three.js r.71

Answer 2

for threejs r70 and higher is renderDepth removed.