How to change the zOrder of object with Threejs?

Question

I made a scene using the webgl renderer where I put multiple 3D objects that I can select and move. However when an object is selected, I'd like to draw its axes. No problem with drawing the lines to the center of the object but I'd like them to appear in front of anything else on the scene so that they are visible even if other objects are in front - Like in Blender.

I tried to play with the renderDepth param but I don't think I understood how to use it and I didn't get any result.

Thank you for your help.

WestLangley WestLangley · Accepted Answer · 2012-10-01T02:39:40

If you want some objects to render "on top", or "in front", one trick is to create two scenes -- the first scene is your regular scene, and the second scene contains the objects that you want to have on top.

First, set

renderer.autoClear = false;

Then create two scenes

var scene = new THREE.Scene();
var scene2 = new THREE.Scene();

Add your objects to the first scene as usual, and add the objects your want to have on top to the second scene.

Then, in your render() function, do this:

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );

This will render the first scene, clear the depth buffer, and then render the second scene on top.

Here is a Fiddle: http://jsfiddle.net/d9Lzdkkr/

EDIT: Another solution is to have just one scene, but use this pattern:

mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer ) { renderer.clearDepth(); };

If the mesh has a single material, it will render "on top".

three.js r.85

How to change the zOrder of object with Threejs?

1 Answers