REVOXELSEG_DICOM/工程分析/实现方案-2026-05-07-17-28-34.md

实现方案 - 2026-05-07-17-28-34

修改目标

在逆向工作区实现三维 DICOM 体与 STL 模型融合视角：

• DICOM 切片范围可控。
• DICOM 以黑色长方体和多张切片纹理展示。
• 最后一张切片显示在体表面。
• STL 模型叠加在 DICOM 体中。
• 用户可以调整模型位姿。
• DICOM 和 STL 可以一起旋转、平移、缩放观察。

涉及路径

• WebSite/server.ts
• WebSite/src/types.ts
• WebSite/src/lib/api.ts
• WebSite/src/components/ReverseWorkspace.tsx

技术路线

1. 后端新增 DICOM 融合体接口

新增接口：

GET /api/projects/:projectId/dicom-fusion-volume?start=0&end=49&mode=soft

返回内容：

• width、height
• start、end、total
• indices
• frames：每张切片灰度图 base64
• spacing：row/column/slice
• physicalSize：width/height/depth

为控制传输和纹理压力：

• 单次最多返回 64 张切片。
• 纹理最大边长限制为 256。
• 使用已有 getDicomVolume() 和 resampleNearest()，避免重复实现 DICOM 解析。

2. 前端新增类型与 API

• 在 types.ts 新增 DicomFusionVolume。
• 在 api.ts 新增 getDicomFusionVolume(projectId, start, end, mode)。

3. 重构融合视角为 Three.js 场景

在 ReverseWorkspace.tsx 中新增 FusionThreeView：

• 创建 Three.js scene/camera/renderer。
• DICOM：
  • 用半透明黑色 box 表示 CT 体。
  • 将范围内切片转为 CanvasTexture。
  • 按切片索引在 Z 方向分层放置。
  • 最后一帧贴到体表面并提高不透明度。
• STL：
  • 调用已有 STL preview 接口加载模型构件。
  • 使用后端返回 bounds 合成稳定模型中心。
  • 将模型挂到 modelGroup。
• 场景：
  • DICOM 体和模型都放入 fusionRoot，整体旋转和平移缩放作用在 fusionRoot。
  • 模型位姿单独作用在 modelPoseGroup。

4. 交互与控制

• 鼠标左键拖拽：旋转整体融合场景。
• Shift/右键拖拽：平移整体融合场景。
• 滚轮：缩放整体融合场景。
• UI 控件：
  • 切片起点、切片终点。
  • 模型旋转 X/Y/Z。
  • 模型平移 X/Y/Z。
  • 模型缩放。
  • 重置模型位姿。

数据流或交互流程

1. 进入逆向工作区后加载项目详情。
2. 根据默认切片范围请求 DICOM 融合体数据。
3. 请求 STL preview 并加载模型。
4. Three.js 创建 DICOM 体和 STL 模型。
5. 用户拖拽场景时 DICOM 与 STL 一起旋转。
6. 用户调整模型位姿时只改变 STL 模型相对 DICOM 的位置。
7. 用户调整切片范围时重新请求 DICOM 融合体数据并刷新 CT 体。

兼容性与回滚方案

• 若 WebGL 不可用，显示加载失败/不支持提示，不影响其他页面。
• 若融合体接口失败，保留逆向工作区其他 mask 导出功能。
• 若性能不足，可降低最大返回切片数和纹理尺寸。

预计文件变更

• WebSite/server.ts
  • 新增 createDicomFusionVolume() 和 API route。
• WebSite/src/types.ts
  • 新增 DicomFusionVolume 类型。
• WebSite/src/lib/api.ts
  • 新增 getDicomFusionVolume()。
• WebSite/src/components/ReverseWorkspace.tsx
  • 新增 Three.js 融合视角组件和位姿控制。

人工审核状态

• 本次免二次确认，方案写入后直接执行。

执行结果

• 已新增 GET /api/projects/:projectId/dicom-fusion-volume，支持按 start/end/mode 返回一段轴向 DICOM 体数据纹理。
• 已新增 DicomFusionVolume 类型和 api.getDicomFusionVolume()。
• 已将逆向工作区 影像与模型融合视角 重构为 Three.js 三维场景。
• 已实现黑色 DICOM 长方体、范围内切片纹理层叠、最后一帧体表面显示。
• 已将 STL 模型加载进同一融合场景，可通过模型位姿控件相对 DICOM 体调整。
• 已支持鼠标拖拽/滚轮对 DICOM 体和 STL 模型整体旋转、平移、缩放。