p5.js中GLB骨骼模型转带关键帧普通模型的实现问询

可行性说明 #

完全可行，本质是将骨骼动画的每一帧顶点变换预先计算并烘焙到网格的关键帧中，把蒙皮网格（SkinnedMesh）转成一系列静态网格的序列动画。

在线工具方案 #

• Blender：最常用的可视化解决方案，操作步骤清晰：

  1. 导入GLB模型，确认骨骼动画正常加载
  2. 选中模型进入对象模式，执行对象 > 应用 > 所有变换
  3. 切换到动画模式，打开属性栏动画标签下的烘焙动画面板
  4. 设置烘焙的帧范围（比如从动画起始帧到结束帧），勾选烘焙到关键帧和清除约束，点击烘焙
  5. 导出时选择GLB/GLTF格式，此时导出的模型就是带关键帧的普通网格，不含骨骼蒙皮数据

• glTF Transform：可通过CLI或在线界面处理，核心用bake命令将蒙皮动画转为顶点关键帧：

  gltf-transform bake input.glb output.glb --attribute position
  

  工具会自动计算每一帧的顶点位置，生成无骨骼的关键帧动画模型，导出后可直接在p5.js中加载渲染。

代码实现方案（基于Three.js辅助处理） #

如果想自行实现核心逻辑，可借助Three.js封装的骨骼计算能力，步骤如下：

1. 用Three.js加载GLB模型，提取目标SkinnedMesh和对应的AnimationClip
2. 创建AnimationMixer遍历动画时间线，逐帧烘焙顶点数据：

   const mixer = new THREE.AnimationMixer(skinnedMesh);
   const clip = animationClips[0];
   const action = mixer.clipAction(clip);
   action.play();
   
   // 按30fps遍历动画帧示例
   for (let t = 0; t <= clip.duration; t += 1/30) {
     mixer.update(t - mixer.time);
     skinnedMesh.updateMatrixWorld(true);
     // 克隆并应用当前帧的顶点变换
     const bakedGeometry = skinnedMesh.geometry.clone();
     bakedGeometry.applyMatrix4(skinnedMesh.matrixWorld);
     // 将bakedGeometry保存为关键帧数据，或直接导出为新模型
   }
   

3. 将烘焙后的每帧网格数据导出为GLB，或直接在p5.js中按帧加载渲染

注：Three.js的SkinnedMesh已封装了骨骼矩阵计算，无需手动处理权重和矩阵运算，调用updateMatrixWorld后克隆几何即可得到当前帧的最终顶点位置。

内容的提问来源于stack exchange，提问作者Solomon P Byer