Render objects on top using renderDepth with Three.js

I’m trying to render objects on top of other objects.

In the fiddle, get the green torus knots to render on top of the red boxes and floor.

I’ve been trying mesh.renderDepth = 0, 1, 1000 and changes nothing.

The material has been created like so:

  material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true, opacity: 0.5 } );

How can I achieve this using renderDepth? Am I missing any other setting?

Using depthTest to true works but is not acceptable because concave meshes (like the torus) suffer from overlapping polygons, especially when opaque.

And while I haven’t managed to get this other solution with two scenes running, it strikes me as having more overhead and perhaps less flexible than just using renderDepth

Fully working JSFiddle: http://jsfiddle.net/QHssJ/

Thanks for the help

Answer

This post is a little old, but for those stumbling upon this, be sure that objects with a custom renderDepth have their material with depthWrite set to false:

 material.depthWrite = false

Here is an update to the posted fiddle: http://jsfiddle.net/QHssJ/20/