Human Atlas：开源交互式 3D 人体解剖浏览器，2300+ 网格逐块拆解、15 大人体系统自由查看

最近 GitHub 上冒出一个很有意思的开源项目 Human Atlas，上线几天就冲到 1300+ star。它是一个完全开源的交互式 3D 人体解剖浏览器，用 React + Three.js + shadcn/ui 构建，把成人男性参考解剖模型（BodyParts3D）拆成了 2234 个可单独选中的网格，支持 15 大人体系统分层探索和搜索。今天带大家看看它到底能玩出什么花样。

核心功能：把人体「拆开来看」

跟传统看图学解剖完全不一样，Human Atlas 让你直接在 3D 身体上操作：

• 轨道 / 缩放 / 点选：直接旋转、放大视角，用鼠标点选任意一块结构，立刻高亮并显示它的名称和信息。
• 系统开关：可以一键切到骨骼、内脏、血管等「预设」，或者手动开/关某一个系统图层。
• 爆炸视图：从「组装好的完整人体」一键切换成「把每一块可见零件间隔摆放的清单视图」，逐个结构看得清清楚楚。
• 搜索：按解剖学名词或源标识符搜索，能搜到 3432 个命名概念。
• 结构隔离：单独隔离选中的某个结构，专注看它和它周围的关系。
• 移动端适配：手机上也能流畅操作，还有为窄屏优化的紧凑控件和详情面板。

官方明确说明：这是教学/科普用途的探索工具，不是诊断或手术工具。

技术栈与数据来源

前端是 React + Three.js + shadcn/ui（TypeScript），本地跑起来只需要 Node.js 22.13+，不需要任何 API key 或账号：

npm ci
npm run dev

浏览器打开 http://localhost:3016 就能用；npm run build 会输出可直接静态托管的 dist/。真正的难点在于模型处理：整套模型被精简后仍含 2,288,268 个三角形、约 33 MB 压缩几何体，但对现代浏览器足够流畅。渲染上做了大量优化——把几何体分批合并、用每结构独立的 GPU 纹理控制位移/可见性/选中、爆炸视图只排布当前可见的零件，这样轨道控制保持跟手，而不会因为几千个独立 draw call 而卡顿。

解剖源数据用的 BodyParts3D 4.0（成人男性参考解剖模型），采用 CC BY 4.0 许可。注意：应用代码本身是 MIT 许可，但解剖数据是 CC BY 4.0，重新分发时必须保留署名。更多细节可以看官方 README。

为什么值得关注

一是纯粹的「做给普通人看」的心态：不堆砌 API、不搞账号体系，本地几行命令就能跑一个媲美专业软件交互的教学用 3D 解剖模型——很多学解剖、生物或医学方向的人会直接拿这类项目当教学演示。二是工程实现可借鉴：几十 MB 的模型在浏览器里保持流畅的合批 + 纹理实例化思路，对任何「大模型 3D 前端可视化」场景都有参考价值。三是数据授权处理规范：README 里把应用代码（MIT）与受 CC BY 4.0 保护的人体数据分开声明，是开源项目处理「自带数据」的正面范例。

如果你对 3D 可视化、教学工具或前端海量网格渲染感兴趣，去 GitHub 点个 star，或者直接在线体验 demo 亲手把人体「拆」一遍，感受远比截图来得直观。