aframe Asset Management System How It Works Internally
Example
Every element in A-Frame inherits from <a-node>, the AFRAME.ANode
prototype. ANode controls load and initialization order. For an element to
initialize (whether it be <a-assets>, <a-asset-item>, <a-scene>, or
<a-entity>), its children must have already initialized. Nodes initialize
bottom up.
<a-assets> is an ANode, and it waits for its children to load before
it loads. And since <a-assets> is a child of <a-scene>, the scene
effectively must wait for all assets to load. We also added extra load logic to
<a-entity> such that they explicitly wait for <a-assets> to load if we have
defined <a-assets>.
<a-asset-item> uses THREE.FileLoader to fetch files. three.js stores the
returned data in THREE.Cache. Every three.js loader inherits from
THREE.FileLoader, whether they are a ColladaLoader, OBJLoader,
ImageLoader, etc. And they all have access and are aware of the central
THREE.Cache. If A-Frame already fetched a file, A-Frame won't try to fetch it
again.
Thus, since we block entity initialization on assets, by the time entities
load, all assets will have been already fetched. As long as we define
<a-asset-item>s, and the entity is fetching files using some form
THREE.FileLoader, then caching will automatically work.
Accessing the FileLoader and Cache
To access the three.js FileLoader if we want to listen more closely:
console.log(document.querySelector('a-assets').fileLoader);
To access the cache that stores XHR responses:
console.log(THREE.Cache);
