1

Description:

Hello, I was hoping to create a loading screen in Aframe. I found the page below, it's about object loading but I couldn't figure out how to use it...

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;
}

On the html file, I have some <a-asset-item class="model" id="mainModel" src="./models/mainModel.obj"></a-assets-item> ,

I stored all of models that has model class. And I tried to add event listener to its child but it said "addEventListenr is not a function" I don't think there is addEventListener to this element.

So I console.logeed the children and I saw some events like variables in it (onclick, onmousedown etc..) and added the variable, "loaded" and "model-loaded" to the children. This time no error but nothing happened.

I also tried with the event name "model-loaded" but also didn't work... https://github.com/aframevr/aframe/blob/master/src/components/obj-model.js#L51

Can someone give me some examples of how to use loaded event for<a-assets-item>? Thanks in advance.

  • A-Frame Version: 0.7.1
  • Reproducible Code Snippet or URL:

Update

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!");})
}

I changed the "for/in" to regular for loop. Now it doesn't cause any error but doesn't do anything...

Tats
  • 69
  • 1
  • 2
  • 10

3 Answers3

0

The getElementsByClassName returns a HTMLCollection . Iterating through it using for .. in gets unexpected results ( such as the for loop trying to add an event listener to a item() function, which is a part of the collection.

If you use a typical for loop:

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

It should be working.

Actually what you were doing should be working - since the models got the event listeners attached, with an error only when the loop reached the item() function.

Furthermore, this anwser has more info about iterating through a HTMLCollection

As for the event names - the <a-asset-item> as a a-node emits the loaded event , but a <a-obj-model> or <a-entity obj-model=""> will emit the model-loaded event.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • Hello Piotr, Thank you for your answer. I tried with regular for loop and it didn't cause any error now! Thank you so much for the advice. Now it doesn't cause any error but nothing happens now... – Tats Aug 13 '18 at 20:23
  • 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!");}) } – Tats Aug 13 '18 at 20:26
  • I added the event listener to the objects. But still nothing happens... Do you have any idea what I am doing wrong?? Thanks – Tats Aug 13 '18 at 20:28
  • @TatsumaNakano `model-loaded` [here](https://glitch.com/edit/#!/aframe-assetsloaded?path=index.html:20:111) – Piotr Adam Milewski Aug 15 '18 at 12:22
0

<a-asset-item>s are not models. They are just for network preloading.

Use <a-obj-model> and put your model class on those.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
0

You might want to change your event listener to the object3dset event. So the code would be something like:

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

droid001
  • 163
  • 10