Radians, Euler order and a full turn
This example is numbers only. The first line is a mistake on purpose: 90 is read as 90 radians.
three.js turns objects with three angles (Euler angles, in radians) or with a quaternion. Euler angles are easy to read but depend on their order and can lock up; quaternions turn smoothly and never lock.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a cube turn smoothly from its current pose to a 90° turn around y over one second, using slerp. Give the loop code.
Write the code that turns an object by exactly a quarter turn around y, then again by a quarter turn, and say what rotation.y holds afterwards.
Explain it without notes
What is gimbal lock, when does it happen with order XYZ, and how does a quaternion avoid it?
Why is writing object.rotation.y = 90 a bug in three.js, and how do you find it?
Console
Nothing logged yet.Expected console output
rotation.y = 90 (a mistake: that is 90 radians) is really 5156.6 degrees, which is the same turn as 116.6 degrees
degToRad(90) = 1.5708 (that is Math.PI / 2 = 1.5708)
order XYZ sends (1, 0, 0) to 0, 1, 0
order YXZ sends (1, 0, 0) to 0, 0, -1
the default order is XYZ
rotation.y = 2 PI: x axis of the matrix = 1.000, leftover from rounding = -2.45e-16
PI + PI: rotation.y = 6.283185, still stored as 2 PI exactly
rotation of 270 degrees read back from its matrix: y = -90.0 degrees