Aframe.js：有人可以给我一个示例来添加模型加载事件吗？

Question

描述：

您好，我希望在Aframe中创建一个加载屏幕。 我在下面找到了关于对象加载的页面，但是我不知道如何使用它。

https://aframe.io/docs/0.8.0/core/asset-management-system.html#lt-a-asset-item-gt

<a-asset-item class="model" id="back" src="./models/back.obj"></a-asset-item>
<img id="backTex" src="./textures/back.png">

<a-asset-item class="model" id="front" src="./models/front.obj"></a-asset-item>
<img id="frontTex" src="./textures/front.png">

-

var models = document.getElementsByClassName("model");

/*trial 1*/
for(var i in models){
    models[i].addEventListener("loaded",()=>{console.log("loaded!")});//CAN'T FIND addEventListener
}

function OnLoaded(){
console.log("loaded!");
}

/*trial 2*/
for(var i in models){
    models[i].loaded  = OnLoaded;
}

在html文件上，我有一些<a-asset-item class="model" id="mainModel" src="./models/mainModel.obj"></a-assets-item> ，

我存储了所有具有model类的model 。 我尝试将事件侦听器添加到其子级，但它说"addEventListenr is not a function"我认为该元素没有addEventListener。

因此，我在console.loge中记录了子项，并在其中看到了一些变量之类的事件（onclick，onmousedown等），并向子项添加了变量“ loaded”和“ model-loaded”。 这次没有错误，但是什么也没发生。

我也尝试使用事件名称“ model-loaded”，但也无法正常工作... https://github.com/aframevr/aframe/blob/master/src/components/obj-model.js#L51

有人可以给我一些关于如何为<a-assets-item>使用loaded事件的示例吗？ 提前致谢。

• A框架版本：0.7.1
• 可复制的代码段或URL：

---

更新

for(var i = 0; i < this.models[i].length; i++){
    this.models[i].addEventListener("model-loaded", ()=>{console.log("Hello!");})
    this.models[i].addEventListener("loaded", ()=>{console.log("Hello!");})
}

我将“ for / in”更改为常规for循环。 现在它不会引起任何错误，但不会做任何事情...

Answer 1

getElementsByClassName返回一个HTMLCollection 。 使用for .. in对其进行迭代会得到意外的结果（例如，for循环试图将事件侦听器添加到item()函数中，该函数是集合的一部分。

---

如果使用典型的for循环：

for (var i = 0; i < models.length; ++i) {
  models[i].addEventListener(....)
}

它应该正在工作。

---

实际上，您正在执行的操作应该有效-因为模型附加了事件侦听器，所以只有在循环到达item()函数时才会出现错误。

此外， 此anwser具有有关通过HTMLCollection迭代的更多信息。

---

至于事件名称-作为a-node的<a-asset-item>会发出已loaded事件，但是<a-obj-model>或<a-entity obj-model="">会发出model-loaded事件。

Answer 2

<a-asset-item>不是模型。 它们仅用于网络预加载。

使用<a-obj-model>并将模型类放在这些对象上。

Answer 3

您可能需要将事件侦听器更改为object3dset事件。 因此，代码将类似于：

models[i].addEventListener('object3dset', e => this.doSomethingWithModel());