Uncaught (in promise) TypeError: Cannot read properties of null (reading 'components')

问题描述 投票:0回答:0

我正在尝试使用故障制作基于位置的 AR 网站。现在我可以让相机工作并渲染模型,但它卡在相机上并且不会在我在代码中指定的坐标中生成。当我在 PC 上运行它时,在控制台中出现此错误:

caught (in promise) TypeError: Cannot read properties of null (reading 'components')
at n.init (aframe-ar-nft.js:1:1647187)
at n.initComponent (component.js:318:10)
at n.updateProperties (component.js:300:12)
at e.exports.Component (component.js:76:8)
at new n (component.js:660:15)
at a.initComponent (a-entity.js:319:17)
at a.updateComponent (a-entity.js:471:10)
at a.updateComponents (a-entity.js:442:12)
at a-entity.js:243:12
at a-node.js:150:17

这里是源代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>GeoLocation Test</title>
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
  </head>

  <body style="margin: 0; overflow: hidden">
    <h1>Test Text</h1>

    <script>
      AFRAME.registerComponent("locationfinder", {
        init: function () {
          navigator.geolocation.getCurrentPosition(function (location) {
            console.log(location);
          });
        },
      });
    </script>

    <a-scene
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="sourceType:webcam;">
      
      <a-camera gps-camera locationfinder rotation-reader> </a-camera>
      <a-assets>
        <a-asset-item
          id="star-asset"
          src="https://cdn.glitch.global/17c58ecd-ba3b-4535-8f8f-d66551d3f88f/Room.glb?v=1683103062435"
        ></a-asset-item>
      </a-assets>
      <a-box
        material="color: yellow"
        gps-new-entity-place="latitude: 0; longitude: 0"
        scale=".5 .5 .5" />
      <!-- 
      <a-entity
        id="x"
        scale="1 1 1"
        gltf-model="#star-asset"
        gps-entity-place="latitude:0 ;longitude:0;"
        position= "0 -2 0"
      ></a-entity>
      
      -->

      <a-text
        value="Test"
        look-at="[gps-camera]"
        scale="5 5 5"
        gps-entity-place="latitude:0 ;longitude:0;"
      ></a-text
    ></a-scene>
  </body>
</html>

附言lat-lon 值在程序中实际上不是 0

javascript html geolocation augmented-reality webxr
© www.soinside.com 2019 - 2024. All rights reserved.