Skip to Content
Learn
Building the Scene
Asset Management System

We need to build an environment piece by piece, using different images, still and moving, sounds, and 3D models. We call those assets.

A-frame has an asset management system that makes complex environments with multiple parts load faster. The system makes it easier for the browser to cache assets (e.g., images, videos, 3D models) and A-Frame will make sure all of the assets are fetched before rendering.

To utilize the asset management system, all we need is an <a-assets> element around every HTML element we want to include in the asset management system:

<a-scene> <a-assets> <!-- Asset management system --> </a-assets> <!-- Rest of <a-scene> --> </a-scene>

Some examples of assets that we can store inside of <a-assets> include:

  • <img>: image files
  • <audio>: sound files
  • <video>: video files
  • <a-asset-item>: 3D model files

If we define an <img> in the asset management system, later three.js doesn’t have to internally create an <img>. Creating the <img> ourselves also gives us more control and lets us reuse the texture across multiple entities.

To use the asset management system for an image texture:

<a-scene> <a-assets> <img id="stones" src="https://i.imgur.com/mYmmbrp.jpg"> </a-assets> <a-box src="#stones" position="0 2 -5" rotation="0 45 45"></a-box> </a-scene>

Inside <a-assets>:

  • Define the texture as an <img>.
  • Give the <img> an id (e.g., id="stones").

Outside <a-assets>:

  • Reference the asset using the id in selector format (src="#stones").

Notice how there is an extra hashtag # when referencing the id.

Instructions

1.

Inside of <a-scene>, add opening and closing <a-assets> tags for the asset management system.

2.

Inside of <a-assets>, add an image with:

  • id of "boxTexture"
  • src of "moo.png"

Nothing should happen after you press Run, because we are only “loading” the image into the asset management system.

3.

Outside of the <a-assets>tags, instantiate an <a-box> primitive whose:

  • src is "#boxTexture"
  • position is "0 2 -5"
  • rotation is "0 45 45"
Folder Icon

Take this course for free

Already have an account?