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 rotation component:

<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:

Rotation 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.



Give the <a-box> primitive a rotation of "0 45 45".

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?