Three.js v93中FBX角色绑定BVH动画后拉伸及动画异常问题求助

Hey Peter，我碰到过不少类似的Three.js绑定BVH动画的问题，你的角色拉伸、动画异常大概率是下面几个原因导致的，给你对应的解决思路：

1. 骨骼命名/层级不匹配（最常见元凶） #

BVH文件的骨骼名称、父子层级结构必须和FBX模型的骨骼完全一致——包括大小写、命名规则（比如FBX里是"Hips"，BVH里写成"hip"就会匹配失败）。一旦两者骨骼对应不上，动画驱动时就会出现骨骼错位、模型拉伸变形的情况。

解决建议：

• 用Blender这类3D工具打开FBX和BVH文件，对比两者的骨骼树结构和每个骨骼的名称，确保完全对齐。
• 如果命名不匹配，要么用BVH编辑工具修改BVH的骨骼名，要么在建模软件里重命名FBX的骨骼来适配BVH；也可以在代码里手动做骨骼映射，示例如下（适配v93版本）：

// 先收集FBX的所有骨骼，按名称存为对象
const fbxBoneMap = {};
this._fbxObj.traverse(child => {
  if (child.isBone) {
    fbxBoneMap[child.name] = child;
  }
});

// 遍历BVH骨骼，替换为FBX中对应名称的骨骼
result.skeleton.bones.forEach((bvhBone, index) => {
  const matchingFbxBone = fbxBoneMap[bvhBone.name];
  if (matchingFbxBone) {
    result.skeleton.bones[index] = matchingFbxBone;
  }
});
// 更新骨骼关系
result.skeleton.update();

2. 骨骼绑定的顺序/方式错误 #

你代码里直接替换_fbxObj.skeleton，又单独遍历SkinnedMesh执行bind()，这很容易导致绑定冲突。FBX模型加载后本身已经自带绑定好的skeleton，直接替换或重复绑定会打乱骨骼和蒙皮的权重关联。

解决建议：

• 不要替换FBX原有的skeleton，而是用BVH的动画数据驱动FBX自身的骨骼。修正后的核心代码如下：

let loader = new THREE.BVHLoader();
loader.load("scenes/test3d_caveman/graphics/29-5/cavemanCharaacter_BVH/cavemanCharaacter/01_01.bvh", (result) => {
  // 关键：用FBX自身的skeleton创建动画混合器
  const mixer = new THREE.AnimationMixer(this._fbxObj);
  this._mixers.push(mixer);
  
  // 直接用BVH的clip关联FBX的skeleton（前提是骨骼命名匹配）
  mixer.clipAction(result.clip, this._fbxObj.skeleton)
    .setEffectiveWeight(1.0)
    .play();
  
  // 不需要手动bind SkinnedMesh，FBX加载后已经完成绑定
});

3. Three.js v93的版本兼容性问题 #

v93是2018年的老版本，BVHLoader和FBXLoader的兼容性存在一些已知问题，比如两者的骨骼空间（局部空间/世界空间）定义不一致，会导致动画驱动时骨骼位置偏移。

解决建议：

• 优先考虑升级到稍新的稳定版本（比如v100+，不用太新避免其他代码兼容问题），新版本对BVH和FBX的绑定支持更完善。
• 如果不能升级，可以尝试将BVH骨骼转换为局部空间适配FBX：

// 加载BVH后，将骨骼转换为局部空间
result.skeleton.bones.forEach(bone => {
  if (bone.parent) {
    bone.matrixWorld.multiplyMatrices(bone.parent.matrixWorldInverse, bone.matrixWorld);
    bone.matrix.copy(bone.matrixWorld);
    bone.matrix.decompose(bone.position, bone.quaternion, bone.scale);
  }
});
result.skeleton.update();

4. 根骨骼初始状态不匹配 #

FBX模型的根骨骼和BVH的根骨骼初始位置、旋转、缩放不一致，也会导致整体模型拉伸错位。

解决建议：

• 加载BVH后，将BVH根骨骼的状态和FBX根骨骼对齐：

const fbxRootBone = this._fbxObj.skeleton.bones[0];
const bvhRootBone = result.skeleton.bones[0];

bvhRootBone.position.copy(fbxRootBone.position);
bvhRootBone.quaternion.copy(fbxRootBone.quaternion);
bvhRootBone.scale.copy(fbxRootBone.scale);
result.skeleton.update();

内容的提问来源于stack exchange，提问作者Peter Wraae Marino