交互与发布
SceneV 3D 的交互用于让用户从总览快速进入局部、从空间对象进入业务详情。发布能力则用于把设计完成的 3D 场景交付给大屏、业务系统或客户现场。
1. 常见交互
| 交互 | 说明 |
|---|---|
| 模型点击 | 点击设备、建筑、区域后展示详情 |
| 视角切换 | 在总览、园区、楼栋、产线、设备之间切换 |
| 状态高亮 | 根据选中对象或告警状态突出显示 |
| 弹框面板 | 展示设备详情、指标、告警和操作入口 |
| 场景跳转 | 从园区进入楼层,从楼层进入设备间 |
| 外部链接 | 跳转业务系统、工单系统或 ThingsBoard 页面 |
2. 交互设计原则
- 默认视角应先展示全局态势。
- 关键对象要有明确的可点击反馈。
- 进入局部后应提供返回总览的方式。
- 告警信息要比普通状态更突出。
- 面板内容不要遮挡核心模型。
3. 典型交互流程
查看设备详情
- 用户点击设备模型。
- 模型显示选中高亮。
- 右侧或悬浮面板展示设备名称、状态、实时指标和告警。
- 用户可进一步跳转到设备详情页或工单页。
定位告警对象
- 告警数据推送到场景。
- 对应模型变为告警颜色并闪烁。
- 告警列表出现记录。
- 点击告警记录后相机聚焦到对应模型。
切换业务视角
- 点击顶部按钮或菜单。
- 相机切换到指定区域。
- 场景显示对应图层和标签。
- 面板切换到该区域的业务指标。
4. 发布前检查
发布前建议检查以下内容:
- 首屏加载速度是否满足展示要求。
- 模型、贴图和数据源是否能正常加载。
- 默认相机视角是否正确。
- 大屏分辨率下文字是否清晰。
- 弹框、标签、按钮是否遮挡关键模型。
- 数据异常或接口断开时是否有兜底状态。
5. 预览与查看模式
在线站点资源中可以看到 3D 预览与查看相关路径:/preview/3d、/view/3d。建议按下面方式理解:
| 模式 | 用途 | 关注点 |
|---|---|---|
| 编辑模式 | 搭建和配置场景 | 编辑效率、配置完整性 |
| 预览模式 | 验证运行效果 | 数据刷新、交互动作、视觉还原 |
| 查看模式 | 面向最终用户展示 | 加载速度、稳定性、权限与嵌入 |
发布前至少使用预览模式检查一次;正式交付前使用查看模式检查一次。
6. 发布交付流程
- 保存当前场景配置。
- 进入预览模式检查模型、数据和交互。
- 修正遮挡、错位、数据异常和性能问题。
- 生成查看地址或集成入口。
- 在目标大屏或业务系统中验证分辨率和权限。
- 交付给现场或业务用户使用。
7. 嵌入业务系统
SceneV 3D 可以作为独立页面访问,也可以嵌入到已有系统中。常见方式包括:
- 在业务系统中以菜单页面打开 3D 场景。
- 使用 iframe 嵌入到监控中心或运维平台。
- 通过 URL 参数传递项目、设备、楼层或 token。
- 与统一登录、权限和业务 API 集成。
TIP
如果需要与现有大屏页面联动,可以在 SceneV 大屏中放置 3D 入口,也可以在 3D 场景中跳转到对应的大屏看板。
8. URL 参数建议
嵌入业务系统时,建议通过 URL 参数传递上下文:
| 参数 | 示例 | 说明 |
|---|---|---|
projectId | park-demo | 指定项目或场景 |
deviceId | pump-01 | 进入后定位到指定设备 |
floor | 2F | 指定楼层或区域 |
token | xxxxx | 传递登录态或临时访问凭证 |
preview | 1 | 指定进入预览模式 |
敏感参数不建议长期暴露在 URL 中,正式项目应结合后端鉴权或临时凭证机制。