HTML5本身不提供骨骼动画建模能力，真正实现需WebGL引擎（如Three.js）加载预绑定的glTF模型；建模绑定必须在Blender等DCC工具中完成，代码仅负责加载与播放动画。
HTML5 本身不提供骨骼动画建模能力，无法直接创建或绑定骨骼——它只是运行容器。真正实现角色骨骼绑定与动画的，是 WebGL 渲染引擎（如 Three.js、Babylon.js）或专用游戏框架（如 PixiJS + spine-runtime），且模型必须预先在专业 DCC 工具中完成绑定。
Three.js 中加载已绑定骨骼的 glTF 模型
这是目前最主流、兼容性最好、且符合 HTML5 实际部署场景的做法。Three.js 原生支持 glTF 2.0，而该格式完整封装了骨骼、蒙皮权重、动画片段等信息。
- 建模/绑定必须在 Blender、Maya 或 Cinema 4D 中完成：添加 Armature → 绑定 Mesh（Ctrl+P → “With Automatic Weights”）→ 导出为
.glb（推荐）或.gltf - 代码中仅需加载并播放动画：
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { AnimationMixer } from 'three'; const loader = new GLTFLoader(); loader.load('character.glb', (gltf) => { const model = gltf.scene; const animations = gltf.animations; // 数组，含所有动画剪辑 const mixer = new AnimationMixer(model); animations.forEach(clip => { const action = mixer.clipAction(clip); action.play(); }); // 每帧更新 function animate() { requestAnimationFrame(animate); mixer.update(0.016); // delta time ~60fps renderer.render(scene, camera); } }); - 切勿尝试在 Three.js 中“手动创建骨骼层级”：虽然
Object3D可嵌套模拟骨骼，但缺失蒙皮计算（SkinnedMesh+BufferGeometry.skinIndices等底层数据），无法驱动顶点形变
Babylon.js 支持 .babylon 和 glTF，但对绑定容错更强
当 Blender 导出的 glTF 在 Three.js 中出现权重异常或动画错位时，可换用 Babylon.js 测试——它对非标准绑定（如部分顶点未分配骨骼、权重和≠1）处理更宽松。
- 关键配置项：
scene.skipFrustumCheck = true（避免因骨骼超出视锥被裁剪）、mesh.convertToFlatShadedMesh()（有时可缓解蒙皮光照异常） - 加载后获取骨架：
scene.onReady = () => { const skeleton = scene.getSkeletonByName('Armature'); if (skeleton) { skeleton.enableBlending(0.1); // 混合过渡时间 } }; - 注意：Babylon.js 的
.babylon格式已逐步弃用，优先仍选 glTF；其导出插件（Babylon.js Exporter for Blender）需单独安装并启用
不能用 CSS 或纯 Canvas 模拟骨骼动画
有人试图用 transform: rotate() 层叠 div 模拟关节，或用 Canvas 逐段绘制肢体——这属于“假骨骼”，本质是关键帧补间，不具备以下任一特性：
立即学习“前端免费学习笔记（深入）”；
- 顶点级形变：无法实现肌肉挤压、布料牵拉、肩部旋转带动锁骨区域自然过渡
- 权重混合：多个骨骼同时影响同一顶点（如肘部弯曲时上臂与前臂权重动态变化）
- 逆向动力学（IK）：无法让手部定位后自动反推整条手臂姿态
- 性能崩溃：10 个以上关节嵌套 + 高频重绘，Canvas 2D 上帧率迅速跌破 30fps
真正要上线的 HTML5 角色动画，99% 的路径是：Blender 做绑定 → 导出 glTF → Three.js 加载 + mixer 控制。中间任何环节跳过建模软件（比如想用 JS 生成骨骼结构），结果都是不可控的渲染错误或运动失真。
