Three.js中模型旋转中心默认在几何体局部原点(0,0,0)，即建模软件导出时的轴心点，未必与几何中心重合；可通过建模软件重置原点、geometry.center()居中或父级Group包装三种方式调整。
Three.js 中模型旋转中心默认在哪
Three.js 里所有 Object3D（包括 Mesh）的旋转中心就是它的 position 坐标，也就是世界坐标系中的原点偏移量。模型自身几何体（geometry）的顶点数据默认以局部原点（0, 0, 0）为基准，这个原点通常就是建模软件导出时的“轴心点”。如果你没在 Blender/Maya 里重置过原点，它很可能不在模型几何中心，导致旋转时“绕着奇怪的地方转”。
修改旋转中心的三种常用方式
本质是让模型围绕你想要的点旋转，有三个等效但适用场景不同的操作路径：
-
方式一（推荐）：导出前在建模软件中重置轴心点 —— 在 Blender 里选中模型 →
Object→Set Origin→Origin to Geometry或Origin to 3D Cursor，再导出 glTF。这是最干净、无 runtime 开销的做法。 -
方式二：用
geometry.center()居中几何体原点 —— 适用于已加载的模型且允许修改原始 geometry：mesh.geometry.center(); // 将 geometry 的顶点整体平移，使包围盒中心落到 (0,0,0) mesh.position.set(0, 0, 0); // 确保 mesh 本身不额外偏移
注意：这会修改顶点数据，若 geometry 被多个 mesh 共享，会影响所有实例。
-
方式三：用空父容器调整层级中心 —— 不动 geometry，把模型包进一个
Group，再平移子对象使其视觉中心对齐父级原点：const group = new THREE.Group(); group.add(mesh); // 假设你想让 mesh 绕其 AABB 中心旋转 const box = new THREE.Box3().setFromObject(mesh); const center = box.getCenter(new THREE.Vector3()); mesh.position.copy(center.negate()); // 把 mesh 自身原点移到 group 原点 // 此后对 group.rotation 操作，就等效于绕几何中心旋转
glTF 模型加载后发现轴心偏移怎么办
常见现象：用 GLTFLoader 加载后，mesh.position 是 (0,0,0)，但旋转明显不对——大概率是 glTF 中节点的 translation 或 mesh.primitive.attributes.POSITION 的 offset 没对齐。此时不能直接改 mesh.position，否则破坏层级关系。正确做法是：
- 先遍历 scene 找到目标
Mesh，检查它的parent是否是Object3D或Group - 如果父对象有
position非零，或本身是 glTF 场景图里的Node带 transform，优先用方式三（加 wrapper group）解耦 - 避免调用
mesh.geometry.translate(x,y,z)直接平移顶点，除非你确认该 geometry 没被复用且不需要保持原始坐标语义 - 调试时可用
new THREE.AxesHelper(1)和new THREE.Box3().setFromObject(mesh).getCenter()可视化当前中心位置
WebGL 渲染层没有“轴心点”概念
需要明确：HTML5 + WebGL 本身不存储或识别“轴心点”，所有旋转都是矩阵乘法作用于顶点坐标。所谓“改轴心”，只是通过调整模型局部坐标系原点（geometry）、对象位置（position）或层级结构（parent/group），让最终变换结果符合预期。因此没有统一 API 如 mesh.setPivot(x,y,z)，一切都要靠组合平移+旋转+父子关系来模拟。最容易忽略的是：修改了 geometry 后忘记调用 mesh.geometry.computeVertexNormals()（如果用了光照），否则法线不更新会导致明暗异常。
立即学习“前端免费学习笔记（深入）”；
