如何修复在第一次尝试时从不加载但在刷新时加载的 A-frame 虚拟环境？
Posted
技术标签:
【中文标题】如何修复在第一次尝试时从不加载但在刷新时加载的 A-frame 虚拟环境？【英文标题】：How to fix an A-frame virtual environment that never loads on first attempt but does upon refresh? 【发布时间】：2022-01-11 23:17:50 【问题描述】：我（一个非常业余的程序员）正在尝试在 A-frame 中创建一个环境，您可以将光标指向不同的对象，它会更改温度计上的显示值：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>
【问题讨论】：
【参考方案1】：我打开它，当场景中的某些内容没有加载时，控制台中有一个很好的日志：
Uncaught TypeError: Cannot read property 'array' of undefined
at TextGeometry.computeBoundingSphere (index.js:96)
at P.raycast (three.js:8649)
(....)
无需搜索undefined 的array - 其余部分告诉我们光线投射文本元素存在问题。
由于您只想与某些事物（不是文本元素）进行交互，因此您可以指定光标应与哪些项目进行交互：
<!-- 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>
就像我在this remix做的那样
【讨论】：
你太棒了；非常感谢！ @DirectedEvolution 如果它对您有用并且您没有其他问题，请随时标记答案以上是关于如何修复在第一次尝试时从不加载但在刷新时加载的 A-frame 虚拟环境？的主要内容，如果未能解决你的问题，请参考以下文章
YDN-DB - 删除数据库，然后在页面加载/重新加载时重新创建和加载，但在刷新时不加载