Tutorial by Examples

A system is registered similarly to a A-Frame component. If the system name matches a component name, then the component will have a reference to the system as this.system: AFRAME.registerSystem('my-component', { schema: {}, // System schema. Parses into `this.data`. init: function () { ...

An instantiated system can be accessed through the scene: document.querySelector('a-scene').systems[systemName]; Registered system prototypes can be accessed through AFRAME.systems.

Systems can help separate logic and behavior from data if desired. We let systems handle the heavy lifting, and components only worry about managing its data through its lifecycle methods: AFRAME.registerSystem('my-component', { createComplexObject: function (data) { // Do calculations ...

There is no strict API for defining how systems manage components. A common pattern is to have components subscribe themselves to the system. The system then has references to all of its components: AFRAME.registerSystem('my-component', { init: function () { this.entities = []; }, ...