我正在尝试使用故障制作基于位置的 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