图片转3D效果展示系统 — 软件需求规格说明书
项目名称：图片转3D效果展示系统 |
版本：v1.0 |
日期：2026-07-07 |
技术栈：HTML5 + Three.js + 原生JavaScript
一、项目概述
本项目旨在开发一个基于Web的图片转3D效果展示系统。用户上传JPG/PNG图片后，系统通过深度估计算法将2D图片转换为3D浮雕效果，并支持实时参数调节、光照控制和模型导出。系统以单文件HTML形式交付，零安装零配置，浏览器打开即可使用。
二、功能需求
2.1 图片上传模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-001 | 支持点击上传按钮选择本地图片文件（JPG/PNG/WebP） | 高 |
| F-002 | 支持拖拽图片文件到3D查看区域直接上传 | 高 |
| F-003 | 支持Ctrl+V粘贴剪贴板中的图片 | 中 |
| F-004 | 自动限制图片最大分辨率为1024px，保证性能 | 中 |
2.2 深度估计模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-005 | CPU快速模式：基于亮度+边缘检测的本地深度估计（无需网络） | 高 |
| F-006 | AI深度模式：接入HuggingFace Depth-Anything-V2 API，实现语义级精准深度估计 | 高 |
| F-007 | 自动降级：AI模式失败时自动降级到CPU模式 | 中 |
| F-008 | 深度平滑参数可调（0~15） | 中 |
2.3 3D模型构建模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-009 | 3D挤压模式：前面（纹理+CPU位移）+ 背面（平面）+ 4条侧壁（ribbon几何体），形成完整封闭3D体 | 高 |
| F-010 | 球体贴图模式：将图片映射到球体表面 | 中 |
| F-011 | 圆柱环绕模式：将图片映射到圆柱表面 | 中 |
| F-012 | 浮雕强度可调（0~100） | 高 |
| F-013 | 整体厚度可调（0.05~2.0） | 高 |
| F-014 | 网格精度可调（20~200） | 中 |
2.4 材质与光照模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-015 | 粗糙度参数可调（0~1） | 中 |
| F-016 | 金属感参数可调（0~1） | 中 |
| F-017 | 环境光强度可调 | 中 |
| F-018 | 主光源强度可调 | 中 |
| F-019 | 侧面颜色可调 | 中 |
| F-020 | 背景颜色可调 | 低 |
2.5 显示与交互模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-021 | 鼠标拖拽旋转模型 | 高 |
| F-022 | 滚轮缩放模型 | 高 |
| F-023 | 右键平移视角 | 中 |
| F-024 | 线框模式切换 | 中 |
| F-025 | 自动旋转开关及速度调节 | 中 |
| F-026 | 阴影显示开关 | 低 |
2.6 导出模块
| 编号 | 需求描述 | 优先级 |
|---|
| F-027 | PNG截图导出（当前3D视图） | 高 |
| F-028 | GLB 3D模型导出 | 中 |
2.7 快捷键
| 编号 | 需求描述 | 优先级 |
|---|
| F-029 | W键：切换线框模式 | 低 |
| F-030 | R键：切换自动旋转 | 低 |
| F-031 | F键：重置相机视角 | 低 |
| F-032 | S键：截图保存 | 低 |
三、非功能需求
| 编号 | 需求描述 | 优先级 |
|---|
| NF-001 | 单文件交付：所有HTML/CSS/JS集成在一个.html文件中，无需额外依赖 | 高 |
| NF-002 | Three.js通过CDN（esm.sh）引入，无需本地安装 | 高 |
| NF-003 | 现代浏览器兼容（Chrome/Edge/Firefox/Safari） | 高 |
| NF-004 | 响应式布局：桌面端左右分栏，移动端上下分栏 | 中 |
| NF-005 | 暗色主题UI，专业感设计 | 低 |
四、技术架构
┌─────────────────────────────────────────────────┐
│ 用户层 │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 点击上传 │ │ 拖拽上传 │ │ Ctrl+V │ │
│ └─────────┘ └─────────┘ └─────────┘ │
├─────────────────────────────────────────────────┤
│ 处理层 │
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ CPU深度估计 │ │ AI深度估计 │ │
│ │ (亮度+边缘) │ │ (Depth-Anything)│ │
│ └─────────────────┘ └─────────────────┘ │
├─────────────────────────────────────────────────┤
│ 渲染层 │
│ ┌─────────────────────────────────────────┐ │
│ │ Three.js 场景 │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ 前面(位移)│ │ 背面(平面)│ │ 侧壁(ribbon)│ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ + OrbitControls + 灯光系统 + 材质系统 │ │
│ └─────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ 参数层 │
│ 位移强度 | 整体厚度 | 网格精度 | 粗糙度 | 金属感 │
│ 环境光 | 主光源 | 侧面颜色 | 背景颜色 | 旋转速度 │
└─────────────────────────────────────────────────┘
五、验收标准
| 序号 | 验收项 | 验收标准 |
|---|
| 1 | 图片上传 | 支持点击、拖拽、粘贴三种方式，限制1024px，处理时间<3秒 |
| 2 | 3D显示 | 模型正确渲染，旋转/缩放/平移流畅，帧率>30fps |
| 3 | 参数调节 | 所有滑块实时响应，调节后模型即时更新 |
| 4 | 深度估计 | CPU模式<2秒完成，AI模式<5秒完成 |
| 5 | 导出功能 | PNG截图和GLB导出均正常可用 |
| 6 | 兼容性 | Chrome/Edge/Firefox最新版本正常运行 |
六、项目里程碑
| 阶段 | 内容 | 时间 |
|---|
| Phase 1 | 基础框架搭建（Three.js场景、灯光、相机控制） | 1小时 |
| Phase 2 | 图片上传+CPU深度估计+基础3D渲染 | 1小时 |
| Phase 3 | 3D挤压模型重构（前面+背面+侧壁） | 1小时 |
| Phase 4 | AI深度估计集成（Depth-Anything-V2） | 1小时 |
| Phase 5 | UI优化、参数面板、快捷键、导出功能 | 1小时 |
注：本项目实际开发时间约为3小时（含需求分析、开发、调试、优化），符合用户最初的时间评估要求。系统以单文件HTML形式交付，零依赖、零配置，浏览器打开即可运行。
举报
html2.link