在浏览器里渲染完整人体骨骼：Skeleton Anatomy 开发笔记

目标

做一个能在浏览器里旋转、缩放、标注的完整人体骨骼 3D 模型。面向医学生和解剖学爱好者。

模型来源

骨骼模型来自开放的医学 3D 数据集，原始模型有 200 万面。直接加载会让浏览器崩溃。

优化流程

原始模型 (2M 面) → Blender 简化 → 200K 面 → Draco 压缩 → 6MB GLB

6MB 的 GLB 文件在首次加载后被缓存，后续打开秒加载。

交互设计

最大的挑战是在 3D 空间里做标注。我们的方案：

1. 每块骨骼有独立的 mesh ID
2. 点击骨骼 → Raycaster 命中 → 高亮 + 弹出信息面板
3. 信息面板跟随 3D 位置但渲染在 2D HTML 层

移动端

手机上用陀螺仪旋转骨骼是意料之外的好体验。支持双指缩放和单指旋转。