Gimbal lock and slerp, in numbers
No picture: the lock and the smooth turn are shown with numbers.
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
y = 90, x = 30, z = 0 : quaternion 0.183, 0.683, 0.183, 0.683
y = 90, x = 0, z = 30 : quaternion 0.183, 0.683, 0.183, 0.683
same turn from two different Euler triples: true
typed (30, 90, 0), read back (30.0, 90.0, 0.0)
slerp t=0: quaternion 0, 0, 0, 1, turned 0 degrees
slerp t=0.25: quaternion 0, 0.383, 0, 0.924, turned 45 degrees
slerp t=0.5: quaternion 0, 0.707, 0, 0.707, turned 90 degrees
slerp t=1: quaternion 0, 1, 0, 0, turned 180 degrees