Three.js - Render an object always on top

Question

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.

Answer 1

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.

Answer 2

I used

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

Answer 3

This working for me

mesh.renderOrder = zindex || 999
mesh.material.depthTest = false 

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 .