rotation

Note: This documentation is for the old 1.0.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

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 from world-space rotations from parent entities. Consider this scene:

<a-entity id="parent" rotation="0 45 0">
  <a-entity id="child1"></a-entity>
  <a-entity id="child2" rotation="15 45 30"></a-entity>
</a-entity>

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
el.object3D.rotation.set(
  THREE.Math.degToRad(15),
  THREE.Math.degToRad(30),
  THREE.Math.degToRad(90)
);
el.object3D.rotation.x += Math.PI;

// With .setAttribute (less recommended).
el.setAttribute('rotation', {x: 15, y: 30, z: 90});

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 and degrees and return a normal JavaScript object with x/y/z properties.

Order of Transformations

Transformations are applied to entities in this order: