Learn
Introduction to A-Frame
<a-box>

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

1.

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.

Folder Icon

Take this course for free

Already have an account?