How to change the zOrder of object with Threejs?

by

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

Leave a Comment

tech