A-Frame 是一個 ECS 框架，我們昨天有提到。跟 three.js 的開發方式（繼承為主）不同。

ECS模式是遊戲開發中常見的模式，比一般遊戲開發的階層及繼承的架構更有可組合性（composability)。

• entity 是一個 general 物件，本身並不會 render 其他東西。
• component 是可以復用的元件，能夠插入到 entity 當中，並且根據參數決定外觀及行為
• system 負責提供全域空間，負責儲存變數跟管理內部的元件狀態等

用這種方式撰寫程式碼，可以很容易地開發、擴充原本的模組，比起 three.js 的繼承方式更為直覺。

以人為例，我們可以將人想像成一個實體：

• 可以加入手、腳、膚色等 component
• 可以加入性別、外觀、身高等 component

對於一個人的實體，我們根據不同的需求加入元件。

今天我們就來介紹 entity component system aframe 中的三大物件。

aframe 當中，使用 <a-entity> tag 來表示 entity。因為使用的 web component 的關係，我們可以想像成他是一個比較特別的 tag，有方法可以使用。

以往我們會用 document.querySelector 的方式來獲取 DOM 元素，我們也能夠用 querySelector 來獲取 aframe 中的 tag。

以下是 entity 中的方法。

• addState (stateName)
• emit (name, detail, bubbles)
• flushToDOM (recursive)
• getAttribute (componentName)
• getDOMAttribute (componentName)
• getObject3D (type)
• getOrCreateObject3D (type, Constructor)
• pause ()
• play ()
• setAttribute (attr, value, componentAttrValue)
• setObject3D (type, obj)
• removeAttribute (attr)
• removeObject3D (type)
• removeState (stateName)

詳細的介紹我們會在後面的章節提到。

component

我們可以透過 AFRAME.registerComponent 這個 API 來客製化自己的 component。

AFRAME.registerComponent('foo', {
  schema: {},
  init: function () {},
  update: function () {},
  tick: function () {},
  remove: function () {},
  pause: function () {},
  play: function () {}
});

以上為官方網站的程式碼範例。

新增完 component 之後我們就可以直接套用在 entity 上了。
<a-entity foo="20"></a-entity>

System

system 可以幫助分離邏輯跟跟資料數據。我們讓 system 來處理其他數據間溝通的工作，讓 component 專注在呈現跟生命週期的處理。像這種 data logic 跟 life cycle 分離的方式，跟 redux 的概念很像吧！

register system

AFRAME.registerSystem('my-component', {
  schema: {},  // System schema. Parses into `this.data`.
  init: function () {
    
  },
 
});