ashemag/human-atlas：2234 个器官网格怎么选

human-atlas 是一个把 BodyParts3D 全部 2234 个解剖网格整合到 Web 端的开源项目。它把分散在多个 FMA ID 下的骨骼、肌肉、神经、器官按系统聚合成可搜索树，配合 Three.js 渲染出可旋转、可拾取、可高亮的 3D 人体地图。它之所以这两天冲上 Trending，是因为它解决了一个长期被忽视的痛点：医学可视化项目里，研究者想精确选中某块肌肉或某段血管，往往要写几百行 ID 比对代码，而现在只要一行 import 加一个 select 函数就能定位到目标网格。

问题 1：FMA ID 太多，怎么按解剖系统筛选？

BodyParts3D 一共包含两千多个 FMA（Foundational Model of Anatomy）编号，从 FMA:12247（锁骨）到 FMA:82493（远端指骨）一应俱全。直接遍历数组再做字符串匹配，运行时尚好，但冷启动要加载完整 JSON 体积过大，浏览器一卡就是几秒。

human-atlas 的解法是把网格按系统（骨骼、肌肉、循环、神经、消化等）做一级分类，索引文件只保留 system -> fma_ids[] 的映射，渲染时再按需 fetch 具体的 mesh 资源。代码示例：

import { Atlas } from "human-atlas";

const atlas = new Atlas();
await atlas.loadIndex(); // 仅加载 ~40KB 索引

const bones = atlas.bySystem("skeletal"); // 返回 FMA ID 数组
console.log(bones.length); // 245

这样首屏只下载索引，点选某个系统才下载对应 .obj，体积从一次性 80MB 降到按需 1-3MB。

问题 2：点击 3D 网格，如何反向查到 FMA ID？

Raycaster 拾取只能拿到 mesh.name，但 BodyParts3D 原始 .obj 里写的是 FMA 字符串 “FMA:12247”，前端很难把它对应到中英文医学名册。human-atlas 内置一份 fma_labels_zh_en.json，拾取回调直接返回 {fma, name_en, name_zh, system}：

atlas.onPick((hit) => {
  console.log(hit.fma, hit.name_zh, hit.system);
});

问题 3：想让两个解剖结构一起高亮，怎么做？

原生 Three.js 的 group 操作需要自己维护选中状态、颜色覆盖和恢复。human-atlas 提供 selectionGroup，允许传入多个 FMA ID，渲染层统一给这些网格加 emissive 高亮，并保存上一组以便清空：

atlas.selectionGroup.set(["FMA:12247", "FMA:13304"]);
atlas.selectionGroup.clear();

问题 4：能不能不写代码直接预览？

仓库内置了 examples/dev-server，跑 npm install && npm run dev 就能在 localhost:5173 看到一个完整的旋转人体，单击任意部位会在右下角弹出国标系统归属和中文名。对医学可视化新人来说，这就是最低门槛的入门 demo。

问题 5：嵌入到现有 Vue / React 项目怎么做？

human-atlas 的核心不绑框架，Atlas 实例挂到 window 上即可。React 里通过 useEffect 创建实例并绑定 canvas 引用，组件卸载时调用 atlas.dispose() 释放 GPU 资源即可，仓库 README 给出了完整片段，直接复制可用。

---

Sources

本文参考 GitHub Trending 2026-09-07 趋势榜、ashemag/human-atlas 仓库 README 与 examples 目录，以及 BodyParts3D 官方文档关于 FMA ID 命名规则的部分。