Aframe-如何在其他所有内容上渲染HUD

问题描述

A框架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渲染在所有其他游戏对象上方的单独图层上。有解决此问题的简单方法吗？

解决方法

您必须：

• 设置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;
        }
  });

<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上的示例