注册基元

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>