A-Frames 元件架構屬性型別

Created: November-22, 2018

屬性型別主要定義模式如何從 DOM 中為每個屬性解析傳入資料。然後，解析的資料將通過元件原型上的 data 屬性提供。以下是 A-Frame 的內建屬性型別：

屬性型別	描述	預設值
排列	將逗號分隔的值解析為陣列（即 `"1, 2, 3" to ['1', '2', '3'])`。	[]
財富	對於指向常規資產的 URL。可以以 `url(<url>)` 的形式解析字串中的 URL。如果值是元素 ID 選擇器（例如，`#texture`），則此屬性型別將呼叫 `getElementById` 和 `getAttribute('src')` 以返回 URL。`asset` 屬性型別可能會也可能不會更改以處理 XHR 或直接返回 MediaElements（例如，`<img>` 元素）。	“”
音訊	與 `asset` 屬性型別相同的解析。A-Frame Inspector 可能會使用它來呈現音訊資產。	“”
布林	將字串解析為布林值（即，`false` 為 false，其他一切都是真實的）。	假
顏色	目前不做任何解析。主要由 A-Frame Inspector 用於呈現顏色選擇器。此外，還需要使用顏色型別來實現顏色動畫。	#FFF
INT	撥打 `parseInt`（例如，`124.5` 到 `124`）。	0
地圖	與 `asset` 屬性型別相同的解析。可能會在 A-Frame Inspector 中用於呈現紋理資源。	“”
模型	與 `asset` 屬性型別相同的解析。可能會使用 A-Frame Inspector 來呈現模型資產。	“”
數	撥打 `parseFloat`（例如，`'124.5'`到`'124.5'`）。	0
選擇	撥打 `querySelector`（例如，`#box` 到 `<a-entity id="box">`）。	空值
selectorAll	呼叫 `querySelectorAll` 並將 `NodeList` 轉換為 `Array`（例如，`.boxes` 到[<a-entity class =`boxes`，…]），	空值
字串	不進行任何解析。	“”
VEC 2	將兩個數字解析為一個 `{x, y}` 物件（例如，`1 -2` 到 `{x: 1, y: -2}`。	{x：0，y：0}
VEC3	將三個數字解析成一個 `{x, y, z}` 物件（例如，`1 -2 3` 到 `{x: 1, y: -2, z: 3}`。	{x：0，y：0，z：0}
vec4	將四個數字解析成一個 `{x, y, z, w}` 物件（例如，`1 -2 3 -4.5` 到 `{x: 1, y: -2, z: 3, w: -4.5}`。	{x：0，y：0，z：0，w：0}

屬性型別推斷

架構將嘗試推斷僅給定預設值的屬性型別：

schema: {default: 10}  // type: "number"
schema: {default: "foo"}  // type: "string"
schema: {default: [1, 2, 3]}  // type: "array"

如果未提供，架構將設定預設值，給定屬性型別：

schema: {type: 'number'}  // default: 0
schema: {type: 'string'}  // default: ''
schema: {type: 'vec3'}  // default: {x: 0, y: 0, z: 0}

自定義屬性型別

我們還可以通過提供 parse 函式來代替 type 來定義我們自己的屬性型別或解析器：

schema: {
  // Parse slash-delimited string to an array 
  // (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
  myProperty: {
    default: [],
    parse: function (value) {
      return value.split('/');
    }
  }
}