aframe
システム

前書き

パラメーター

備考

システムの登録

A-Frameコンポーネントと同様にシステムが登録されます。

システム名がコンポーネント名と一致する場合、コンポーネントはthis.systemというシステムへの参照を持ちます。

AFRAME.registerSystem('my-component', {
  schema: {},  // System schema. Parses into `this.data`.
  init: function () {
    // Called on scene initialization.
  },
  // Other handlers and methods.
});
AFRAME.registerComponent('my-component', {
  init: function () {
    console.log(this.system);
  }
});

システムへのアクセス

インスタンス化されたシステムには、シーンからアクセスできます。

document.querySelector('a-scene').systems[systemName];

登録されたシステムプロトタイプは、 AFRAME.systemsからアクセスできます。

ロジックとデータの分離

システムは、必要に応じてロジックとビヘイビアをデータから分離するのに役立ちます。システムは重い持ち上げを処理し、コンポーネントはライフサイクルの方法でデータを管理することのみを心配しています。

AFRAME.registerSystem('my-component', {
  createComplexObject: function (data) {
    // Do calculations and stuff with data.
    return new ComplexObject(data);
  }
});

AFRAME.registerComponent('my-component', {
  init: function () {
    this.myObject = null;
  },

  update: function () {
    // Do stuff with `this.data`.
    this.myObject = this.system.createComplexObject(this.data);
  }
});

システムのすべてのコンポーネントを収集する

システムがコンポーネントをどのように管理するかを定義するための厳密なAPIはありません。一般的なパターンは、コンポーネントをシステムに登録することです。システムは次に、そのすべてのコンポーネントへの参照を持ちます。

AFRAME.registerSystem('my-component', {
  init: function () {
    this.entities = [];
  },

  registerMe: function (el) {
    this.entities.push(el);
  },

  unregisterMe: function (el) {
    var index = this.entities.indexOf(el);
    this.entities.splice(index, 1);
  }
});

AFRAME.registerComponent('my-component', {
  init: function () {
    this.system.registerMe(this.el);
  },

  remove: function () {
    this.system.unregisterMe(this.el);
  }
});