A-Frame 1.6.0中AR模式按钮未显示，如何启用该模式？

在Glitch平台使用A-Frame 1.6.0构建混合现实体验时，仅能看到VR按钮（此前曾显示AR按钮），项目无需VR功能，需配置启用AR模式，当前代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />
    <title>MAPS</title>

    <!-- Import A-Frame Library -->
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <!-- Import Hand Tracking Controls -->
    <script src="https://aframe.io/releases/1.6.0/aframe-hand-tracking-controls.min.js"></script>

    <!-- The website stylesheet -->
    <style>
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="overlay" style="display: none;"></div>

    <a-scene
      xrweb="mode: immersive-ar; requiredFeatures: hit-test; optionalFeatures: dom-overlay; overlayElement: #overlay"
      xr-mode-ui="enabled: true"
      renderer="colorManagement: true; antialias: true; foveationLevel: 1"
      embedded
    >
      <!-- Assets management section -->
      <a-assets>
        <img
          id="yosemite"
          src="https://cdn.glitch.me/4fc60967-2f19-4e8f-b905-44c0d1c89db7/8798000.png?v=1728421365754"
        />
      </a-assets>

      <!-- Camera setup with hand tracking controls -->
      <a-camera
        position="0 1.6 0"
        look-controls="enabled: true; pointerLockEnabled: true"
        wasd-controls="acceleration: 50"
      ></a-camera>

      <!-- Left and Right Hand Tracking -->
      <a-entity
        id="leftHand"
        hand-tracking-controls="hand: left; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"
        hand-tracking-grab-controls="hand: left; hoverEnabled: true; hoverColor: #538df1"
      ></a-entity>
      <a-entity
        id="rightHand"
        hand-tracking-controls="hand: right; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"
        hand-tracking-grab-controls="hand: right; hoverEnabled: true; hoverColor: #538df1"
      ></a-entity>

      <!-- Lights to illuminate objects (adjust as needed, but no global light to interfere with AR passthrough) -->
      <a-light type="ambient" color="#ffffff" intensity="0.7"></a-light>
      <a-light
        type="directional"
        position="1 3 1"
        color="#ffffff"
        intensity="0.6"
      ></a-light>

      <!-- Grabbable Plane -->
      <a-plane
        position="0 2 -2"
        rotation="0 0 0"
        width="1.5"
        height="1.5"
        material="src: #yosemite; transparent: true; alphaTest: 0.5"
        grabbable
      ></a-plane>
    </a-scene>
  </body>
</html>

要强制显示AR按钮并隐藏VR按钮，需调整以下两处配置：

• 修改xr-mode-ui组件参数：明确指定优先AR模式，禁用VR按钮。将原代码中xr-mode-ui="enabled: true"替换为：

  xr-mode-ui="enabled: true; preferredMode: immersive-ar; vrButtonEnabled: false"
  

  该配置会让A-Frame默认显示AR进入按钮，同时完全隐藏VR按钮。

• 移除相机的桌面端控制：AR模式不需要桌面端的wasd-controls和pointerLockEnabled，这些属性会干扰移动端AR体验，修改后的相机标签如下：

  <a-camera
    position="0 1.6 0"
    look-controls="enabled: true"
  ></a-camera>
  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />
    <title>MAPS</title>

    <!-- Import A-Frame Library -->
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <!-- Import Hand Tracking Controls -->
    <script src="https://aframe.io/releases/1.6.0/aframe-hand-tracking-controls.min.js"></script>

    <!-- The website stylesheet -->
    <style>
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="overlay" style="display: none;"></div>

    <a-scene
      xrweb="mode: immersive-ar; requiredFeatures: hit-test; optionalFeatures: dom-overlay; overlayElement: #overlay"
      xr-mode-ui="enabled: true; preferredMode: immersive-ar; vrButtonEnabled: false"
      renderer="colorManagement: true; antialias: true; foveationLevel: 1"
      embedded
    >
      <!-- Assets management section -->
      <a-assets>
        <img
          id="yosemite"
          src="https://cdn.glitch.me/4fc60967-2f19-4e8f-b905-44c0d1c89db7/8798000.png?v=1728421365754"
        />
      </a-assets>

      <!-- Camera setup with hand tracking controls -->
      <a-camera
        position="0 1.6 0"
        look-controls="enabled: true"
      ></a-camera>

      <!-- Left and Right Hand Tracking -->
      <a-entity
        id="leftHand"
        hand-tracking-controls="hand: left; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"
        hand-tracking-grab-controls="hand: left; hoverEnabled: true; hoverColor: #538df1"
      ></a-entity>
      <a-entity
        id="rightHand"
        hand-tracking-controls="hand: right; modelColor: #ffffff; modelOpacity: 0.8; modelStyle: mesh"
        hand-tracking-grab-controls="hand: right; hoverEnabled: true; hoverColor: #538df1"
      ></a-entity>

      <!-- Lights to illuminate objects (adjust as needed, but no global light to interfere with AR passthrough) -->
      <a-light type="ambient" color="#ffffff" intensity="0.7"></a-light>
      <a-light
        type="directional"
        position="1 3 1"
        color="#ffffff"
        intensity="0.6"
      ></a-light>

      <!-- Grabbable Plane -->
      <a-plane
        position="0 2 -2"
        rotation="0 0 0"
        width="1.5"
        height="1.5"
        material="src: #yosemite; transparent: true; alphaTest: 0.5"
        grabbable
      ></a-plane>
    </a-scene>
  </body>
</html>

内容的提问来源于stack exchange，提问作者bobarke