Three.js问题：导入GLTF模型居中后旋转轴异常

核心原因 #

你的模型看起来在坐标轴中心，但GLTF的根节点（loadedModel.scene）的原点未必和模型几何中心重合。模型的Mesh可能是根节点的子对象，且子Mesh自身存在位置偏移，导致旋转根节点时，绕的是根节点原点而非模型实际中心。

具体解决步骤 #

你需要先计算模型的几何中心，然后将旋转对象的原点与该中心对齐，两种可行方案：

方案1：直接修正Mesh的几何顶点

遍历模型所有Mesh，平移几何体顶点让模型中心与原点重合，再重置根节点位置：

import { Box3, Vector3 } from 'three';

// 在模型加载完成后执行
const box = new Box3().setFromObject(loadedModel.scene);
const center = box.getCenter(new Vector3());

loadedModel.scene.traverse(child => {
  if (child.isMesh) {
    // 平移几何体顶点，让模型中心回到原点
    child.geometry.translate(-center.x, -center.y, -center.z);
  }
});
// 重置根节点位置到原点
loadedModel.scene.position.set(0, 0, 0);

// 此时再旋转根节点就正常了
// loadedModel.scene.rotation.y += 0.01;

方案2：用父容器包裹模型（更灵活）

创建一个空Group作为父容器，调整模型位置让其中心与父容器原点重合，之后旋转这个父容器：

import { Box3, Vector3, Group } from 'three';

// 模型加载完成后
const box = new Box3().setFromObject(loadedModel.scene);
const center = box.getCenter(new Vector3());

const parentGroup = new Group();
parentGroup.add(loadedModel.scene);
// 让模型中心与父容器原点重合
loadedModel.scene.position.set(-center.x, -center.y, -center.z);

// 将parentGroup添加到场景中，之后旋转parentGroup
// parentGroup.rotation.y += 0.01;

为什么之前的方法无效？ #

你尝试的旧版geometry相关方法可能只处理了单个Mesh，没考虑GLTF模型的层级结构——根节点scene可能包含多个子对象，直接旋转根节点时，子对象的位置偏移会导致旋转轴偏离模型中心。必须先确保旋转对象的原点与模型几何中心完全对齐，才能得到预期的旋转效果。

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