157 lines
3.6 KiB
Markdown
157 lines
3.6 KiB
Markdown
# 数字园区 3D 可视化项目
|
|
|
|
这是一个基于 Vue 3 + Three.js 的数字园区 3D 可视化项目，提供了丰富的交互功能和标注系统。
|
|
|
|
## 功能特性
|
|
|
|
### 🏗️ 3D 场景渲染
|
|
- 基于 Three.js 的高性能 3D 渲染
|
|
- 支持 GLB/GLTF 模型加载
|
|
- 真实的光照和阴影系统
|
|
- 天空盒和环境贴图
|
|
|
|
### 🏷️ 智能标注系统
|
|
- 自动查找模型中的建筑元素（Plane、Building、House、School等）
|
|
- 使用 Sprite 标签进行建筑标注
|
|
- 支持中文标注（教学楼）
|
|
- 连接线指示标注位置
|
|
|
|
### 🎮 交互功能
|
|
- 鼠标悬停效果（标注放大、透明度变化）
|
|
- 点击标注高亮对应建筑
|
|
- 相机自动动画到标注位置
|
|
- 轨道控制器支持视角调整
|
|
|
|
### 🎛️ 调试控制面板
|
|
- 实时相机位置调整
|
|
- 标注显示/隐藏控制
|
|
- 标注大小和透明度调节
|
|
- 标注高度调整
|
|
- 相机重置功能
|
|
|
|
## 技术栈
|
|
|
|
- **前端框架**: Vue 3 (Composition API)
|
|
- **3D 引擎**: Three.js
|
|
- **模型加载**: GLTFLoader
|
|
- **动画库**: TWEEN.js
|
|
- **控制面板**: lil-gui
|
|
- **构建工具**: Vite
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
digitalpark/
|
|
├── public/ # 静态资源
|
|
│ ├── model.glb # 3D 模型文件
|
|
│ ├── skyBox4/ # 天空盒贴图
|
|
│ └── *.hdr # HDR 环境贴图
|
|
├── src/
|
|
│ ├── components/
|
|
│ │ └── BigDataScreen.vue # 主组件
|
|
│ ├── App.vue
|
|
│ └── main.js
|
|
└── package.json
|
|
```
|
|
|
|
## 开发逻辑分析
|
|
|
|
### 1. 场景初始化
|
|
- 创建 Three.js 场景、相机和渲染器
|
|
- 设置相机位置和视角
|
|
- 配置渲染器参数（抗锯齿、深度缓冲、透明度）
|
|
|
|
### 2. 光照系统
|
|
- **环境光**: 提供基础照明
|
|
- **平行光**: 主要光源，支持阴影
|
|
- **半球光**: 模拟天空和地面反射
|
|
|
|
### 3. 模型加载与优化
|
|
- 使用 GLTFLoader 加载 3D 模型
|
|
- 遍历模型对象，开启阴影
|
|
- 修正过黑材质，优化 PBR 参数
|
|
|
|
### 4. 标注系统
|
|
- 智能查找建筑元素（支持多种命名模式）
|
|
- 创建 Canvas 纹理绘制标注文字
|
|
- 使用 Sprite 实现始终面向相机的标注
|
|
- 添加连接线指示标注位置
|
|
|
|
### 5. 交互系统
|
|
- 射线检测实现鼠标交互
|
|
- 悬停效果和点击响应
|
|
- 相机动画和建筑高亮
|
|
|
|
### 6. 控制面板
|
|
- 实时参数调整
|
|
- 相机位置控制
|
|
- 标注属性调节
|
|
|
|
## 安装和运行
|
|
|
|
```bash
|
|
# 安装依赖
|
|
npm install
|
|
|
|
# 开发模式运行
|
|
npm run dev
|
|
|
|
# 构建生产版本
|
|
npm run build
|
|
```
|
|
|
|
## 使用说明
|
|
|
|
1. **查看标注**: 页面加载后会自动查找建筑元素并添加标注
|
|
2. **交互操作**:
|
|
- 鼠标悬停标注会放大并变亮
|
|
- 点击标注会高亮对应建筑并移动相机
|
|
3. **调试控制**: 使用右上角的控制面板调整各种参数
|
|
4. **相机控制**: 使用鼠标拖拽调整视角
|
|
|
|
## 自定义配置
|
|
|
|
### 添加新的标注
|
|
在 `addBuildingLabel` 函数中修改查找逻辑：
|
|
|
|
```javascript
|
|
// 添加新的关键词
|
|
if (name.includes('your_keyword')) {
|
|
buildingElements.push(obj)
|
|
}
|
|
```
|
|
|
|
### 修改标注样式
|
|
调整 Canvas 绘制参数：
|
|
|
|
```javascript
|
|
context.fillStyle = 'rgba(0, 0, 0, 0.8)' // 背景色
|
|
context.strokeStyle = '#00ffff' // 边框色
|
|
context.font = 'bold 28px Arial' // 字体
|
|
```
|
|
|
|
### 调整标注位置
|
|
修改标注组的位置偏移：
|
|
|
|
```javascript
|
|
labelGroup.position.y += 15 // 调整高度偏移
|
|
```
|
|
|
|
## 性能优化
|
|
|
|
- 使用 `requestAnimationFrame` 进行渲染循环
|
|
- 合理设置阴影贴图大小
|
|
- 及时清理 Three.js 资源
|
|
- 组件卸载时正确清理事件监听器
|
|
|
|
## 浏览器兼容性
|
|
|
|
- Chrome 80+
|
|
- Firefox 75+
|
|
- Safari 13+
|
|
- Edge 80+
|
|
|
|
## 许可证
|
|
|
|
MIT License
|