Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Transformations
Loading...
Loading...
Let’s talk about something that forms the core of almost every 3D scene — Transformations.
Anytime you move, spin, or resize something in your scene, you’re performing a transformation. It's how we bring static objects to life — making them interact, animate, and respond in meaningful ways.
In this lesson, we’ll get comfortable with three essential types of transformations:
But before we jump into manipulating objects, let’s slow down for a moment and talk about where these transformations actually happen.
When you're placing an object in 3D space, you need a reference — a grid to work from. That reference is called a coordinate system. Three.js uses something called a Cartesian coordinate system , which is made up of three invisible lines, or axes:
Think of it like a 3D graph paper floating in space — this is how you’ll describe the position of everything in your scene.
Now, here’s something a little specific to Three.js: it uses a right-handed coordinate system.
Not sure what that means? Try this simple trick: hold out your right hand.
This system helps us figure out which direction is which when we move or rotate things.
Once you’ve grasped the basic coordinate system, the next big question is: “Where are these transformations happening?” Let’s break it down.
This is like your main stage. Every object is positioned relative to the global origin point, (0, 0, 0). If you move an object without putting it inside a group, that transformation happens in world space.
const mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 3; *// Moves mesh along global x-axis*Now imagine you have a group of objects — like a robot made of arms, legs, and a head. If you move the entire robot, all parts move together. But each part can also move independently — relative to its parent. That’s local space.
const group = new THREE.Group();
group.add(mesh);
group.position.x = -1; // Moves entire group along global x-axis but keeps mesh’s local position unchanged.const group = new THREE.Group();group.add(mesh);group.position.x = -1; // Moves entire group along global x-axis but keeps mesh’s local position unchanged.So if the cube inside the group is at x = 1, and you move the group x = -1, the cube ends up at world x = 0.
Now let’s look at how we actually use these transformation types in our code. Every mesh in Three.js has these properties:
Here’s an example that uses all three:
// Example: Creating a cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "cyan" });
const cube = new THREE.Mesh(geometry, material);
// Move right
cube.position.x = 1;
// Rotate 45° around Y-axis
cube.rotation.y = Math.PI / 4;
// Double the size on Z
cube.scale.z = 2;The result might look a little weird at first — and that’s okay. We’ll break down each transformation type in more depth in the upcoming lessons.
Let’s connect these transformations to things you’ve probably done in real life:
Let’s animate one to make it clearer:
function animate() {
requestAnimationFrame(animate);
// Animate rotation over time as an example transformation sequence
cube.rotation.y += Math.PI / (180 * 0.9); // Math.PI / (180 * 0.9) is approximately 0.0194.
renderer.render(scene, camera);
}
animate();Understanding coordinate systems isn't just for the sake of theory — it directly affects how you build and interact with 3D environments:
Once you get world space vs local space, transformations stop feeling like trial and error — and start feeling like a superpower.
You'll:
Here’s something to watch out for:
If you rotate an object 90° around the X-axis, then rotate it 90° around Y — the result will be different than doing Y first, then X.
Why? Because transformations stack. They build on top of each other.
Up next, we’ll break down each transformation — starting with position, and show how you can use it to build scenes that feel alive and intentional.
Ready to start moving things around?
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 Let's talk about transformations in 3JS.
00:00:04 If you're working with 3D, understanding how objects move, rotate, and scale in a 3D space is crucial.
00:00:11 So today, you and I, let's talk about transformations.
00:00:16 Transformations allow us to change the position, orientation, and size of objects in a 3D space.
00:00:24 In 3JS, there are three primary types of transformations.
00:00:29 Translation, that allows you to move objects along the X, Y, or Z axis.
00:00:35 Rotation, which allows you to spin objects around an axis.
00:00:39 And finally, scaling, allowing you to change the size of an object.
00:00:44 These transformations are applied using matrices.
00:00:47 which are mathematical structures that represent how an object should be transformed.
00:00:53 In 3JS, you don't need to worry about the math behind matrices.
00:00:58 The library handles it for you.
00:01:00 Instead, you can use simple methods like position.set, rotation.set, and scale.set to manipulate objects.
00:01:09 Before we dive deeper into transformations, we need to talk about coordinate systems.
00:01:15 In 3D graphics, we use a coordinate system to define the position of objects in a space.
00:01:21 The most common system is called the Cartesian coordinate system, which consists of three axes.
00:01:27 X-axis, which represents the horizontal direction, Y-axis for the vertical direction, and Z-axis that represents depth or how far an object is from the viewer.
00:01:39 In 3JS, the origin point is 0, 0, 0, where these axes interact.
00:01:47 Positive X goes to the right, positive Y goes up, and positive Z comes out of the screen towards you.
00:01:54 This is also known as the right-hand coordinate system.
00:01:57 Now, why is it called right-handed?
00:02:00 Well, if you take a look at your right hand and point your thumb in a direction of a positive X axis, your index finger in the direction of the positive y-axis,
00:02:09 your middle finger will naturally point in the direction of the positive z-axis.
00:02:14 How many of you were trying this while I was explaining?
00:02:17 Well, this is the standard coordinate system used in 3JS and many other 3D graphics frameworks.
00:02:23 Understanding this system is important because it determines how rotation and movements are interpreted.
00:02:30 Once you understand that, you're ready to move into the concept of the world space and local space.
00:02:36 These are two different ways of thinking about an object's position and orientation.
00:02:41 You can think of the world space as the global coordinate system of the entire scene.
00:02:46 Every object in the scene has a position, rotation, and scale relative to this global system.
00:02:53 For example, if you place an object at 500 in world space, It'll always be 5 units to the right of the origin, no matter how its parent's objects are transformed.
00:03:04 And then there's the local space, which is the coordinate system relative to an object's parent.
00:03:11 If an object is a part of a group or hierarchy, its position, rotation, and scale are defined relative to its parent.
00:03:20 For example, if you rotate a parent object, all its children will rotate with it, and their local coordinates will remain the same.
00:03:29 So how can you apply these transformations in 3JS?
00:03:32 Well, I can show you in a quick example where we can create a cube.
00:03:36 First, create a geometry for the cube, apply some material to it, and then merge them together.
00:03:43 Finally, you can translate the position of the cube by using the position.set.
00:03:48 You can rotate the cube by using the rotation.set.
00:03:52 And finally, you can scale the cube across all three different axes by using the scale.set function.
00:03:59 effectively manipulating the cube's position, rotation, and scale in local space.
00:04:05 If you now add this to a group and transform the group, the cube's world position will change, but its local position will remain the same.
00:04:13 So, to wrap it up, let me just say that every time you rotate or scale an object, you're not just changing where it is, you're changing how it fits into
00:04:23 the bigger picture.
00:04:24 For example, if you rotate a parent object, all its child objects move with it.
00:04:30 Another useful way to look at it is that everything on a website has a hierarchy and elements are placed one next to another.
00:04:38 You can think of that as a local space.
00:04:40 But then if you apply a position absolute to one of the elements, well, then you can move it across the entire page without it affecting the other elements.
00:04:48 Don't worry, you'll need some time to process this world and local space concepts.
00:04:53 But for now, just make sure that you understand what transformations are and how we can translate, rotate, and scale elements in a 3D space.