Learn
Introduction to A-Frame
Rotation

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.

Instructions

1.

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

Folder Icon

Take this course for free

Already have an account?