aframe-asset-on-demand-component: A JavaScript repository from protyze

aframe-asset-on-demand-component

Asset OnDemand Component for A-Frame.

The A-Frame Asset OnDemand component does basically two things:

Load Asset on the fly when it is needed. Instead of declaring all the assets of the Scene in the -Section, you an use the Asset OnDemand Component to load and attach Assets during runtime when needed. This is especially beneficial if you have a lot of large assets (e.g. 360-Panoramas) but you only display one at a time. So it doesn't make sense to constantly have them all in memory or wait a long time to load all of them in the beginning.
Remove Asset from Memory when not needed anymore. If you just remove the Texture from an entity, it will not be removed from entirely from THREE.JS and still use precious memory (precious especially on mobile). The A-Frame Asset OnDemand makes sure, that the Asset is removed in a way that free's up memory.

Normally you would do something like this:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
        <img id="large-image" src="images/large-image.jpg" />
    </a-assets>
    <a-box src="#large-image"></a-box>
  </a-scene>
</body>

This will load the Asset in the beginning and attach it to the box as a texture. It will stay there throughout the whole lifecycle of the scene.

With the Asset OnDemand Module you would do it like this:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  <script src="https://rawgit.com/protyze/aframe-asset-on-demand-component/master/dist/aframe-asset-on-demand-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
    </a-assets>
    <a-box asset-on-demand="src: images/large-image.jpg"></a-box>
  </a-scene>
</body>

The are now different states during the lifecycle of the scene:

After Rendering: An img-Tag with an empty src-Attribute has been added to a-assets
After play (or any other configurable event): The resource is loaded within the img-Tag and attached as a Texture to the Box (via the material Component)
After pause (or any other configurable event): The Texture is removed from the box and the image is removed from a-assets
No more memory is used up (Check Texture-Count in the stats component)
Steps 2./3. can now alternate

API

Property	Description	Default Value
src	URL of the Asset that should be loaded	''
type	Type of the Asset (img, audio or video)	img
attributes	Attributes for the Asset-Entity that will be created on Demand (Format: attr1:value1,attr2:value2,...)	''
component	Name of the A-Frame Component where the Asset will be assigned	'material'
componentattr	Attributes for the Component that will be added (Format: attr1:value1,attr2:value2,...)	''
assetattr	Attribute-Name of the Component, that will contain the Asset	src
fallback	The id (#xyz) of an Asset to use as default and fallback	''
addevent	Comma-seperated List of Events when the Asset should be attached	play
removeevent	Comma-seperated List of Events when the Asset should be detached	pause
softmode	If true only the texture will be removed when detached, not the asset itself (so the asset will not have to be (re)loaded on the fly)	false

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  <script src="https://rawgit.com/protyze/aframe-asset-on-demand-component/master/dist/aframe-asset-on-demand-component.min.js"></script>
</head>

<body>
  <a-assets>
  </a-assets>
  <a-scene>
    <a-entity asset-on-demand="src: images/image.jpg"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-asset-on-demand-component

Then register and use.

require('aframe');
require('aframe-asset-on-demand-component');