rotation
The rotation component defines the orientation of an entity in degrees. It
takes the pitch (x
), yaw (y
), and roll (z
) as three space-delimited
numbers indicating degrees of rotation.
All entities inherently have the rotation component.
Example
<a-entity rotation="45 90 180"></a-entity> |
Value
A-Frame uses a right-handed coordinate system. When aligning our right hand’s thumb with a positive axis, our hand will curl in the positive direction of rotation.
Axis | Description | Default Value |
---|---|---|
x | Pitch, rotation about the X-axis. | 0 |
y | Yaw, rotation about the Y-axis. | 0 |
z | Roll, rotation about the Z-axis. | 0 |
Relative Rotation
Child entities inherit world-space rotations from parent entities. Consider this scene:
<a-entity id="parent" rotation="0 45 0"> |
The world-space rotation of #child1
would be 0 45 0
as inherited by the
entity. In the local parent’s space, #child1
‘s rotation would be 0 0 0
.
The world-space rotation of #child2
would be 15 90 30
, by combining the
rotation with the parent entity. In the parent’s local space, #child2
‘s
rotation would be 15 45 30
.
Updating Rotation
For performance and ergonomics, we recommend updating rotation directly via the
three.js Object3D .rotation
Euler (in radians) versus
via .setAttribute
.
This method is easier because we have access to all the Euler
utilities, and faster by skipping .setAttribute
overhead and not
needing to create an object to set rotation:
// With three.js |
Getting Rotation
Updates at the three.js level will still be reflected in A-Frame when doing
entityEl.getAttribute('rotation');
. When calling .getAttribute('rotation')
,
A-Frame will convert from radians to degrees and return a normal JavaScript
object with x/y/z properties.
See also reading position and rotation of the camera.
Order of Transformations
Transformations are applied to entities in this order:
- scale
- rotation
- position/translation