如何调整Three.js中物体的旋转支点？汉堡模型旋转异常修复

核心原因 #

模型的几何中心与Three.js的坐标原点不重合，导致旋转时以原点（表现为左上角）为支点，而非自身中心。

具体修复方案 #

方案1：直接修正模型几何中心（推荐） #

如果是自定义几何或加载后的模型，调用几何对象的center()方法，自动将几何中心对齐到坐标原点：

// 假设汉堡模型的网格对象是hamburgerMesh
hamburgerMesh.geometry.center();

执行后，模型的所有顶点会被平移，让几何包围盒中心与原点重合，之后设置hamburgerMesh.rotation.y = Math.PI/4;（对应45度），就能实现绕自身中心的Y轴旋转。

方案2：用Group容器间接实现 #

如果不想修改原始几何的顶点数据，可以把模型放到Group容器中，先抵消模型自身的偏移，再旋转容器：

// 创建容器组
const burgerGroup = new THREE.Group();
// 计算模型的包围盒与中心
const boundingBox = new THREE.Box3().setFromObject(hamburgerMesh);
const modelCenter = boundingBox.getCenter(new THREE.Vector3());
// 将模型平移到容器组的中心（抵消自身偏移）
hamburgerMesh.position.sub(modelCenter);
// 把模型加入容器，再将容器添加到场景
burgerGroup.add(hamburgerMesh);
scene.add(burgerGroup);
// 旋转容器即可实现绕中心旋转
burgerGroup.rotation.y = Math.PI/4;

方案3：建模阶段提前修正 #

如果模型是从Blender、C4D等建模软件导出的，直接在软件中将模型的原点设置为面包的中心，导出后导入Three.js，模型自带正确的旋转支点，无需额外代码处理。

注意事项 #

• 若模型是由多个子网格组成的复合结构，要确保对整个模型（或父容器）计算包围盒，避免只处理单个子部件。
• 调用center()方法后，模型的position会自动调整，无需手动修改位置。

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