Aframe

Question

A-Frame camera docs 说要像这样创建一个 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 在所有其他游戏对象之上的单独层上进行渲染。有解决此问题的简单方法吗？

Answer 1

你必须：

设置renderer.sortObjects = true;
设置实体的渲染顺序this.el.object3D.renderOrder = 100;
禁用 material 深度测试 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;
        }
  });

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

glitch

上的示例

Aframe - 如何在其他一切之上渲染 HUD

Aframe - How to render HUD on top of everything else