I'm trying to implement a command arrow that follows the mouse on the screen, but sometimes it ends up hidden behind another object. Is there any way to tweak the z-buffer or something to always render the arrow on top. I would prefer not to create a second scene on top (as seen in the solution here: Three.js - Geometry on top of another. Thanks.

I'm trying to implement a command arrow that follows the mouse on the screen, but sometimes it ends up hidden behind another object. Is there any way to tweak the z-buffer or something to always render the arrow on top. I would prefer not to create a second scene on top (as seen in the solution here: Three.js - Geometry on top of another. Thanks.

• javascript
• three.js
• render

3 Answers 3

I used

  mesh.renderOrder = zindex || 999;
  mesh.material.depthTest = false;
  mesh.material.depthWrite = false;
  mesh.onBeforeRender = function (renderer) { renderer.clearDepth(); };

This working for me

mesh.renderOrder = zindex || 999
mesh.material.depthTest = false 
// UPDATED If you using some models with transparent materials
mesh.material.transparent = true

You don't need to set depthWrite to false. More info about depthTest and depthWrite you can get in this answer - https://stackoverflow.com/a/37651610/14208501.

If you have some model which have transparent material add to your line transparent also, because transparent materials have in three js own sorting and are rendered after non transparent materials.

Can you further explain what the "command arrow" is? If you want something to follow the mouse around that's 2D, one option is to create something like:

<div id="mouseHover" style="position: absolute; z-index: 999"></div>

And then run a script to update the x and y position of the div:

<script>
 <!-- if using a library like jQuery, which has a mousemove event handler -->
 $('body').mousemove({
   document.getElementById('mouseHover').style.left = e.pageX;
   document.getElementById('mouseHover').style.top = e.pageY;
 });
</script>

If you really need something to render in 3D that follows the mouse, the issue is simply relative position. You can create a THREE.WebGLRenderTarget with its own scene showing the 3D object on a transparent background, map it to a texture, and apply it to a THREE.PlaneGeometry that hovers in front of the camera. I would provide some code for you, but I would need to know more about your particular setup to do so.