aframe Primitives Registering a Primitive

Example

We can register our own primitives (i.e., register an element) using AFRAME.registerPrimitive(name, definition). definition is a JavaScript object defining these properties:

Property	Description
defaultComponents	Object specifying default components of the primitive. The keys are the components' names and the values are the components' default data.
mappings	Object specifying mapping between HTML attribute name and component property names. Whenever the HTML attribute name is updated, the primitive will update the corresponding component property. The component property is defined using a dot syntax ${componentName}.${propertyName}.

For example, below is A-Frame's registration for the <a-box> primitive:

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'
  }
}));

Which we can use then

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

represents this entity-component form:

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