Query:
Hello, I am trying to implement a loading screen in Aframe. I came across the following page which talks about object loading, but I am having trouble understanding how to use it...
<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;
}
In the HTML file, I have included some
<a-asset-item class="model" id="mainModel" src="./models/mainModel.obj"></a-assets-item>I selected all of the models with the class model. When I tried to attach an event listener to its child element, it gave me an error saying that "addEventListener is not a function". It seems like there is no addEventListener method for this element.
As a workaround, I inspected the children and noticed that they had events like variables (onclick, onmousedown etc.). I added the variables "loaded" and "model-loaded" to the children, but still no action was taken.
I also attempted using the event name "model-loaded", but that did not work either... https://github.com/aframevr/aframe/blob/master/src/components/obj-model.js#L51
Could someone provide some examples of how to utilize the loaded event for <a-assets-item>? Any help is appreciated.
- 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 replaced the "for/in" loop with a regular for loop. Now, there are no errors, but nothing is happening...