Now that we’ve seen the power of A-Frame, we can begin to create our own universe. Let’s start by learning how to create a primitive from scratch—the <a-box> primitive specifically.

We can use <a-box> just like a normal HTML element, defining the tag and using HTML attributes to customize it.

To place a box in our world, put an opening and closing <a-box> tag inside the <a-scene> tag:

<a-scene>
  <a-box></a-box>
</a-scene>

And suppose we want to give it a color:

<a-scene>
  <a-box color="yellow"></a-box>
</a-scene>

We can give a color value using three different methods:

• Color names: One of the 140 color names.
• Hex codes: A six-digit code representing the amount of red, green, and blue for the color.
• RGB values: A value specified using the rgb() property.

See <a-box> documentation for more attributes.