Mskalign3D Demo

这是一个基于 Three.js 的 3D 脊柱对齐可视化演示项目。

🚀 快速开始

1. 确保已构建项目：

npm run build

2. 准备资源文件（见下方说明）

3. 使用 HTTP 服务器运行项目：

# 使用 Python 3
python -m http.server 8000

# 或使用 Node.js serve
npx serve .

# 或使用 PHP
php -S localhost:8000

4. 在浏览器中打开 http://localhost:8000

📁 资源文件

GLB 模型文件

需要在 GLB/ 目录下放置以下脊椎模型文件：

颈椎 (Cervical):

• C1.glb, C2.glb, C3.glb, C4.glb, C5.glb, C6.glb, C7.glb

胸椎 (Thoracic):

• T1.glb, T2.glb, T3.glb, T4.glb, T5.glb, T6.glb, T7.glb, T8.glb, T9.glb, T10.glb, T11.glb, T12.glb

腰椎 (Lumbar):

• L1.glb, L2.glb, L3.glb, L4.glb, L5.glb

背景图片

在 images/ 目录下放置背景图片：

• human.jpg - 人体轮廓背景图

🎮 使用说明

鼠标控制

• 左键拖拽: 旋转视角
• 鼠标滚轮: 缩放
• 右键拖拽: 平移视角

控制面板

• 🏠 重置视角: 回到默认视角
• ⏯️ 播放/暂停: 控制动画播放
• 🎨 更换颜色: 切换椎体颜色
• 🖼️ 显示/隐藏背景: 切换背景图片显示
• 旋转速度: 调整椎体旋转动画速度
• 椎体间距: 调整椎体之间的距离
• 背景透明度: 调整背景图片透明度

🔧 配置

可以通过修改 index.html 中的 JavaScript 代码来自定义配置：

// 更新配置示例
mskalign3D.updateConfig({
  background: {
    imagePath: "./images/custom-background.jpg",
    opacity: 0.5,
  },
  vertebrae: {
    positioning: {
      spacing: 1.2,
    },
  },
});

🎯 功能特性

• ✨ 3D 脊柱可视化
• 🎮 交互式控制
• 📱 响应式设计
• 🎨 多种颜色方案
• 📊 性能监控
• 🔄 动画控制
• 📐 自定义参数调整

🛠️ 技术栈

• Three.js - 3D 图形渲染
• WebGL - 硬件加速
• GLTFLoader - 3D 模型加载
• OrbitControls - 相机控制

📝 注意事项

1. 需要 GLB 格式的 3D 模型文件
2. 必须使用 HTTP 服务器运行（不能直接打开 HTML 文件）
3. 建议使用现代浏览器（Chrome、Firefox、Safari、Edge）
4. 需要支持 WebGL 的设备

🐛 常见问题

Q: 页面显示空白？ A: 检查是否使用 HTTP 服务器运行，并确保 GLB 模型文件存在。

Q: 模型加载失败？ A: 确保 GLB 文件路径正确，文件格式正确，并且文件没有损坏。

Q: 性能问题？ A: 尝试减少模型复杂度，或在低端设备上降低渲染质量。

📄 License

MIT License