如果你是个技术爱好者，大概率有过这种冲动：看到一个漂亮的开源项目，第一反应不是”好厉害”，而是”我想把它跑起来、放到自己的服务器上”。

上个周末我就干了这么一件事。主角是一个叫 Human Atlas 的开源 3D 人体解剖浏览器——然后我把它部署到了自己的服务器上，现在你打开这个链接就能玩：

👉 在线体验：https://guoxb.cn/atlas

下面聊聊它到底是什么、能干什么、以及我是怎么把它”搬回家”的。

一、Human Atlas 是什么

一句话：一个运行在浏览器里的交互式 3D 人体解剖图谱。

它由开发者 ashemag 开源（MIT 协议），基于 BodyParts3D 4.0 的成年男性参考解剖数据构建（该数据本身采用 CC BY 4.0 协议）。项目把一具完整的人体拆成了 2234 个可独立选中的网格，划分出 15 大人体解剖系统，内置了 3432 个可检索的解剖学术语。

这不是简单的”3D 模型展示”，而是一套完整的人体结构数据库 + 可视化引擎。技术栈是 React + Three.js + shadcn/ui，纯前端项目，不需要后端、不需要 API Key，跑起来就是一个静态站点。

二、它能干什么

我用下来，几个功能点非常惊艳：

1. 任意拆解，逐层解剖

在页面上可以直接用鼠标拖拽旋转视角、滚轮缩放，然后像”剥洋葱”一样点击任意一块结构。肌肉、骨骼、血管、器官——每一块都是独立的，点一下就高亮选中，旁边会弹出它的名称和详细信息。

2. 按系统浏览

图谱内置了 15 大解剖系统的图层控制（骨骼系统、肌肉系统、循环系统、神经系统等），你可以一键只显示骨骼，或者只显示某个器官组合，配合预设快速切换视图。

3. 爆炸视图（Exploded View）

这是我最喜欢的功能——点击后，整个人体模型会像机械装配图一样”炸开”，所有零件悬浮排布、互不遮挡。想看清楚某块骨头在三维空间里的确切形态和相对位置？没有比这更直观的方式了。

4. 全文搜索

支持直接搜索解剖学术语名称和来源编号。搜”femur”，立刻定位到股骨并高亮给你看——比翻教科书查索引快一个数量级。

5. 移动端适配

我特意用手机试了，界面做了响应式处理，触控旋转、缩放、点选都挺跟手，紧凑的控件面板在手机上不会互相遮挡。

三、开发者视角：它的技术含金量

作为前端开发者，我更关心它是怎么做到的——毕竟人体模型动辄上百万三角形，要让浏览器流畅旋转，还要支持任意点选，并不容易。

翻了下仓库，几个实现思路很有参考价值：

  • 几何合并批处理：把网格合并成批次，用 GPU 纹理控制每个结构的位移、可见性和选中状态，而不是给每个结构单独发 draw call——这样即使几千个结构同时在场，渲染也保持流畅。
  • 精确拾取：合并后的组件几何用于精确的射线检测，保证”点到哪块就是哪块”。
  • 爆炸视图的智能布局：只对当前可见的零件做空间排布，并在桌面/移动端不同宽高比下都做了防重叠校验。
  • 完善的自动化测试：仓库里带网格数据校验、交互逻辑校验脚本，浏览器级测试覆盖了 390×844、320×568 等常见手机尺寸，连”点击 vs 拖拽”这种细节都有专门处理。

整套模型打包后压缩体积约 33MB、228 万个三角形，在浏览器里加载和交互的体验都算不错。

四、如何部署：比我预想的简单

项目作者把它设计得非常容易上手：

1
2
3
# 需要 Node.js 22.13 及以上
npm ci
npm run dev   # 本地开发，默认 http://localhost:3016

生产部署更简单——它构建出来是纯静态文件：

1
npm run build   # 产物输出到 dist/

把 dist/ 目录丢给任意静态托管（Nginx、Vercel、GitHub Pages 都可以）就能跑。我因为服务器上已经有 Nginx，就把它作为一个子路径站点部署了。如果你也想部署，只需要注意两点：一是用子路径部署时要确认好资源的 base 路径（项目是 Vite 构建，配置好即可），二是 Node 版本别低于 22.13。

五、几点提醒

  1. 它是教育工具，不是医疗工具。项目 README 明确写了：这是用于教学浏览的解剖图谱，不是诊断或手术工具。人体结构存在个体差异，图谱基于单一成年男性参考数据，不代表所有人的解剖变异。
  2. 注意许可证：应用代码是 MIT 协议，可以自由使用修改；但底层的解剖数据是 CC BY 4.0，如果重新分发需要保留署名。商用前记得看清楚协议要求。
  3. 模型体积不小：首次加载约 33MB 的压缩几何数据，网络差的时候需要等一会儿，但加载完后的交互很流畅。

六、写在最后

把 Human Atlas 部署到自己的服务器，整个过程不到半小时，收获却远超预期。它既是医学生/解剖爱好者的学习利器，也是前端开发者研究”大规模 3D 场景 + 拾取交互”的绝佳案例——一个开源项目，同时把科普价值和技术价值拉满了。

最后再放一次入口，欢迎来玩：

👉 Human Atlas 在线体验：https://guoxb.cn/atlas

如果你也部署过类似有趣的开源项目，或者对里面的 3D 实现有想聊的，欢迎在评论区交流。