求适配Oculus的A-frame退出VR按钮完整可运行代码

以下是直接可运行的完整代码，包含两种退出VR的按钮方案，适配桌面HTML和Oculus设备，无需复杂的事件编写知识：

方案1：2D UI图片按钮（适合桌面+VR内平视显示） #

这个按钮固定在屏幕前方，桌面端点击、VR端用手柄射线点击都能触发退出。

<!DOCTYPE html>
<html>
<head>
  <!-- 引入A-Frame核心库 -->
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- 360°全景图：替换成你的全景图URL即可 -->
    <a-sky src="你的360全景图URL"></a-sky>

    <!-- 退出VR按钮：替换成你的按钮图片URL -->
    <a-entity position="0 1.6 -1.5">
      <a-image 
        src="你的退出按钮图片URL" 
        width="0.3" 
        height="0.3"
        id="exitBtn"
        cursor-listener
      ></a-image>
    </a-entity>

    <!-- 手柄/鼠标交互光标 -->
    <a-camera>
      <a-cursor raycaster="objects: [cursor-listener]"></a-cursor>
    </a-camera>
  </a-scene>

  <script>
    // 监听按钮点击，触发退出VR
    document.querySelector('#exitBtn').addEventListener('click', function() {
      const scene = document.querySelector('a-scene');
      if (scene.is('vr-mode')) {
        scene.exitVR();
      }
    });
  </script>
</body>
</html>

方案2：3D实体按钮（适合VR空间内交互） #

这个按钮是3D物体，放置在场景中，用手柄射线点击触发退出。

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- 360°全景图：替换成你的全景图URL -->
    <a-sky src="你的360全景图URL"></a-sky>

    <!-- 3D退出按钮 -->
    <a-box 
      position="0 1.6 -2"
      width="0.4"
      height="0.4"
      depth="0.1"
      color="#ff4444"
      id="3dExitBtn"
      cursor-listener
    >
      <!-- 按钮文字 -->
      <a-text 
        value="EXIT VR" 
        position="0 0 0.1"
        align="center"
        color="#ffffff"
        width="0.5"
      ></a-text>
    </a-box>

    <a-camera>
      <a-cursor raycaster="objects: [cursor-listener]"></a-cursor>
    </a-camera>
  </a-scene>

  <script>
    document.querySelector('#3dExitBtn').addEventListener('click', function() {
      const scene = document.querySelector('a-scene');
      scene.exitVR();
    });
  </script>
</body>
</html>

使用说明 #

• 代码中的A-Frame库是稳定版本，直接引入即可使用
• cursor-listener是标记可点击元素的选择器，确保光标射线能识别按钮
• scene.exitVR()是A-Frame内置的退出VR方法，无需手动编写底层逻辑
• 替换代码中的你的360全景图URL和你的退出按钮图片URL为你自己的资源地址
• Oculus设备中，用手柄射线对准按钮后按扳机键即可触发退出

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