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
<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>
- Define the texture as an
- Give the
- Reference the asset using the
idin selector format (
Notice how there is an extra hashtag
# when referencing the
<a-scene>, add opening and closing
<a-assets> tags for the asset management system.
<a-assets>, add an image with:
Nothing should happen after you press Run, because we are only “loading” the image into the asset management system.
Outside of the
<a-assets>tags, instantiate an
<a-box> primitive whose:
"0 2 -5"
"0 45 45"