如何让HTML/CSS元素在A-Frame VR模式下保持可见？

• 非iOS设备触发原生WebXR沉浸式会话时，A-Frame默认会将WebGL渲染画布层级提至最高，同时给画布外的普通HTML元素添加隐藏、禁用指针事件的样式，这是WebXR独占渲染模式的默认行为。
• iOS目前无原生WebXR支持，A-Frame在iOS端会自动降级使用WebVR polyfill实现非独占全屏VR，不会屏蔽普通HTML元素，因此自定义按钮可以正常显示。

方案1：CSS覆盖默认样式（适配移动端全屏VR场景） #

将自定义UI容器放在<a-scene>标签外部（与scene为同级DOM节点），通过A-Frame进入VR时自动给<html>标签添加的a-enter-vr类做样式覆盖，强制让UI浮在画布上层：

html.a-enter-vr .custom-ui-wrap {
  position: fixed;
  z-index: 99999 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  /* 按需调整UI位置即可，示例为固定在屏幕右下角 */
  right: 24px;
  bottom: 24px;
}

退出按钮的点击事件直接绑定A-Frame提供的退出方法即可：

document.querySelector('#exit-vr-btn').addEventListener('click', () => {
  document.querySelector('a-scene').exitVR()
})

方案2：修改场景配置开启HTML兼容（A-Frame 1.3+版本适用） #

初始化场景时给<a-scene>添加xr-mode-ui组件配置，开启HTML元素显示权限，无需手动写大量样式覆盖：

<a-scene xr-mode-ui="allowHTML: true">
  <!-- 场景内部内容 -->
</a-scene>

开启后A-Frame会自动保留DOM元素的显示层级与交互权限，自定义按钮只要不在<a-scene>内部即可正常显示。

方案3：3D场景内原生UI（全设备/头显兼容） #

如果需要UI在VR头显的视野内显示（比如Quest、Pico等原生VR设备），普通HTML浮层只会显示在头显外的系统桌面，无法进入VR渲染视野，此时需要直接用A-Frame实体实现UI，在WebGL渲染层内绘制：

<!-- 放在a-scene内部，固定在用户视野前方 -->
<a-entity id="vr-exit-btn" class="clickable" position="0 0.8 -1.5" geometry="primitive: plane; width: 0.5; height: 0.25" material="color: #e53935">
  <a-text value="退出VR" align="center" color="#fff" position="0 0 0.01" scale="0.4 0.4 0.4"></a-text>
</a-entity>

<script>
  document.querySelector('#vr-exit-btn').addEventListener('click', () => {
    document.querySelector('a-scene').exitVR()
  })
</script>

注意：原生WebXR沉浸式会话下，普通HTML/CSS元素无法渲染到头显内的立体视野中，仅在移动端非头显的全屏VR模式下可以正常显示在屏幕上，面向VR头显开发的内容优先选择方案3实现UI。

内容的提问来源于stack exchange，提问作者Aidan H M