Euler
Quick answer
Euler stores a rotation as three axis angles plus an order string, making it the most readable rotation format. The result depends on the order, such as 'XYZ' or 'YXZ', and gimbal lock occurs when two axes align. Object3D exposes it through rotation and keeps quaternion synchronized.
new THREE.Euler ( x , y , z , order )
Key points
- Angles are radians; convert degrees with MathUtils.degToRad before assigning rotation.y.
- Set order explicitly and keep it consistent, because XYZ and YXZ produce different results.
- setFromQuaternion() and setFromRotationMatrix() derive angles from other rotation forms.
Example
const euler = new THREE.Euler(
THREE.MathUtils.degToRad(30),
THREE.MathUtils.degToRad(45),
0,
'YXZ'
);
mesh.quaternion.setFromEuler(euler);
const current = new THREE.Euler().setFromQuaternion(mesh.quaternion, 'YXZ');
console.log(
THREE.MathUtils.radToDeg(current.x).toFixed(1),
THREE.MathUtils.radToDeg(current.y).toFixed(1),
THREE.MathUtils.radToDeg(current.z).toFixed(1)
);Notes
- Assigning 45 to rotation.y means 45 radians, roughly seven full turns.
- Changing order after setting angles via reorder() silently alters the represented orientation.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Euler. https://www.jingweizhi.com/en/three/api/euler.html (accessed 2026-11-03).