Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Rotation
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Welcome back!
Now that you’ve got the hang of positioning objects in 3D space, let’s take it one step further — by learning how to rotate them.
In this lesson, we’re diving into — one of the most powerful and visually exciting transformations in 3D graphics. Rotation allows you to spin, tilt, and turn objects in your scene, making everything feel more dynamic and alive.
Rotation simply means turning an object around one or more of its axes. And in , this is done using something called Euler angles.
Put simply — your object rotates around the , , and axes — and the amount of rotation is measured in radians, not degrees.
If that sounds complicated, don’t worry. Once you see it in action, it clicks pretty quickly.
Before jumping into the code, let’s get a feel for how each axis affects rotation:
Every object has a .rotation property — and just like position, it uses the , , and axes.
You can rotate an object by setting one of the axes directly:
cube.rotation.x = Math.PI / 4; // Rotate 45 degrees around the x-axis
cube.rotation.y = Math.PI / 2; // Rotate 90 degrees around the y-axis
cube.rotation.z = Math.PI; // Rotate 180 degrees around the z-axisIf you want to rotate around more than one axis at once, you can use the .set() method:
cube.rotation.set(Math.PI / 4, Math.PI / 2, Math.PI); // Rotate around x, y, and zSince uses radians, you’ll often need to convert degrees to radians. Here’s a handy formula:
function degreesToRadians(degrees) {
return degrees * (Math.PI / 180);
}
cube.rotation.y = degreesToRadians(45); // Rotate 45 degrees around the y-axisRotations are applied in a specific order in Three.js: X → Y → Z.
That means:
This order is important! Rotating around one axis first can change how the others behave. If things don’t rotate the way you expect, this is probably why.
There’s even a handy site to help visualize this: Quaternions Online
Want to animate a rotating object? You can update its rotation a little bit each frame:
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += degreesToRadians(5); // Rotate 5 degrees per frame
renderer.render(scene, camera);
}
animate();Rotation is everywhere in 3D scenes. Here are some practical examples:
Rotation really shines when you combine it with and . You can build entire animations just by combining these three.
Example: A bouncing, spinning cube
cube.position.set(0, 2, 0); // Move the cube up
cube.scale.set(1.5, 1.5, 1.5); // Make the cube bigger
function animate() {
requestAnimationFrame(animate);
cube.rotation.y += degreesToRadians(1); // Rotate slowly
cube.position.y = Math.sin(Date.now() * 0.001) * 2; // Bounce up and down
renderer.render(scene, camera);
}
animate();Try this challenge to lock in what you’ve learned:
Take a few minutes to think through it before jumping into the solution.
Next up: we’ll tackle Scaling — how to resize objects to bring balance and proportion to your scene.
See you there!
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.