如何修复从未在第一次尝试时加载但在刷新时加载的A帧虚拟环境？

Question

我(一个非常业余的程序员)正试图在A帧中创建一个环境，您可以将光标指向不同的对象，并且它会更改温度计上显示的值：https://fst-retail-safety.glitch.me

该站点从未在第一次尝试时完全加载，但在刷新时可靠加载。如果我忽略了用于环境的GLTF中的游标监听器，它也会正确地加载。有什么办法解决这个问题吗？也许游标正在尝试在加载之前与背景对象融合，并导致错误？非常感谢你的帮助。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Food Service Temperature Inspection</title>
    <meta name="description" content="Environment test" />
    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    
    <script>
      AFRAME.registerComponent("cursor-listener-box", {
        init: function() {
          this.el.addEventListener("click", function(evt) {
            let target1 = document.querySelector("#IRtext");
            target1.setAttribute("value", "100");
          });
        }
      });
    </script>
    <script>
      AFRAME.registerComponent("cursor-listener-background", {
        init: function() {
          this.el.addEventListener("click", function(evt) {
            let target1 = document.querySelector("#IRtext");
            target1.setAttribute("value", "65");
          });
        }
      });
    </script>
  </head>

  <body>
    <a-scene background="color: #FAFAFA" renderer="colorManagement: true">
      <a-assets>
        <a-asset-item
          id="gltf"
          src="https://cdn.glitch.com/13648f22-5ed9-4349-ad71-1e8bd63b6485%2Fpumptest20.glb"
        ></a-asset-item>
        <a-asset-item
          id="IRthermo"
          src="https://cdn.glitch.me/7344c97b-c709-4f6e-a17b-3a7e1c7278a4%2FIR%20thermometer.glb"
        ></a-asset-item>
        <a-asset-itm
          id="navmesh"
          src="https://cdn.glitch.com/13648f22-5ed9-4349-ad71-1e8bd63b6485%2Fpumpnavmesh7.glb"
        ></a-asset-itm>
        <img
          id="concrete"
          src="https://cdn.glitch.me/13648f22-5ed9-4349-ad71-1e8bd63b6485%2Fconcrete.jpg"
        />
        <img
          id="background"
          src="https://cdn.glitch.me/13648f22-5ed9-4349-ad71-1e8bd63b6485%2Findustrial_1k.jpg"
        />
        <img
          id="watertank"
          src="https://cdn.glitch.me/13648f22-5ed9-4349-ad71-1e8bd63b6485%2Fwatertank.jpg"
        />
      </a-assets>

      <a-entity
        gltf-model="#gltf"
        scale="0.15 0.15 0.15"
        position="0 1.5 -2"
        cursor-listener-background
      ></a-entity>

      <a-light
        type="directional"
        intensity="0.7"
        color="#FAFAFA"
        position="0 4 0"
      ></a-light>
      <a-light
        type="ambient"
        intensity="0.6"
        color="#FAFAFA"
        position="0 4 0"
      ></a-light>

      <a-box
        material="src: #watertank"
        scale="5 3.3 5"
        position="-6.3 1.93 -1.4"
      ></a-box>
      <a-box
        material="src: #watertank"
        scale="5 3.3 5"
        position="-2 4.5 -11"
      ></a-box>

      <!--test shapes for script-->
      <a-entity
        geometry="primitive:box"
        material="color:green; shader:flat"
        position="0 1.6 -1"
        scale="0.2 0.2 0.2"
        cursor-listener-box
      ></a-entity>

      <a-entity
        gltf-model="#navmesh"
        scale="0.15 0.15 0.15"
        position="0 -.3 -2"
        visible="true"
        nav-mesh
      ></a-entity>
      <a-entity
        geometry="primitive: plane; height: 10; width: 10"
        material="src: #concrete; repeat:10 10"
        position="0 .3 0"
        rotation="-90 0 0"
      ></a-entity>

      <a-sky src="#background"></a-sky>

      <!--Player rig-->
      <a-entity
        id="rig"
        movement-controls="speed: 0.08; constrainToNavMesh: true"
      >
        <a-entity camera position="0 1.6 0" look-controls>
          <a-entity
            cursor="fuse: true; fuseTimeout: 100"
            position="0 0 -0.5"
            geometry="primitive: ring; radiusInner: 0.007; radiusOuter: 0.01"
            material="color: black; shader: flat"
          >
          </a-entity>
          <a-entity
            gltf-model="#IRthermo"
            scale="0.05 0.05 0.05"
            position="0.15 0 -0.5"
            rotation="0 -90 0"
          ></a-entity>
          <a-text
            id="IRtext"
            value="25"
            align="center"
            color="black"
            position="0.184 0.01 -0.295"
            scale="0.1 0.1 0.1"
            rotation="-16 0 0"
          ></a-text>
          <a-text
            value="TEMPERATURE"
            align="center"
            color="black"
            position="0.184 0.03 -0.295"
            scale="0.03 0.03 0.03"
            rotation="-16 0 0"
          ></a-text>
          <a-text
            value="F"
            align="center"
            color="black"
            position="0.19 -0.014 -0.29"
            scale="0.1 0.1 0.1"
            rotation="-16 0 0"
          ></a-text>
          <a-entity
            geometry="primitive: ring; radiusInner:0.002; radiusOuter:0.003"
            material="color: black; shader: flat"
            position="0.18 -0.01 -0.29"
            rotation="-16 0 0"
          ></a-entity>
        </a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

Answer 1

我打开了它，当场景中的某个东西没有加载时，控制台中有一个很好的日志：

Uncaught TypeError: Cannot read property 'array' of undefined
at TextGeometry.computeBoundingSphere (index.js:96)
at P.raycast (three.js:8649)
(....)

不需要搜索array of undefined --其余部分告诉我们，光线投射文本元素存在问题。

由于您只想与某些事物(不是文本元素)进行交互，所以可以指定光标应该与哪些项交互：

<!-- let them share a common class -->
<a-box class="interactable></a-box>

<!-- raycaster setup -->
<a-entity
   cursor="fuse: true; fuseTimeout: 100"
   raycaster="objects: .interactable">
</a-entity>

就像我在这种混和做的那样