aframe Asset Management System
Introduction
A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance.
Games and rich 3D experiences traditionally preload their assets, such as models or textures, before rendering their scenes. This makes sure that assets aren’t missing visually, and this is beneficial for performance to ensure scenes don’t try to fetch assets while rendering.
Remarks
Events
Since <a-assets> and <a-asset-item> are nodes in A-Frame, they will emit
the loaded event when they say they have finished loading.
| Event Name | Description |
|---|---|
| loaded | All assets were loaded, or assets timed out. |
| timeout | Assets timed out. |
Load Progress on Individual Assets
<a-asset-item>
<a-asset-item> invokes the three.js
FileLoader. We can use
<a-asset-item> for any file type. When finished, it will set its data
member with the text response.
| Event Name | Description |
|---|---|
| error | Fetch error. Event detail contains xhr with XMLHttpRequest instance. |
| progress | Emitted on progress. Event detail contains xhr with XMLHttpRequest instance, loadedBytes, and totalBytes. |
| loaded | Asset pointed to by src was loaded. |
<img>
Images are a standard DOM element so we can listen to the standard DOM events.
| Event Name | Description |
|---|---|
| load | Image was loaded. |
HTMLMediaElement
Audio and video assets are HTMLMediaElements. The browser triggers
particular events on these elements; noted here for convenience:
| Event Name | Description |
|---|---|
| error | There was an error loading the asset. |
| loadeddata | Progress. |
| progress | Progress. |
A-Frame uses these progress events, comparing how much time the browser buffered with the duration of the asset, to detect when the asset becomes loaded.
