Currently, the box looks like a 2D square because it’s facing dead center towards the default camera. Let’s change that.
To rotate the box, we can change the
<a-scene> <a-box color="red" position="0 2 -5" rotation="33 45 0"> </a-box> </a-scene>
This will rotate our box at an angle:
- The x-axis rotation is 33°
- The y-axis rotation is 45°
- The z-axis rotation is 0°
A-Frame’s rotational unit is in degrees, although it will get internally converted to radians when passing to three.js.
To determine the positive direction of rotation, use the right-hand rule:
Point our thumbs towards the direction of the positive x, y, or z-axis with your fingers curled. As a reminder:
- Positive x-axis goes right.
- Positive y-axis goes up.
- Positive z-axis goes out of the screen towards us.
The direction in which your fingers curl is the positive direction of rotation. The other way is the negative direction of rotation.
<a-box> primitive a rotation of
"0 45 45".