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.

Answer 3

Using object.renderDepth worked in my case. I had a glass case and bubbles inside that were transparent. The bubbles were getting lost at certain angles.

So, setting their renderDepth to a high number and playing with other elements depths in the scene fixed the issue. Hooking up a dat.gui control to the renderDepth property made it very easy to tweak what needed to be at what depth to make the scene work.

So, in my fishScene, I have gravel, tank and bubbles. I hooked up the gravel mesh with a dat.gui control and with in a few seconds, I had the depth I needed.

this.gui.add(this.fishScene.gravel, "renderDepth", 0, 200);

Answer 4

i had a bunch of objects which was cloned from a for loop in random position x and y... and obj.z ++, so they would line up in line.. including obj.renderOrder ++; in the loop solved my issue.