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.
Instructions
Inside <a-scene>
, create an <a-box>
with the color "red"
and press Run.
Wait, where is the box?
If you click in the browser, you can use the s key or down arrow key to move backward. The box should appear.
We’ll discuss why the box is not in the foreground by default in the next exercise.