在3D场景开发中，模型层级错误通常表现为：单独旋转某个部件时一切正常，但把它挂到另一个节点下之后，坐标突然错乱；或者删掉一个看似无关的父节点后，整个模型消失。这类问题的根源往往不是渲染引擎计算错误，而是父子关系没有按照场景树规则处理。下面这张图展示了典型的父子节点层级结构，父节点的变换会向下传递到子节点。
层级关系与坐标变换的本质
所有主流3D引擎都使用场景图来组织对象。一个Object3D或GameObject可以有多个子节点，每个子节点记录的位置、旋转、缩放都是相对父节点的局部变换。最终渲染时，引擎会逐层计算世界矩阵。简单来说，子节点的世界矩阵等于父节点的世界矩阵乘以子节点的局部矩阵。这意味着父节点移动时，子节点会跟着移动；父节点旋转时，子节点也会围绕父节点的轴心旋转。
很多人在Three.js里创建一个子节点，然后设置position，会误以为这就是世界坐标。实际上，如果父节点有位置偏移或缩放，子节点的最终位置和形状都会受到影响。比如父节点x坐标为10，子节点局部x坐标为5，在不考虑缩放的情况下，子节点世界x是15。可一旦父节点在x轴缩放2倍，子节点世界x就会变成20。缩放不仅影响位置，还会让子节点的旋转产生斜切效果，尤其是父节点出现非均匀缩放时，子节点旋转后可能变形，这是导入外部模型后最常见的层级问题之一。
理解这一点后，就能解释为什么很多团队在调整模型时反复修改子节点位置仍然对不齐：他们是在局部坐标里纠正世界坐标的偏差。正确做法是先检查父节点的变换，再决定应该在哪个层级调整。Three.js提供了getWorldPosition、getWorldQuaternion和getWorldScale这些方法，可以随时查看对象的世界变换。
常见层级错误的表现与原因
第一种典型错误是父节点旋转后，子节点绕着一个远处的点画圈。这个表现几乎总是说明子节点的局部坐标与父节点的轴心不重合。举例来说，一个轮胎模型被挂到车轴节点下，轮胎局部坐标是(0,0,0)时，旋转车轴它会在原地打转；但如果轮胎局部坐标被设成了(0.5,0,0)，旋转车轴时轮胎就会绕车轴中心转圈，看起来像轮子飞出去。建模软件里对象原点位置不同会直接导致这种结果。
第二种错误是父级缩放异常。假设一个角色模型的根节点带缩放，而某个装饰部件作为子节点还带有旋转，最终这个装饰部件可能被拉伸成奇怪的形状。原因是缩放和旋转在矩阵乘法中不满足交换律，父级先缩放再子级旋转，与子级旋转后再缩放的效果不同。如果必须使用父级缩放，应该尽量保持均匀缩放，或者把需要独立旋转的子节点从缩放层级中移出来。
下面用一个Three.js例子验证缩放对子节点位置的影响：
const parent = new THREE.Object3D(); const child = new THREE.Mesh(geometry, material); parent.add(child); parent.scale.set(2, 2, 2); parent.position.set(10, 0, 0); // 你期望子节点世界位置是 (5, 0, 0)，但实际不是 child.position.set(5, 0, 0); const worldPos = new THREE.Vector3(); child.getWorldPosition(worldPos); console.log(worldPos.x); // 输出 20，而不是 15
第三种错误是删除父节点或重新挂载时，模型直接跳到世界原点。很多人会用remove再加入新的父级，但忘记子节点的局部坐标不会自动转换。比如一个角色原本在场景中坐标为(100,0,50)，把它从旧父级移除并添加到新父级后，它的局部坐标仍然是旧父级下的值，世界位置立刻改变。解决这个问题要用attach方法或手动转换世界坐标。
如何安全调整父子关系
Three.js的Object3D提供了attach方法，专门用来在更换父级时保持对象的世界变换不变。attach内部会先计算对象的当前世界矩阵，再根据新父级的世界矩阵重新计算局部坐标。一个常见的使用场景是：把某个武器模型从角色左手节点换到右手节点，同时不想改变武器在场景中的位置和朝向。
// 假设 weapon 当前是 leftHand 的子级，需要挂到 rightHand 下 // 错误做法：remove 后 add，武器会跳回局部原点 leftHand.remove(weapon); rightHand.add(weapon); // 正确做法：使用 attach 保持世界变换 rightHand.attach(weapon);
如果使用的引擎没有attach方法，可以先读取对象的世界位置、世界旋转和世界缩放，再在挂到新父级后进行转换。思路是：把世界位置转换到新父级的局部空间，再用新父级世界旋转的逆矩阵去修正旋转。虽然手动计算比较繁琐，但原理与attach一致。下面给出Three.js中手动转换的简化实现，帮助理解attach背后做了什么：
const worldPos = new THREE.Vector3(); const worldQuat = new THREE.Quaternion(); weapon.getWorldPosition(worldPos); weapon.getWorldQuaternion(worldQuat); leftHand.remove(weapon); rightHand.add(weapon); rightHand.updateWorldMatrix(true, false); weapon.position.copy(rightHand.worldToLocal(worldPos.clone())); weapon.quaternion.copy( rightHand.getWorldQuaternion(new THREE.Quaternion()).invert().multiply(worldQuat) );
除了在代码里调整，很多层级错误最好在建模软件里提前解决。比如在Blender中导出GLB前，可以对对象执行清空父级并保持变换，把轴心归一化，或者应用缩放和旋转。这样可以减少场景树中不必要的中间节点，降低运行时调整的成本。
排查层级问题的实用方法
遇到层级错误时，第一步是打印节点的世界坐标和局部坐标。如果两者差异很大，并且父节点确实有非零变换，问题多半出在父级。可以用下面的代码快速检查：
const pos = new THREE.Vector3();
mesh.getWorldPosition(pos);
console.log('世界坐标:', pos);
console.log('局部坐标:', mesh.position);
console.log('父级世界矩阵:', mesh.parent.matrixWorld);
第二步是逐层检查场景树。很多模型从DCC工具导出后带有大量空节点和中间容器，每个节点的旋转缩放都可能叠加。可以在浏览器的Three.js调试面板或编辑器中展开层级，把可疑的中间节点临时隐藏，或者把它的旋转缩放设为默认值，观察子节点是否恢复正常。这样可以快速定位是哪一层引入了异常变换。
第三步是检查模型的原点位置。如果某个部件需要绕自身中心旋转，但它的局部坐标偏离原点，最好在建模软件中把原点移动到几何中心，而不是在代码里反复偏移。有些时候，出于动画需要故意保留偏移轴心，比如门绕合页旋转，但这种情况应当明确标记，避免后续维护时误改。
层级太深也会影响性能和调试效率。每个节点在更新矩阵时都会遍历子节点，层级越深，计算量越大。如果能合并静态装饰部件，就合并；如果不同部件需要独立动画，就保留必要的父级容器。合理的层级设计既能避免坐标错误，也能提升运行时性能。
总结与最佳实践
处理3D模型层级错误的核心，是分清局部坐标和世界坐标。父节点的平移、旋转、缩放会传递给所有子节点，子节点的position永远不是世界位置。调整子节点之前，先看父节点是否有缩放或旋转；更换父级时，优先使用attach等保持世界变换的API；排查问题时，从世界坐标和局部坐标的差异入手，逐层定位异常节点。
在建模软件阶段，尽量保持每个对象的原点在合理位置，避免不必要的父级嵌套。导出时应用变换或清空父级，可以减少引擎里的层级复杂度。如果模型需要多层级控制，建议用清晰的命名规范标记父子结构，并在代码注释中说明哪些节点有缩放或旋转限制。
层级关系不是越少越好，也不是越多越灵活。重点是让父级承担合理的变换职责，子级只负责相对父级的局部变化。按照这个思路调整，大多数位置偏移、旋转画圈和缩放变形问题都能快速解决。