Adding, Managing, and Monitoring Assets

An XR scene comprises several assets, such as audio files, images, textures, and 3D models. To better manage these assets, A-Frame offers an Asset Management System.

Asset management system

The asset management system in A-Frame is a feature that allows developers to easily manage and organize the assets used in their WebXR scenes, such as images, audio files, and 3D models.

The asset management system provides a centralized place for developers to manage their assets, making it easier to organize, reuse, and share assets across multiple scenes. Assets can be easily added to the scene by referencing their URL or ID in the HTML code, and they can be loaded asynchronously, allowing the scene to load faster and reducing the impact on performance. We put the asset resources in the <a-assets> child node and these assets as entities in the <a-scene> element. Resources include 3D models and materials, audio, images, etc.

A-Frame supports various file formats for different types of assets, including glTF for 3D models, JPEG and PNG for images, and MP3 and OGG for audio. Assets can be stored locally or remotely, such as in a cloud-based storage service or on a remote server.

A-Frame is based on the three.js WebXR framework. three.js is optimized to package and share content over the internet. The 3D models constitute the vast majority of the overall content in a WebXR project. The standard format to transfer 3D models over the internet is glTF, rather than the JPEG format for images.

Loading a glTF model

In a scene, we can import the model in two ways. One way is to load the model by specifying the glTF file pointed to by the source, that is, through the Asset Management System.

Here’s an example of listing the assets we want to use in our scene. These assets are fetched before being rendered, so we don’t have to wait for them to load in the scene. This code creates an <a-assets> tag, which stores assets used in the scene. Inside of it, we add an <a-asset-item> tag with id set to model and src set to the path/to/model.gltf path, which is the location of our 3D model file.