js -渲染一个对象总是在顶部

Three.js - Render an object always on top

本文关键字：顶部 一个对象 js      更新时间：2023-09-26

我试图实现一个跟随屏幕上鼠标的命令箭头，但有时它最终隐藏在另一个对象后面。有没有什么方法可以调整z-buffer或者别的什么来使箭头总是在上面。我不希望在顶部创建第二个场景(如图所示):Three.js -几何体在另一个几何体之上。谢谢。

我用

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

你能进一步解释一下什么是"command arrow"吗?如果你想要一些跟随鼠标的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。我会为您提供一些代码，但我需要更多地了解您的特定设置。

这对我有用

mesh.renderOrder = zindex || 999
mesh.material.depthTest = false 
// UPDATED If you using some models with transparent materials
mesh.material.transparent = true

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

如果你有一些模型有透明材料添加到你的线也透明，因为透明材料在三个js中有自己的排序和渲染后的非透明材料

相关文章：