Transformations

Transformations

Every Three.js object has three transform properties that control its position, orientation, and size in the world.

Position

position is a Vector3. Move objects with set(x, y, z) or assign individual axes.

mesh.position.set(2, 1, -3);
mesh.position.x = 5; // individual axis

Rotation

rotation is an Euler (angles in radians). Three.js uses a right-hand coordinate system.

mesh.rotation.y = Math.PI / 4; // 45° around Y axis
mesh.rotation.set(0, Math.PI, 0); // 180° flip

Convert degrees: radians = degrees * (Math.PI / 180)

Scale

scale is a Vector3, defaulting to (1, 1, 1). Values < 1 shrink, > 1 grow.

mesh.scale.set(2, 0.5, 2); // wide and flat
mesh.scale.x = 3;          // stretch horizontally only

Chaining

Transformations combine: a mesh at position (0, 2, 0) scaled by (2, 2, 2) appears large and elevated.

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
);
mesh.position.set(1, 2, 0);
mesh.rotation.y = Math.PI / 4;
mesh.scale.set(1.5, 1.5, 1.5);

Your Task

Implement transformMesh(px, py, pz, ry, sx) that:

• Creates a BoxGeometry(1, 1, 1) with MeshNormalMaterial
• Sets position to (px, py, pz)
• Sets rotation.y to ry
• Sets scale.x to sx
• Returns the mesh