如何解决带函数的 A 帧检查变量并根据值显示不同的 gltf
我想知道如何使用 JavaScript 和 A-frame (https://aframe.io) 创建这样的东西。
我想创建一个名为 load()
的 onload 函数,该函数将检查变量 x 的值,如果 x 为 1,则显示 id 为 1 的 gltf
,gltf 将显示2 和 3 的 id 将不可见。 gltf 的 2 和 3 也是如此。我怎样才能做到这一点?我的代码:
<script>
var x = 1;
</script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<body onload="load()">
<a-gltf-model id="1" src="https://cdn.glitch.com/2556b706-79db-4661-ab72-d86cfd5b5649%2Fscene.glb?v=1622850633562" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-gltf-model id="2" src="https://cdn.glitch.com/6632f840-a210-4bdc-a62f-bc38e65ae48a%2Fscene%20-%202021-06-12T230318.001.glb?v=1623564342354" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-gltf-model id="3"src="https://cdn.glitch.com/6632f840-a210-4bdc-a62f-bc38e65ae48a%2Fwinter.glb?v=1623564477495" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-scene>
</a-scene>
</body>
解决方法
将有效的 id
存储在一个数组中并循环遍历每个,然后相应地删除。
const ids = [1,2,3];
function load() {
var x = 1;
ids.forEach((e) => {
if (e != x) {
document.getElementById(e).remove();
}
})
}
a-gltf-model {
display: none;
}
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<body onload="load()">
<a-scene>
<a-gltf-model id="1" src="https://cdn.glitch.com/2556b706-79db-4661-ab72-d86cfd5b5649%2Fscene.glb?v=1622850633562" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-gltf-model id="2" src="https://cdn.glitch.com/6632f840-a210-4bdc-a62f-bc38e65ae48a%2Fscene%20-%202021-06-12T230318.001.glb?v=1623564342354" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-gltf-model id="3" src="https://cdn.glitch.com/6632f840-a210-4bdc-a62f-bc38e65ae48a%2Fwinter.glb?v=1623564477495" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-plane width="100" height="100" position=" 0.00 0.00 0.00" rotation="-90 0 0" color="royalblue"></a-plane>
</a-scene>
</body>
我认为此博客上的示例可能会有所帮助: https://medium.com/swlh/build-your-location-based-augmented-reality-web-app-a841956eed2c
有一个 <a-entity></a-entity>
组件。
使用您的 load()
动态更改 gltf-model
和 position
属性。
也许将信息存储在上面链接示例中的排序数组中?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。