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

时间:2018-08-10 21:12:01

标签: javascript three.js aframe

说明:

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

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

Add-Type

-

<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">

在html文件上,我有一些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; }

我存储了所有具有<a-asset-item class="model" id="mainModel" src="./models/mainModel.obj"></a-assets-item>类的模型。我尝试将事件侦听器添加到其子对象,但它说model我认为此元素没有addEventListener。

所以我在console.loged了孩子们之后,我看到了一些事件,例如变量(onclick,onmousedown等)。 并将变量“已加载”和“模型已加载”添加到子级。这次没有错误,但是什么也没发生。

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

有人可以给我一些如何为"addEventListenr is not a function"使用loaded事件的示例吗? 预先感谢。

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

更新

<a-assets-item>

我将“ for / in”更改为常规for循环。现在它不会引起任何错误,但不会执行任何操作...

3 个答案:

答案 0 :(得分:0)

) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;返回一个["".join(i) for i in x] ['meyou', 'herhim'] 。使用getElementsByClassName对其进行迭代会得到意外的结果(例如,for循环试图将事件侦听器添加到HTMLCollection函数中,该函数是集合的一部分。


如果您使用典型的for循环:

for .. in

应该可以。


实际上,您正在做的事情应该起作用-因为模型附加了事件侦听器,并且只有在循环到达item()函数时才会出现错误。

此外,this anwser提供了有关遍历for (var i = 0; i < models.length; ++i) { models[i].addEventListener(....) } 的更多信息


对于事件名称-item()作为HTMLCollection发出<a-asset-item>事件 ,但是a-nodeloaded将发出<a-obj-model>事件。

答案 1 :(得分:0)

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

使用<a-obj-model>并将模型类放在上面。

答案 2 :(得分:0)

您可能想将事件侦听器更改为object3dset事件。因此,代码将类似于:

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