Three.js如何让旋转轴始终保持在世界/物体中心？

一、锁定到世界中心 #

如果使用的是OrbitControls（这类3D查看器教程的常用控制器），默认右键平移会改变旋转中心——因为平移操作会自动调整控制器的target属性。要固定到世界中心，只需直接指定target为世界原点，并修改平移模式避免其被改动：

// 初始化控制器后配置
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 固定旋转中心到世界原点
controls.target.set(0, 0, 0);
// 启用屏幕空间平移，防止平移时修改target
controls.screenSpacePanning = true;
// 按需调整平移速度
controls.panSpeed = 0.5;

// 必须调用update让设置生效
controls.update();

二、锁定到物体中心 #

如果要以加载的3D模型为旋转中心，先计算模型的包围盒中心，再将控制器的target指向该点：

单个模型对象 #

const model = yourLoadedModel; // 替换为你的模型实例
// 计算模型包围盒
model.geometry.computeBoundingBox();
const modelCenter = model.geometry.boundingBox.getCenter(new THREE.Vector3());

// 设置旋转中心为模型中心
controls.target.copy(modelCenter);
controls.update();

模型组（多个物体组成的Group） #

如果模型是多个物体的组合，需要计算整个组的包围盒：

const modelGroup = yourModelGroup; // 替换为你的模型组实例
const groupBox = new THREE.Box3().setFromObject(modelGroup);
const groupCenter = groupBox.getCenter(new THREE.Vector3());

controls.target.copy(groupCenter);
controls.update();

同样要开启screenSpacePanning = true，确保平移操作不会修改旋转中心。

内容的提问来源于stack exchange，提问作者Luca Phillips