Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Position
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.
Let’s kick off our deep dive into transformations with one of the most essential — Position.
In 3D space, nothing feels real until it’s been placed. You can’t just throw a cube into your scene and hope it ends up in the right spot. You have to tell it exactly where to go. That’s where positioning, or translation, comes in.
In simple terms, is how we move an object from one point to another in 3D space.
In , every object — whether it’s a mesh, light, or camera — has a .position property, which is a special object called a THREE.Vector3. This object contains three values:
These values define where an object is in your 3D world.
Before we start shifting things around, let’s revisit how the coordinate system works in Three.js:
And a few important rules to remember:
Once you’ve got this in your head, you’re ready to start positioning with confidence.
So, how do we actually position something? There are two common ways to update the .position of an object.
cube.position.x = 3; // Move 3 units right
cube.position.y = 2; // Move 2 units up
cube.position.z = -5; // Move 5 units away from the cameraA little cleaner and faster if you're updating all three at once:
cube.position.set(3, 2, -5); // Move to (3, 2, -5)Sometimes, you don’t want to jump to a new position — you just want to nudge an object from wherever it currently is. You can do that by adding or subtracting values.
Let’s move a cube 2 units left and 1 unit up from wherever it already is:
cube.position.x -= 2; // Move left
cube.position.y += 1; // Move upThis technique is super useful for animations or interactivity — when objects need to move smoothly or step-by-step.
In real scenes, you'll have more than one object — and you’ll often want to space them out meaningfully.
Let’s say you’re building a scene with two cubes, and you want them side-by-side:
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
cube1.position.set(-1, 0, 0); // Move cube1 to the left
const cube2 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
cube2.position.set(1, 0, 0); // Move cube2 to the right
scene.add(cube1);
scene.add(cube2);Each object’s position is independent — but you control how far apart they are by adjusting their coordinates.
Now imagine you want to move multiple objects as one. You can group them using THREE.Group. A group acts like a container. You can move the group, and everything inside it follows.
const group = new THREE.Group();
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
cube1.position.set(-1, 0, 0);
const cube2 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
cube2.position.set(1, 0, 0);
group.add(cube1);
group.add(cube2);
group.position.set(0, 2, 0); // Move the entire group up by 2 units
scene.add(group);This is great for organizing your scene and for creating parent-child relationships, like a solar system or a robot with limbs.
Here are a few things to watch out for as you start playing with position:
Let’s put your new knowledge into action:
Position is the most intuitive transformation — but it’s also one of the most powerful.
Once you’re confident placing objects exactly where you want them, you open the door to layout design, animations, interactivity, and storytelling.
Next up, we’ll explore — how to make your objects spin, tilt, and turn in space. Let’s go make things rotate!
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.