33

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.

3 Answers 3

88

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

three.js r.142

14
  • 3
    Thank you very much for your answer and your example. It answers exactly to my question. Cheers.
    – Scrubs
    Oct 1, 2012 at 3:22
  • I really want to thank WestLangley too, This problem troubled me for a long time.
    – jasonjifly
    Dec 20, 2012 at 6:28
  • Does this work if the renderer has a clear color set? When I try this, only the second scene appears, presumably because it's clearing when the render function is called a second time.
    – Justin
    Nov 14, 2014 at 22:39
  • @Justin It does for me. Please make a new post if you need help. Nov 15, 2014 at 3:30
  • @WestLangley Looks like I forgot the renderer.autoClear = false part. I got it working. Thanks.
    – Justin
    Nov 15, 2014 at 15:37
0

According to the answer mentioned here, you can use:

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

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

0

for anyone reading 11 years later..

faster/hackier way to do it..

renderer.render(scene1,camera);    //This renders as normal
renderer.autoClearColor = false;
renderer.render(scene2,camera);    //Now only clears depthBuffer
renderer.autoClearColor = true;    //Resets autoClear to true

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.