Somakine——基于 Three.js 的交互式解剖查看器

原作者： andyme
原始链接： Somakine — an interactive anatomy viewer built with Three.js

说明：原文为 Three.js 论坛项目展示帖，正文未附代码片段，因此无“核心代码”可直接保留。下文为忠实编译，并附项目关键架构及源码入口。

大家好，

我想分享 Somakine，一个使用 Three.js 构建的开源 TypeScript 框架与交互式解剖查看器。

Playground 使用真实的 BodyParts3D 4.0 肌肉骨骼几何数据。你可以：

  • 旋转、平移或移动整个场景
  • 切换解剖图层，如骨骼、肌肉、关节、韧带和肌腱
  • 按解剖区域过滤
  • 选中并聚焦单个结构
  • 检查侧面感知的语义选择
  • 在英文与中文标签之间切换
  • 基于当前场景生成 TypeScript、React 或 Vue 集成代码

该项目拆分为几个可复用层：

  • 数据层：负责规范化解剖 ID、关系、标签和覆盖范围
  • 数据包：具有明确的资产来源与许可信息
  • Three.js 查看器：用于加载、拾取、选择、样式化、相机适配和变换
  • 框架集成：支持 React 和 Vue

我构建 Somakine 的原因是解剖类应用常常重复实现标识、关系、几何加载和资产来源等能力。目标是让这个“身体层”可复用，而把实际产品体验留给宿主应用。

感谢关注！

三个核心优化要点

  1. 分层解耦与模块复用
    将解剖数据、几何加载、Three.js 渲染和前端框架集成分离为独立层。数据层管理 ID、关系与标签，查看器层处理拾取/选择/变换，框架层负责 React/Vue 注入。这避免了每个解剖应用重复实现相同底层逻辑，显著提升可维护性与开发效率。

  2. 按需加载与交互聚焦
    通过“按解剖区域过滤”和“图层切换”实现场景内容的动态裁剪；选中并聚焦单个结构时，可只对目标对象进行精细渲染与相机适配，降低整体渲染负担，改善交互流畅度。

  3. 资产来源与许可显式化
    数据包层明确记录资产出处（provenance）和许可证（licensing），不仅便于合规审计，也利于缓存、版本管理与按需分发，避免重复下载，提升加载性能与数据可信度。

GLSL/WebGL 专业术语检查

  • Three.js：基于 WebGL 的 JavaScript 3D 图形库，不翻译。
  • WebGL：Web Graphics Library，网页图形库，浏览器端 3D 渲染 API。
  • GLSL：OpenGL Shading Language，OpenGL 着色语言。原文未直接出现，但 Three.js 自定义材质与着色器常涉及。
  • picking：拾取/选取，通常借助射线检测实现对象选择。
  • selection：选择集/选中状态。
  • styling：样式化，此处指对选中或特定对象应用视觉样式。
  • camera fitting：相机适配/取景适配，自动调整相机使目标结构完整可见。
  • transforms：变换，指平移、旋转、缩放等空间操作。
  • canonical anatomy IDs：规范化解剖标识。
  • musculoskeletal geometry：肌肉骨骼几何。
  • asset provenance：资产来源/出处。
  • framework integrations：框架集成。
  • BodyParts3D 4.0：保留原名，为人体解剖几何数据集。
  • TypeScript / React / Vue：保留英文，不做翻译。

原文未直接包含 GLSL 代码，但项目基于 WebGL 渲染管线，上述术语在集成与扩展时应保持准确的中英文对照，避免在技术文档中混淆。