aframe Primitives
Introduction
Primitives are just <a-entity>s under the hood. This means primitives have the same API as entities such as positioning, rotating, scaling, and attaching components.
A-Frame provides a handful of elements such as <a-box> or <a-sky> called primitives that wrap the entity-component pattern to make it appealing for beginners.
. Developers can create their own primitives as well.
Remarks
Under the Hood
Primitives act as a convenience layer (i.e., syntactic sugar) primarily for
newcomers. Keep in mind for now that primitives are <a-entity>s under the
hood that:
- Have a semantic name (e.g.,
<a-box>) - Have a preset bundle of components with default values
- Map or proxy HTML attributes to [component][component] data
Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. They abstract the core entity-component API to:
- Pre-compose useful components together with prescribed defaults
- Act as a shorthand for complex-but-common types of entities (e.g.,
<a-sky>) - Provide a familiar interface for beginners since A-Frame takes HTML in a new direction
Under the hood, this <a-box> primitive:
<a-box color="red" width="3"></a-box>
represents this entity-component form:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> defaults the geometry.primitive property to box. And the
primitive maps the HTML width attribute to the underlying geometry.width
property as well as the HTML color attribute to the underlying
material.color property.
