aframe Asset Management System Example usage of assets
Example
We place assets within <a-assets>, and we place <a-assets> within
<a-scene>. Assets include:
<a-asset-item>- Miscellaneous assets such as 3D models and materials<audio>- Sound files<img>- Image textures<video>- Video textures
The scene won't render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.
We can define our assets in <a-assets> and point to those assets from our
entities using selectors:
<a-scene>
<!-- Asset management system. -->
<a-assets>
<a-asset-item id="horse-obj" src="horse.obj"></a-asset-item>
<a-asset-item id="horse-mtl" src="horse.mtl"></a-asset-item>
<a-mixin id="giant" scale="5 5 5"></a-mixin>
<audio id="neigh" src="neigh.mp3"></audio>
<img id="advertisement" src="ad.png">
<video id="kentucky-derby" src="derby.mp4"></video>
</a-assets>
<!-- Scene. -->
<a-plane src="advertisement"></a-plane>
<a-sound src="#neigh"></a-sound>
<a-entity geometry="primitive: plane" material="src: #kentucky-derby"></a-entity>
<a-entity mixin="giant" obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity>
</a-scene>
The scene and its entities will wait for every asset (up until the timeout) before initializing and rendering.
