数字园区 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. 控制面板

• 实时参数调整
• 相机位置控制
• 标注属性调节

安装和运行

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建生产版本
npm run build

使用说明

1. 查看标注: 页面加载后会自动查找建筑元素并添加标注
2. 交互操作:
   • 鼠标悬停标注会放大并变亮
   • 点击标注会高亮对应建筑并移动相机
3. 调试控制: 使用右上角的控制面板调整各种参数
4. 相机控制: 使用鼠标拖拽调整视角

自定义配置

添加新的标注

在 addBuildingLabel 函数中修改查找逻辑：

// 添加新的关键词
if (name.includes('your_keyword')) {
  buildingElements.push(obj)
}

修改标注样式

调整 Canvas 绘制参数：

context.fillStyle = 'rgba(0, 0, 0, 0.8)'  // 背景色
context.strokeStyle = '#00ffff'            // 边框色
context.font = 'bold 28px Arial'          // 字体

调整标注位置

修改标注组的位置偏移：

labelGroup.position.y += 15  // 调整高度偏移

性能优化

• 使用 requestAnimationFrame 进行渲染循环
• 合理设置阴影贴图大小
• 及时清理 Three.js 资源
• 组件卸载时正确清理事件监听器

浏览器兼容性

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

许可证

MIT License