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

Question

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

Answer 1

我用了

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

Answer 2

您能进一步解释一下“命令箭头”是什么吗？如果你想要一些东西跟随鼠标在 2D 周围移动，一种选择是创建类似的东西：

<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悬停在相机前面的场景。我将为您提供一些代码，但我需要更多地了解您的特定设置才能做到这一点。