All entities, including the camera, have a position component. And because the default camera and the <a-box> are positioned at the default x, y, z position, 0 0 0, we won’t be able to see the box unless we move it.

We can do this by using the position component to transform the box in 3D space. For example:

<a-scene> <a-box position="2 4 -3"></a-box> </a-scene>
  • The x-axis value is 2
  • The y-axis value is 4
  • The z-axis value is -3

A-Frame uses a right-handed coordinate system:

Position right hand rule
With the default camera direction:
  • Positive x-axis goes right.
  • Positive y-axis goes up.
  • Positive z-axis goes out of the screen towards us.

Note: A-Frame’s distance unit is in meters (m).



Let’s move the box so that it’s in front of the camera.

Give <a-box> a position of "0 0 -5".


Hmmm, the box is not at the center of the page.

Change the coordinates so that the box moves up by 2 meters.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?