具有功能的 A 帧检查变量并根据值显示不同的 gltf答案

【问题标题】：A-frame check variable with function and show different gltf depending on the value具有功能的 A 帧检查变量并根据值显示不同的 gltf
【发布时间】：2021-08-29 10:19:43
【问题描述】：

我想知道如何使用 JavaScript 和 A-frame (https://aframe.io) 创建这样的东西。

我想创建一个名为 load() 的 onload 函数，它将检查变量 x 的值，如果 x 为 1，则会显示 id 为 1 的 gltf 以及 id 为 2 的 gltf 和3 将不可见。 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>

【问题讨论】：

标签： javascript html three.js aframe webvr

【解决方案1】：

将有效的ids 存储在一个数组中并循环遍历每一个，然后相应地删除。

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>

【讨论】：

我尝试了代码，但没有一个模型出现。我不确定代码到底出了什么问题，但我尝试改变模型的比例，改变变量和其他东西。我在想也许 document.getElementById(x).style.display = "block";不起作用，因为您可能无法在 css 中显示带有“块”元素的 gltf 模型。
@AidanYoung 我认为这可能是源的问题，而不是 sn-p 的问题。你看，当我删除 display:none 规则时，它们无论如何都不会显示。
我不确定您到底在说什么源是一个问题，但我将代码完全放入小提琴并运行程序，但我在任何地方都找不到 gltf 模型。我尝试在初始尝试后切换变量但没有成功。我还测试了 sn-p，但我似乎无法在任何地方找到 gltf 模型。如果代码正常工作，您介意与其中的代码分享一个小提琴吗？
@AidanYoung 我的意思是，如果您检查开发人员工具，您会看到元素 itself 已显示。我不认为这是我的错误。
非常感谢，现在可以完美运行了。我还不能给你赏金，因为它刚刚确定，但我会确保在 20 小时内给你赏金。

【解决方案2】：

我认为此博客上的示例可能会有所帮助： https://medium.com/swlh/build-your-location-based-augmented-reality-web-app-a841956eed2c

只有一个 <a-entity></a-entity> 组件。使用您的load() 动态更改gltf-model 和position 属性。

也许将信息存储在上面链接示例中的排序数组中？

【讨论】：