使用A-Frame 1.5.0加载GLTF模型遇问题，请求代码排查

原因：<a-assets>中的资源会在页面初始化时自动预加载，大模型会占用主线程资源，导致页面无法正常滚动。

解决方法：延迟模型加载时机，直到用户进入VR/AR模式后再触发加载，避免初始化阶段阻塞页面：

• 初始时不为模型设置gltf-model属性
• 监听场景的enter-vr事件，在用户进入VR/AR后再加载模型

原因：代码中的<a-sky color="black">会遮挡智能手机摄像头画面；同时未启用AR模式时，VR会话默认背景为黑色。

解决方法：

• 移除黑色天空盒元素，让摄像头画面作为背景显示
• 确保场景启用WebXR支持，移动端浏览器会自动提供AR选项

<head>
  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  <script src="https://rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.loaders.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const scene = document.querySelector('a-scene');
      const gltfModel = document.querySelector('#gltfModel');
      // 用户进入VR/AR后加载模型
      scene.addEventListener('enter-vr', () => {
        gltfModel.setAttribute('gltf-model', '#yourModel');
      });
    });
  </script>
</head>
<body>
  <a-scene vr-mode-ui="enabled: true">
    <a-assets>
      <a-asset-item id="yourModel" src="path/gltf/model.gltf"></a-asset-item>
    </a-assets>

    <!-- 移除多余独立摄像头，保留运动控制rig内的摄像头 -->
    <a-entity id="rig" movement-controls kinematic-body>
      <a-entity id="cameraRig" camera look-controls>
        <a-entity
          geometry="primitive: sphere; radius: 0.05"
          material="color: red"
          position="0 0 -1"
          cursor-listener
        ></a-entity>
      </a-entity>
    </a-entity>

    <!-- 初始不绑定模型，进入VR后再加载 -->
    <a-entity id="gltfModel" position="0 1.6 -2"></a-entity>

    <a-entity laser-controls="hand: right"></a-entity>
    <a-entity laser-controls="hand: left"></a-entity>
  </a-scene>
</body>

• 移动端需使用支持WebXR的浏览器（如Chrome、Edge）才能正常进入AR模式并显示摄像头画面
• 若模型体积过大，可使用glTF优化工具压缩文件，进一步降低加载阻塞风险
• 如需在非VR模式下滚动页面，可给<a-scene>添加embedded属性，让场景嵌入页面而非全屏锁定

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