如何在网页端将nii.gz分割数据展示为3D模型？

一、直接网页端处理的简便方案 #

• 使用nii-reader-js读取并渲染：这个库可在浏览器中直接解析nii.gz文件，提取体素数据后，结合Three.js的THREE.MarchingCubes类生成等值面网格，完成3D渲染。
  • 操作步骤：
    1. 安装依赖：npm install nii-reader-js three
    2. 通过FileReader读取用户上传的nii.gz文件，传入nii-reader-js的readNiiFile方法解析
    3. 提取体素数据，传入MarchingCubes生成网格并添加到Three.js场景
• 使用@kitware/vtk.js：专为医学影像打造的前端库，内置nii.gz读取、3D渲染组件，无需手动编写大量Three.js代码，可快速实现展示功能。

二、Python转JavaScript（React+Three.js）的实现步骤 #

该方案完全可行，具体步骤如下：

1. Python端预处理并导出模型

   • 安装依赖：pip install nibabel trimesh
   • 示例代码：

     import nibabel as nib
     import trimesh
     
     # 读取nii.gz文件
     img = nib.load('your_segmentation.nii.gz')
     data = img.get_fdata()
     
     # 阈值分割提取目标区域（根据实际需求调整阈值）
     threshold = 50
     mask = data > threshold
     
     # 生成网格模型
     mesh = trimesh.voxel.ops.matrix_to_marching_cubes(mask, pitch=img.header.get_zooms())
     
     # 简化网格（可选，优化前端加载速度）
     mesh = mesh.simplify_quadric_decimation(10000)
     
     # 导出为Three.js原生支持的glTF格式
     mesh.export('segmentation_model.glb')
     

   • 注意：若为多标签分割结果，需针对每个标签单独生成网格后再合并，避免模型混乱。

2. React+Three.js端加载渲染

   • 安装依赖：npm install three @react-three/fiber @react-three/drei
   • 组件示例：

     import { Canvas } from '@react-three/fiber'
     import { useGLTF } from '@react-three/drei'
     
     function SegmentationModel() {
       const { scene } = useGLTF('/segmentation_model.glb')
       return <primitive object={scene} scale={[1,1,1]} position={[0,0,0]} />
     }
     
     function App() {
       return (
         <Canvas camera={{ position: [8,8,8], fov: 60 }}>
           <ambientLight intensity={0.6} />
           <directionalLight position={[12,12,6]} intensity={0.8} />
           <SegmentationModel />
         </Canvas>
       )
     }
     
     export default App
     

三、其他备选方案 #

• 后端生成3D切片图片序列，前端用Three.js将切片拼接成体素网格，适合低性能设备，但渲染精度和效果不如等值面模型。
• 使用itk-wasm：基于WebAssembly的医学影像库，可在浏览器中直接处理nii.gz，支持复杂影像操作，适合需要前端实时处理的场景。

内容的提问来源于stack exchange，提问作者MarioComputer