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, 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
- The y-axis value is
- The z-axis value is
A-Frame uses a right-handed coordinate system:
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.
<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.