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> <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
<a-box> documentation for more attributes.
<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.