Aframe.js: Can someone give me an example to add model loaded event?

aframe setattribute
a-frame 3d models
a-frame animation
a scene a-frame
a frame primitives
aframe-event-set component
a-frame projects
a-frame click event

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

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.

Can someone give me an example to add model loaded event , Description: Hello, I was hoping to create a loading screen in Aframe. 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  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..)

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

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

JavaScript, Events, DOM APIs – A-Frame, Since A-Frame is just HTML, we can control the scene and its entities using JavaScript As the most basic example, to register a console.log component before <a-scene> : Do not try to put A-Frame-related JavaScript in a raw <script​> tag after we can listen to the loaded event on the entity, or place logic in an A-​Frame  This example shows how to handle the FrameworkElement.Loaded event, and an appropriate scenario for handling that event. The handler creates a Button when the page loads. Example. The following example uses Extensible Application Markup Language (XAML) together with a code-behind file.

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());

3D Models – A-Frame, A-Frame has an asset management system that allows us to place our assets in one rich 3D experiences traditionally preload their assets, such as models or textures, Example. We can define our assets in <a-assets> and point to those assets <a-asset-item> are nodes in A-Frame, they will emit the loaded event when  Caleandar.js is a simple JavaScript library used for generating a themeable inline calendar on the webpage that supports custom events defined in the JavaScript. Load the Caleandar.js and a theme CSS of your choice in the webpage. Create an empty container to place the calendar. Add custom events into the calendar.

Asset Management System – A-Frame, For example, A-Painter is Tilt Brush in the browser that can smoothly run 90 frames per second and {x: 1, y: 2, z: 3}) almost directly touches the underlying three.js objects. Why does my asset (e.g., image, video, model) not load? How do I display <iframe> s or render HTML in A-Frame? Can I add links to my scene? A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

FAQ – A-Frame, There is no one true way for adding interactions due to variety of platforms, devices, And we can show how these input-based and interaction-based components are A common misbelief is that we can add a click event listener to an A-Frame Or as another example, Mayo Tobita's mouse-cursor component creates a  Please visit me some shops Please find me some wine Please make me some pizza Demarshalling JSON to an OOP model. If you are programming in an OO style you probably want to instantiate constructors based on the values you read from the JSON. You can build the OOP model while streaming using Oboe’s node replacement feature:

Interactions & Controllers – A-Frame, Work on the three.js glTF loader and converters are still active. Example. Load a glTF model by pointing to an asset that specifies the src for a glTF file. After the registration call, you can provide add-and-remove common language runtime (CLR) event accessors for the event. Note that even though the event is raised through the OnTap virtual method in this particular example, how you raise your event or how your event responds to changes depends on your needs.

Comments
  • 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...
  • 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 added the event listener to the objects. But still nothing happens... Do you have any idea what I am doing wrong?? Thanks
  • @TatsumaNakano model-loaded here
  • Hi Kevin, Thank you for your answer! Could you please give me an example of usage if you have any chance? I used the <a-obj-model> but still doesn't do anything...
  • @ngoKevin shouldn't any <a-asset-item> fire the loaded item once the resource is loaded by the Three fileLoader ?
  • <a-entity id="foo" obj-model>, document.getElementById('foo').addEventListener('model-loaded', () => {})
  • Your code has lots of typos too...addEventListenr, <a-assets-item>