5

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.

Community
  • 1
  • 1
user3553274
  • 71
  • 1
  • 4

3 Answers3

8

I used

  mesh.renderOrder = zindex || 999;
  mesh.material.depthTest = false;
  mesh.material.depthWrite = false;
  mesh.onBeforeRender = function (renderer) { renderer.clearDepth(); };
Manuel Graf
  • 462
  • 5
  • 20
  • I don't know if you want clearDepth like this. I have some problems with these function. But it's working for me without onBeforeRender. – Vít Zadina Nov 25 '22 at 14:48
  • I think that stringy depends on how your render cycle looks like. I had to hook in to an existing App here, which also rendered a lot of things and iirc I had to clear. – Manuel Graf Dec 16 '22 at 11:56
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.

bobloblaw
  • 252
  • 3
  • 12
0

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.

Vít Zadina
  • 168
  • 8