aframe
체계

소개

매개 변수

비고

시스템 등록

시스템은 A- 프레임 구성 요소와 유사하게 등록됩니다.

시스템 이름이 구성 요소 이름과 일치하면 구성 요소는 시스템에 대한 참조를 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);
  }
});