using renderOrder in three.js

Question

I want to have two overlapping objects in a scene but I want to define which object should be drawn first. I have a sample of the code here: http://jsfiddle.net/sg02e5sm/1/

I'm using renderOrder = 1 for the second object to make it appear always on top of the first object (as long as they have the same Z value), but it's not working.

Answer 1

renderOrder does not make something appear "on top". It controls the order in which objects are rendered.

If you want your 2nd plane to be "on top", you can add

mesh.material.depthTest = false;

for the 2nd plane, for example.

fiddle: http://jsfiddle.net/sg02e5sm/2/

Alternatively, you can implement two render passes, as described in this SO answer.

three.js r.71