如何在three.js中正确镜像SkinnedMesh实现左右手模型转换？

针对你遇到的骨骼扭曲、IK失效、光照异常等问题，核心原因是只处理了顶点或骨骼的单一维度，没有同步修正蒙皮权重、骨骼绑定矩阵和IK配置。以下提供两种可靠的解决方案：

方案一：Blender端修正（最稳定，推荐） #

直接在模型源文件上做镜像，避免代码层面的复杂处理：

1. 导入右手glTF模型后，全选网格+骨骼（按A），按Ctrl+A依次应用位置、旋转、缩放，清空所有变换数据
2. 切换到编辑模式（Tab），全选顶点（A），按Ctrl+M选择Z轴（对应你的左右方向）完成顶点镜像
3. 切换到姿态模式，全选骨骼（A），按Ctrl+M选择Z轴镜像骨骼位置与旋转
4. 选中网格，打开右侧属性面板→蒙皮，点击镜像蒙皮权重，勾选「翻转名称」（自动把Right开头的骨骼名改为Left，保证权重对应正确）
5. 检查模型无扭曲后，导出glTF时勾选「应用变换」，导出左手模型

你之前Blender导出后IK乱晃，就是因为没做镜像蒙皮权重，导致骨骼与网格的绑定关系错乱。

方案二：Three.js代码端处理 #

如果不想修改源模型，可通过代码同步处理顶点、骨骼、绑定矩阵和IK：

// 假设Z轴为左右方向，传入右手模型根节点
function mirrorToLeftHand(handRoot) {
  const mirrorMatrix = new THREE.Matrix4().makeScale(1, 1, -1);

  // 1. 翻转网格顶点、法线与UV
  handRoot.traverse(child => {
    if (!child.isSkinnedMesh) return;
    const geom = child.geometry;

    // 翻转顶点Z坐标
    const positions = geom.attributes.position;
    for (let i = 0; i < positions.array.length; i += 3) {
      positions.array[i + 2] *= -1;
    }
    positions.needsUpdate = true;

    // 翻转法线，解决光照异常
    if (geom.attributes.normal) {
      const normals = geom.attributes.normal;
      for (let i = 0; i < normals.array.length; i += 3) {
        normals.array[i + 2] *= -1;
      }
      normals.needsUpdate = true;
    } else {
      geom.computeVertexNormals();
    }

    // 翻转UV，避免纹理镜像
    if (geom.attributes.uv) {
      const uvs = geom.attributes.uv;
      for (let i = 0; i < uvs.array.length; i += 2) {
        uvs.array[i] = 1 - uvs.array[i];
      }
      uvs.needsUpdate = true;
    }
  });

  // 2. 镜像骨骼并修正矩阵
  handRoot.traverse(child => {
    if (!child.isBone) return;
    // 应用镜像到骨骼世界矩阵
    child.matrixWorld.multiply(mirrorMatrix);
    // 分解矩阵为位置、旋转、缩放，避免负缩放留在层级中
    child.matrix.copy(child.matrixWorld);
    if (child.parent?.isBone) {
      child.matrix.multiply(child.parent.matrixWorldInverse);
    }
    child.matrix.decompose(child.position, child.quaternion, child.scale);
    child.scale.z = Math.abs(child.scale.z);
    child.updateMatrixWorld(true);
  });

  // 3. 更新蒙皮绑定矩阵
  handRoot.traverse(child => {
    if (!child.isSkinnedMesh) return;
    const skeleton = child.skeleton;
    for (let i = 0; i < skeleton.bones.length; i++) {
      const bone = skeleton.bones[i];
      // 重新计算绑定矩阵（初始骨骼姿态的逆矩阵）
      skeleton.boneInverses[i] = new THREE.Matrix4().copy(bone.matrixWorld).invert();
    }
    skeleton.update();
    child.normalizeSkinWeights();
  });

  // 4. 修正IK（以CCDIKSolver为例）
  // 假设你的IK目标是ikTarget，链骨骼为ikChainBones
  // ikTarget.position.z *= -1;
  // 如果IK方向异常，可翻转链骨骼的旋转或调整solver的参数
}

关键注意点： #

• 不能直接对模型整体缩放(1,1,-1)：负缩放会破坏骨骼层级的正交矩阵，导致IK计算出错
• 仅翻转骨骼位置/旋转不够：必须同步更新蒙皮绑定矩阵，否则网格与骨骼的绑定关系会错乱
• 法线必须翻转：否则模型会出现光照发黑的异常

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