# 数字园区 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