Question

我试图在屏幕上实现跟随鼠标的命令箭头，但有时它最终隐藏在另一个对象后面。有没有办法调整z缓冲区或其他东西总是在顶部渲染箭头。我宁愿不在顶部创建第二个场景（如解决方案中所示： Three.js - Geometry on top of another。感谢。

Answer 1

您能否进一步解释＆＃34;命令箭头＆＃34;是什么？如果你想在鼠标周围跟踪鼠标，可以选择创建类似的东西：

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

然后运行脚本来更新div的x和y位置：

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

如果确实需要在鼠标后面的3D渲染中，问题就在于相对位置。您可以使用自己的场景创建THREE.WebGLRenderTarget，在透明背景上显示3D对象，将其映射到纹理，然后将其应用到悬停在相机前面的THREE.PlaneGeometry。我会为您提供一些代码，但我需要了解更多有关您的特定设置的信息。

Answer 2

我用过

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

Three.js - 始终在顶部渲染对象

2 个答案: