Human Atlas

这是什么

Human Atlas 是一个开源的交互式 3D 人体解剖浏览器，技术栈为 React + Three.js + shadcn/ui，用 Vite 构建。它把 BodyParts3D 的成年男性参考解剖模型拆成 2,234 个可单独点选的网格，覆盖 15 个解剖系统，可检索 3,432 个命名解剖概念。

打开网页就能旋转、缩放、逐块点选人体结构，从"拼合完整的一个人"切换到"所有零件摊开的散列视图"，适合医学/生物教学、自学和科普展示。项目很新（2026 年 9 月开源），但热度不低——4.1k star、1k+ fork。

能做什么

• 直接在人体模型上旋转、缩放、点选结构
• 按解剖系统单独开关图层，或用"骨骼 / 内脏"等预设快速切换
• 爆炸视图：从拼合的人体切到所有可见零件的散列清单，逐件查看
• 搜索解剖名称与源标识符（如 FMA 概念）
• 孤立查看：单独显示某个结构并阅读其说明
• 移动端适配：紧凑控件 + 详情面板，竖屏窄屏也能用

技术栈与实现

• 前端：React + Three.js + shadcn/ui，Vite 构建
• 性能做法：几何按批次合并，用逐结构的 GPU 纹理控制位移、可见性与选中；组件几何体保证点选精确；爆炸视图只排布当前可见零件；仅在场景变化时更新渲染，所以成千上万个零件也能流畅旋转
• 数据：BodyParts3D 4.0 成年男性参考解剖（CC BY 4.0）。打包模型含 2,288,268 个三角面，压缩后几何约 33MB；每个结构按 0.2% 相对误差上限做了简化，以便在浏览器里跑
• 可选 WebMCP 工具：在支持的浏览器中暴露解剖搜索/查看接口，无需它界面也能正常工作

本地运行

需要 Node.js 22.13+，不需要 API Key 或账号：

npm ci
npm run dev    # 打开 http://localhost:3016
npm run build  # 静态产物输出到 dist/

仓库自带校验脚本（npm run check、scripts/validate-atlas.mjs、scripts/validate-interactions.mjs），覆盖网格缓冲、名称与概念归属、桌面/移动端爆炸布局不重叠、搜索与查看契约、点击与拖拽区分，并跑过 390×844、320×568、844×390 等布局。

部署

作为 Vite 项目导入 Vercel 即可（自带 vercel.json，配置了 npm ci → npm run build → dist），也可以放到任意静态托管。构建产物是纯静态文件，塞进内网/离线环境同样能跑。

适用场景

• 医学生、护理学生的解剖自学与复习
• 课堂演示与科普展示（把它嵌进网页让学生自己点）
• 开发自己的解剖/医学可视化应用时，当作参考实现或数据管线样板
• 需要离线静态站点的场景：纯前端，无后端依赖

二开建议

• 应用代码为 MIT，可自由商用与改造；但解剖数据是 CC BY 4.0，二次分发必须保留署名——仓库内有 ATTRIBUTION.md，请随产物一起带上。
• 模型数据已随仓库提供，只有想换数据源/升级版本时才需重跑管线：scripts/convert-anatomy.py → node scripts/optimize-anatomy.mjs → node scripts/compress-models.mjs（需要官方 BodyParts3D OBJ 归档与英文元数据表）。
• 定位是教学用探索器，不是诊断或手术工具，别往临床用途上靠。

相关链接

• 在线体验（镜像）：https://human-atlas.pudone.com/
• 数据来源 BodyParts3D / Anatomography（DBCLS）：https://lifesciencedb.jp/bp3d/
• 同类开源项目 Open 3D Model（荷兰多所大学解剖系，CC BY SA）：https://anatomytool.org/open3dmodel

一句话总结

把 BodyParts3D 拆成 2,234 块可点选的零件，做成一本浏览器里能转、能拆、能搜的开源 3D 人体解剖书——教学、自学、二次开发都合适。