Three.js - 始终在顶部呈现 object

Question

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

Answer 1

你能进一步解释一下“命令箭头”是什么吗？ 如果你想要一些东西跟随鼠标在 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 。 我会为您提供一些代码，但我需要更多地了解您的特定设置才能这样做。

Answer 2

我用了

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

Answer 3

这对我有用

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

您不需要将 depthWrite 设置为 false。 有关 depthTest 和 depthWrite 的更多信息，您可以在这个答案中获得 - https://stackoverflow.com/a/37651610/14208501 。