Aframe-如何将HUD渲染到所有其他对象之上

A-Frame可以创建如下HUD：

<a-entity camera look-controls>
  <a-entity geometry="primitive: plane; height: 0.2; width: 0.2" position="0 0 -1"
            material="color: gray; opacity: 0.5"></a-entity>
</a-entity>

但是，这会导致HUD元素被游戏中的对象剪裁。通常，HUD在所有其他游戏对象上方的单独图层上渲染。有没有简单的方法来解决这个问题？

您必须：

• 设置renderer.sortObjects=true
• 设置实体的渲染顺序

  this.el.object3D.renderOrder=100

• 禁用物料深度测试

  material.depthTest=false

我创建了一个简单的

overlay

组件，可以轻松地将上述内容应用于任何实体

  AFRAME.registerComponent("overlay", {
        dependencies: ['material'],
        init: function () {
          this.el.sceneEl.renderer.sortObjects = true;
          this.el.object3D.renderOrder = 100;
          this.el.components.material.material.depthTest = false;
        }
  });

---

谢谢，当我使用它时，它不起作用，但这从技术上回答了我的问题。用贴花来显示问题。我在
paintable.js
组件中的行中添加了注释，建议修复该问题，但他们不确定贴花示例的预期行为。您单击以在场景中拍摄贴花，我希望HUD在所有内容之上进行渲染。但是，贴花渲染在HUD顶部。请注意，贴花材质具有透明材质。它们总是在“非透明”对象（如光标）之后渲染。将hud材质设置为透明可解决以下问题：
<a-entity camera look-controls wasd-controls position="0 1.6 0">
  <a-plane id="hud" overlay rotation="0 0 0" position="0 0 -2" width="1" height="1" color="purple" shadow></a-plane>
</a-entity>