Vue 3 + Three.js 的完整本地演示项目，包含真实 WebGL 三维模型、六栋可点击楼宇、三段确定性模拟数据及告警联动。无需 API Key、地图服务或后端。
校园和所有运行数值均为虚构。它是可交互数字孪生可视化原型，未连接真实设备，不能用于现实安全判断。本项目由本次开发任务实现，Seed-2.1-pro 的运行实测记录。
需要 Node.js 22.12+ 和支持 WebGL 2 的现代浏览器。
- 解压完整项目，打开项目目录。
- Windows 可双击
start-demo.cmd；其他系统在此目录运行：
node scripts/serve-dist.mjs- 浏览器访问 **http://127.0.0.1:4173**。保持启动窗口打开，结束时按 Ctrl+C。
此方式不需要先安装 npm 依赖。页面、模型和字体不依赖外部 CDN，页面运行不请求第三方 API。请通过本地服务访问，不要双击 dist/index.html。
npm ci
npm run dev默认从 http://127.0.0.1:5173 启动。若端口被其他项目或另一份 Demo 占用，会自动尝试 5174、5175 等后续端口；请打开终端 Local: 后实际显示的地址。无需关闭其他项目，也无需重新安装依赖。初次安装依赖需要联网。
若希望从其他端口开始尝试，可运行 npm run dev -- --port 5180。浏览器自动测试的默认地址仍为 5173；测试另一端口时，请按文末说明设置 DEMO_URL。
npm run build # 生成 dist，可部署到静态文件服务器
npm run preview # 预览构建结果
npm test # 数据、告警、拾取编号与导出逻辑测试
npm run model # 修改建模脚本后，重新生成 campus.glb若修改了 src/scene/createCampus.js 或建筑布局数据，先运行 npm run model，再执行构建。仅修改模拟运行数值无需重新生成模型。
- 三维校园：教学楼、实验楼、图书馆、宿舍、食堂、体育馆；门窗、屋顶、光伏板、道路、停车位、校门、运动场、绿化及场景光照。
- 空间操作：拖动旋转，滚轮缩放；支持俯视、回到全景、建筑点击与镜头定位。键盘用户可从楼宇列表选择相同建筑。
- 校园人物：学生在主路和建筑间步行，部分学生沿操场跑道慢跑；老师以较慢速度沿校园道路行走。人物具有转向、手脚摆动和轻微身体起伏。
- 人物控制：图层面板可隐藏人物，并在低（10 人）、中（24 人）、高（42 人）三档密度间切换。页面进入后台或系统启用“减少动态效果”时，人物动画暂停。
- 建筑详情：当前功率、代表测点温度、在楼人数、三时刻功率变化、当前建筑功率占比。
- 时间回放：09:00 → 09:05 → 09:10；每 5 秒推进一帧。可手动切换、暂停、重播；末帧停止，切到后台自动暂停。
- 告警联动：09:05 实验楼温度升至 32.4℃，出现橙色楼体标记、标签与告警记录；09:10 恢复。告警列表点击可定位楼宇。
- 功能导航：校园总览、按功率排序的能耗观察、当前告警中心。
- 图层控制：建筑名称、绿化、日照阴影。
- 下载：当前运行快照 Markdown、完整模拟数据 JSON、校园 GLB、带模拟标记的三维场景 PNG（截图不含 HTML 界面标签）。
- 异常处理：模型读取失败可重试；WebGL 不可用时显示明确提示，数据和回放仍能使用。
- 适配：桌面三栏、平板重排、手机纵向布局；支持减少动画偏好。
推荐演示：保持全景 → 点实验楼 → 切到 09:05 → 打开告警中心 → 点击告警定位 → 切到 09:10 → 回到全景 → 导出快照。
数据文件：src/data/campus.json，与文章配套的模拟数据一致。
| 模拟时间 | 建筑功率合计 | 在楼人数合计 | 实验楼温度 | 当前告警 |
|---|---|---|---|---|
| 09:00 | 477 kW | 1410 | 30.8℃ | 0 |
| 09:05 | 492 kW | 1410 | 32.4℃ | 1 |
| 09:10 | 447 kW | 1410 | 29.6℃ | 0 |
只有实验楼 L01 的模拟代表测点温度 ≥ 32℃ 才触发告警。这个阈值只是演示条件，不是实验室安全标准。kW 是当前功率，不是累计用电量 kWh。人数只统计六栋建筑，不是全校园人数；温度是单个模拟代表测点，不是楼宇平均温度。数据刻意固定，便于复现，不假装实时物联网数据。
每帧包含完整数据，因此任意跳转不会累积旧告警。修改数据时保持 buildingId 与模型一致，并同步更新对应断言与文档。
随附 public/models/campus.glb 是本项目 Three.js 几何脚本生成的原创程序化模型，不使用第三方地图、贴图或校园资产，不冒称 Blender 生成。模型包含六个建筑根节点以及自定义 buildingId，可直接导入 Blender 编辑。
手动操作：
- Blender → 文件 → 导入 → glTF 2.0，选择
public/models/campus.glb。 - 编辑建筑外观，保持六个建筑根对象及编号：
T01、L01、LIB01、D01、C01、G01。子网格点击会向上查找这个编号。 - 导出 GLB 时启用 Custom Properties / 自定义属性，保证
buildingId和layer写入 glTF extras。 - 先导出到另一个文件并回读核对，再替换
public/models/campus.glb。保留原模型便于回退，重启或刷新页面验证；重新构建后更新dist。 - 保留以米为单位的比例，并让 glTF 导入导出处理轴向转换。页面使用 Three.js 的 Y 轴向上，原模拟布局中 north/Y 对应页面 -Z。
提供批处理脚本，可在安装 Blender 后运行：
blender --background --factory-startup --python scripts/blender_roundtrip.py -- --export-glb它会导入模型，校验六个编号，保存 blender/campus.blend 与 blender/campus.roundtrip.glb。脚本创建独立场景，不覆盖随附的原始 GLB。本机未检测到 Blender，该脚本仅做语法检查，未实测 Blender 往返导出；不同 Blender 版本的参数请按实际安装版本核对。
campus-twin/
├─ src/
│ ├─ App.vue 页面、选择状态、播放与下载
│ ├─ components/CampusScene.vue Three.js 加载、相机、拾取、标签与资源释放
│ ├─ components/Icon.vue 本地 SVG 图标
│ ├─ domain/simulation.js 帧快照、告警、汇总与报告
│ ├─ data/campus.json 固定布局与三帧模拟数据
│ ├─ scene/createCampus.js 原创三维几何模型生成器
│ ├─ styles.css 桌面样式
│ └─ responsive.css 平板、手机适配
├─ public/models/campus.glb 可加载、可在 Blender 编辑的模型
├─ scripts/build-model.mjs 模型导出
├─ scripts/blender_roundtrip.py Blender 导入、保存工程、往返导出
├─ scripts/serve-dist.mjs 无第三方依赖的本地预览服务
├─ tests/ 单元与真实浏览器测试
├─ docs/ 设计计划、验证记录和实际界面截图
├─ dist/ 已构建的静态页面
└─ start-demo.cmd Windows 直接体验入口
先启动开发或预览服务，再开一个终端：
npm run test:e2eWindows 默认优先使用常见安装位置的 Chrome。其他环境可以先运行 npx playwright install chromium；自定义 Chrome 路径通过 CHROME_PATH 环境变量指定，自定义服务地址通过 DEMO_URL 指定。测试包含软件渲染参数，适用于没有物理 GPU 的测试环境，不代表实际设备性能。
测试会保存桌面、告警、手机截图和检查结果到 test-results/。页面使用 GPU 加速，流畅程度取决于浏览器和设备，不承诺固定帧率。
- 当前是演示项目：没有真实传感器、登录权限、设备控制或生产告警服务；刷新页面会回到初始模拟状态。
- 校园人物为程序化低多边形角色及预设路线，不代表真实人员定位、身份或轨迹，也不会计入楼宇在楼人数。
- 原型偏简化写实建筑沙盘，不是实景摄影重建或测绘精度模型。
- Three.js 引擎独立打包；生产构建可能提示单文件大于默认建议阈值，不影响构建成功。模型与代码都随项目提供。
- 修改模型后，应再核对建筑编号、坐标、点击映射、材质和图层；框架代码不保证任意第三方模型都兼容。
- 原始项目的
sources/引用材料没有被修改。