Rotation guide

Three.js Rotating Object Example

Most rotation bugs come from mixing up local axis rotation, world axis rotation, and pivot rotation. Start by deciding which one you need.

Fast rule: Rotate the mesh for spin. Rotate a parent Group for orbit. Use lookAt when the object needs to face something.

Rotate around the object's own center

This is the common product viewer and loading animation pattern. The mesh rotates around its local axes.

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function animate() {
  mesh.rotation.y += 0.01;
  mesh.rotation.x += 0.003;
  renderer.render(scene, camera);
}
See Torus Knot Example

Rotate around a pivot point

Use a Group when the object should orbit around another point. The mesh is offset inside the group, then the group rotates.

const pivot = new THREE.Group();
scene.add(pivot);

const satellite = new THREE.Mesh(geometry, material);
satellite.position.x = 2.2;
pivot.add(satellite);

function animate() {
  pivot.rotation.y += 0.008;
  renderer.render(scene, camera);
}

Which rotation should you use?

Goal Object to rotate Common search phrase
Spin a product model Mesh or loaded scene three js rotate object
Orbit one object around another Parent Group three js rotate object around point
Keep an object facing the camera Object with lookAt three js object face camera
Rotate imported GLB Loaded gltf.scene three js rotate gltf object

Notes from the TorusKnot demo

The examples page uses TorusKnotGeometry because its curved surface makes lighting and normal issues visible. If the knot appears at the edge of the canvas, the camera is usually off-center or missing a lookAt call.

camera.position.set(0, 0.35, 5.2);
camera.lookAt(0, 0, 0);
mesh.rotation.y += 0.01;

FAQ

Why does my object rotate around a strange point?

The geometry origin or parent transform is probably not where you expect. Put the mesh in a Group, offset the mesh, and rotate the group when you need a controlled pivot.

How do I rotate a loaded GLB?

Rotate the loaded scene returned by GLTFLoader, or wrap it in a Group and rotate the group. Use the GLB viewer first if you need to inspect scale and bounds.

Should rotation use degrees or radians?

Three.js rotations use radians. Use THREE.MathUtils.degToRad when a design note or UI control gives degrees.

Related Three.js Lab pages

Live Rotation Examples GLTFLoader Example Fit Camera to Object

Sources