Search code examples
aframe

AFrame: How to update schema data on System?


Systems in AFrame can declare a schema and store data within their data object field. However, setting a field on data directly does not trigger the update() lifecycle handler on the system. What's the correct way to update a system's data and trigger the update handler?

For components in AFrame, you can do element.setAttribute(component, field, value) to update the data and automatically call the update handler. Is there something like this for systems? I don't believe systems are stored as HTML elements, so I know setAttribute wouldn't work.


Solution

  • AFrame's a-scene element overrides setAttribute to try and update some data on a system first.

    Here's the relevant function pulled from AFrame's a-scene.js file:

      /**
       * Wrap Entity.setAttribute to take into account for systems.
       * If system exists, then skip component initialization checks and do a normal
       * setAttribute.
       */
      setAttribute (attr, value, componentPropValue) {
        var system = this.systems[attr];
        if (system) {
          ANode.prototype.setAttribute.call(this, attr, value);
          system.updateProperties(value);
          return;
        }
        AEntity.prototype.setAttribute.call(this, attr, value, componentPropValue);
      }