lookAt and a slerp swing
The orange cone swings between its start pose and the pose that faces the blue ball. The camera's direction is printed to show that cameras look down -z.
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
pointer's forward after lookAt = 0.832, 0.000, -0.555
direction to target = 0.832, 0.000, -0.555
camera at z = 5, lookAt the origin: getWorldDirection = 0, 0, -1.000