17370845950

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()（如果用了光照），否则法线不更新会导致明暗异常。

立即学习“前端免费学习笔记（深入）”；