註冊基元

Created: November-22, 2018

我們可以使用 AFRAME.registerPrimitive(name, definition) 註冊我們自己的基元（即註冊元素）。definition 是一個定義這些屬性的 JavaScript 物件：

屬性	描述
`defaultComponents`	指定基元的預設元件的物件。鍵是元件的名稱，值是元件的預設資料。
`mappings`	指定 HTML 屬性名稱和元件屬性名稱之間的對映的物件。每當更新 HTML 屬性名稱時，基元將更新相應的元件屬性。元件屬性使用點語法 `${componentName}.${propertyName}` 定義。

例如，下面是 A-Frame 對 <a-box> 原語的註冊：

var extendDeep = AFRAME.utils.extendDeep;

// The mesh mixin provides common material properties for creating mesh-based primitives.
// This makes the material component a default component and maps all the base material properties.
var meshMixin = AFRAME.primitives.getMeshMixin();

AFRAME.registerPrimitive('a-box', extendDeep({}, meshMixin, {
  // Preset default components. These components and component properties will be attached to the entity out-of-the-box.
  defaultComponents: {
    geometry: {primitive: 'box'}
  },

  // Defined mappings from HTML attributes to component properties (using dots as delimiters).
  // If we set `depth="5"` in HTML, then the primitive will automatically set `geometry="depth: 5"`.
  mappings: {
    depth: 'geometry.depth',
    height: 'geometry.height',
    width: 'geometry.width'
  }
}));

我們可以使用哪個

<a-box depth="1.5" height="1.5" width="1.5"></a-box>

表示此實體元件形式：

<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>