Three.js - Geometry on top of another

Question

Is it posible in Three.js to have a mesh always rendered on top of the scene, even if it's position is behind all objects? I'm implementing a lasso selection with a mesh and I need to render the selecting box on top of the rest of the scene.

Answer 1

Yes.

First do this:

renderer.autoClear = false;

Then create a second scene that contains just the objects you want to be on top. Then, in your render loop:

renderer.clear();                     // clear buffers
renderer.render( scene, camera );     // render scene 1
renderer.clearDepth();                // clear depth buffer
renderer.render( scene2, camera );    // render scene 2

---

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".

Answer 2

On top of setting object.renderOrder you have to set material.depthTest to false on the relevant objects.

var spriteMaterial = new THREE.SpriteMaterial( { map: texture1, depthTest: false} );

    this.context1 = context1;
    this.texture1 = texture1;

    var sprite1 = new THREE.Sprite( spriteMaterial );
    sprite1.scale.set(30,15,1);
    sprite1.center.x=0;
    sprite1.center.y=0;
    sprite1.position.set( 0, 0, 0 );
    this.scene.add( sprite1 );

Answer 3

If you want render only one mesh on front you can also manage by setting depthTest for the material of that object to false:

var onTopMaterial = new THREE.MeshStandardMaterial({
  color: 'red',
  depthTest: false
});

mesh.material = onTopMaterial;

Check a demonstation in this fiddle

---

Note: Make sure you have renderer.sortObjects set to the default true value.