使用Aframe的gltf-model加载GLB后如何获取模型Skeleton？

问题根源 #

A-Frame的gltf-model组件是异步加载模型的，直接在控制台访问实体的object3D可能因模型未加载完成找不到Skeleton；另外A-Frame会对GLTF场景做层级包装，需要正确遍历结构找到绑定骨骼的SkinnedMesh才能获取Skeleton对象。

实现步骤 #

1. 监听模型加载完成事件

必须等待模型完全加载后再操作，通过model-loaded事件确保时机正确：

<a-entity id="avatar" gltf-model="#my-glb-model"></a-entity>

const avatarEntity = document.querySelector('#avatar');
avatarEntity.addEventListener('model-loaded', (e) => {
  const model = e.detail.model; // 获取Three.js层面的模型对象（Scene/Group）
  extractSkeletonAndBindBVH(model);
});

2. 遍历模型层级提取Skeleton

GLB模型的骨骼通常附着在SkinnedMesh上，递归遍历找到目标网格：

function extractSkeletonAndBindBVH(model) {
  let skinnedMesh = null;
  let skeleton = null;

  // 遍历模型子对象，找到第一个SkinnedMesh（可根据自身模型结构调整）
  model.traverse((obj) => {
    if (obj.isSkinnedMesh) {
      skinnedMesh = obj;
      skeleton = obj.skeleton;
      return; // 找到后终止遍历
    }
  });

  if (!skeleton) {
    console.error('未检测到模型骨骼');
    return;
  }

  // 此时可在控制台查看骨骼数据
  console.log('模型骨骼:', skeleton);

  // 加载BVH并绑定动画
  loadAndBindBVH(skeleton, skinnedMesh);
}

3. 加载BVH并实现动画重定向

利用Three.js原生的BVHLoader和SkeletonUtils完成动画重定向（A-Frame底层兼容Three.js API，可直接使用）：

async function loadAndBindBVH(skeleton, skinnedMesh) {
  const bvhLoader = new THREE.BVHLoader();
  // 替换为你的BVH文件路径
  const bvhData = await bvhLoader.loadAsync('./assets/animation.bvh');

  // 重定向BVH动画到目标骨骼
  const mixer = new THREE.AnimationMixer(skinnedMesh);
  const clip = THREE.SkeletonUtils.retarget(bvhData.clip, skeleton, {
    preserveHipPosition: true,
    preserveHipRotation: true
  });

  const action = mixer.clipAction(clip);
  action.play();

  // 绑定A-Frame渲染循环，更新动画混合器
  avatarEntity.sceneEl.addEventListener('tick', (time, delta) => {
    mixer.update(delta / 1000); // 将毫秒转换为秒
  });
}

关键注意事项 #

• 若使用CDN版本的A-Frame，基础Three.js库已内置，但BVHLoader和SkeletonUtils可能需要额外引入，可通过扩展A-Frame组件或直接加载对应Three.js模块补充。
• 若模型包含多个SkinnedMesh，需根据实际结构调整遍历逻辑，定位到需要绑定动画的目标网格。
• 动画重定向时，需确保BVH骨骼命名与GLB模型骨骼命名匹配；若命名不一致，需手动创建骨骼映射表来对应层级关系。

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