Rotation follows local origin
When a Three.js mesh rotates strangely, the animation loop is rarely the cause. A mesh rotates around its local origin. If the geometry was authored away from that origin, the visible object will swing in an arc instead of spinning in place. Imported assets make this common because modeling tools allow pivots, origins, and visible geometry to be arranged independently.
The first diagnostic step is to show axes or compute a bounding box. If the box center is far from the object's local position, you have a pivot problem. The fix depends on whether you want to change the geometry, change the scene graph, or preserve the original asset structure.
Choose the right fix
If the mesh should spin around its own visual center and you control the geometry, `geometry.center()` can move vertices so they surround the local origin. This is simple for generated geometry and one-off assets, but it mutates geometry data. It may not be appropriate for skinned meshes, shared geometry, or imported hierarchies where original transforms matter.
If the object should orbit around another point, create a parent Group at the pivot and place the mesh offset inside it. Rotate the group, not the mesh. This pattern is clear, reversible, and useful for planets, product turntables, UI handles, and mechanical parts.
Imported models need care
A GLB scene may contain multiple meshes, bones, cameras, and nested transforms. Centering every geometry can break the author's hierarchy. For imported models, it is often safer to wrap the whole `gltf.scene` in a parent group, compute its Box3 center, and offset the scene inside the wrapper. The wrapper becomes the normalized object that your viewer rotates.
This wrapper strategy preserves the asset while giving your UI a predictable pivot. It also pairs nicely with camera fitting because the same bounding-box center can inform both the wrapper offset and the OrbitControls target.
Make the pivot visible while debugging
A tiny AxesHelper placed at the intended pivot can save a lot of guessing. Add it only in debug mode. If the object rotates around the helper, your pivot is correct. If it sweeps around the helper, the child offset or geometry center still needs attention.
Once the fix is working, remove helper visuals or hide them behind a debug toggle. Production viewers should feel clean, but development tools should make invisible coordinate-space problems visible.
When this guide is the right tool
Use this guide when the problem is specific enough that a broad Three.js tutorial would waste time. The focus here is rotation in a real browser page: what to check first, what to measure, and what to avoid before the scene becomes harder to reason about.
The practical rule is simple: A mesh rotates around its local origin, not around the visible center of its geometry. If that sentence describes the scene in front of you, treat the article as a checklist. Read the explanation, copy the smallest useful code pattern, then test the result in a narrow mobile viewport and a wide desktop viewport before adding more polish.
Common mistake to avoid
The common mistake is treating Fix Three.js rotation around the wrong pivot as a visual tweak instead of a scene-system decision. Three.js problems often look like one broken line of code, but the actual issue is usually a chain: asset assumptions, renderer settings, camera math, material setup, interaction state, and page layout all meet inside the canvas.
That is why the safest fix is incremental. Start from a known-good scene, change one variable, and keep a visible diagnostic while testing. Use a parent Group when you need a deliberate orbit pivot. When the scene works, remove temporary helpers and leave behind only the checks that make sense for users.
Publishing check
Before publishing, run the scene through three questions. Does the page remain useful if WebGL fails or the asset loads slowly? Does the same scene still read clearly on a phone? Can another developer understand the important settings without reverse-engineering the whole file?
The last pass should be boring on purpose: verify canvas size, console errors, mobile performance, source links, internal links, and the related guide path. Center geometry only when changing the asset data is acceptable. If any answer is fuzzy, fix that before introducing a new effect or a larger asset.
Wrapper pivot pattern
const wrapper = new THREE.Group();
const box = new THREE.Box3().setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
model.position.sub(center);
wrapper.add(model);
scene.add(wrapper);
function animate() {
wrapper.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}FAQ
When should I use Fix Three.js rotation around the wrong pivot?
Use it when your Three.js scene has a focused rotation problem and you need a practical checklist before adding more visual polish.
Is the code snippet production-ready?
Treat the snippet as a clear starting point. Test it in your scene, adapt naming and paths, and verify behavior on mobile hardware before publishing.
What should I check after applying this guide?
Run the scene through mobile sizing, console errors, loading states, source links, and related guide paths so the page remains useful even when assets or WebGL fail.