aframeAsset 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 NameDescription
loadedAll assets were loaded, or assets timed out.
timeoutAssets 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 NameDescription
errorFetch error. Event detail contains xhr with XMLHttpRequest instance.
progressEmitted on progress. Event detail contains xhr with XMLHttpRequest instance, loadedBytes, and totalBytes.
loadedAsset pointed to by src was loaded.

<img>

Images are a standard DOM element so we can listen to the standard DOM events.

Event NameDescription
loadImage was loaded.

HTMLMediaElement

Audio and video assets are HTMLMediaElements. The browser triggers particular events on these elements; noted here for convenience:

Event NameDescription
errorThere was an error loading the asset.
loadeddataProgress.
progressProgress.

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.