Skip to content

交互与发布

SceneV 3D 的交互用于让用户从总览快速进入局部、从空间对象进入业务详情。发布能力则用于把设计完成的 3D 场景交付给大屏、业务系统或客户现场。

1. 常见交互

交互说明
模型点击点击设备、建筑、区域后展示详情
视角切换在总览、园区、楼栋、产线、设备之间切换
状态高亮根据选中对象或告警状态突出显示
弹框面板展示设备详情、指标、告警和操作入口
场景跳转从园区进入楼层,从楼层进入设备间
外部链接跳转业务系统、工单系统或 ThingsBoard 页面

2. 交互设计原则

  • 默认视角应先展示全局态势。
  • 关键对象要有明确的可点击反馈。
  • 进入局部后应提供返回总览的方式。
  • 告警信息要比普通状态更突出。
  • 面板内容不要遮挡核心模型。

3. 典型交互流程

查看设备详情

  1. 用户点击设备模型。
  2. 模型显示选中高亮。
  3. 右侧或悬浮面板展示设备名称、状态、实时指标和告警。
  4. 用户可进一步跳转到设备详情页或工单页。

定位告警对象

  1. 告警数据推送到场景。
  2. 对应模型变为告警颜色并闪烁。
  3. 告警列表出现记录。
  4. 点击告警记录后相机聚焦到对应模型。

切换业务视角

  1. 点击顶部按钮或菜单。
  2. 相机切换到指定区域。
  3. 场景显示对应图层和标签。
  4. 面板切换到该区域的业务指标。

4. 发布前检查

发布前建议检查以下内容:

  • 首屏加载速度是否满足展示要求。
  • 模型、贴图和数据源是否能正常加载。
  • 默认相机视角是否正确。
  • 大屏分辨率下文字是否清晰。
  • 弹框、标签、按钮是否遮挡关键模型。
  • 数据异常或接口断开时是否有兜底状态。

5. 预览与查看模式

在线站点资源中可以看到 3D 预览与查看相关路径:/preview/3d/view/3d。建议按下面方式理解:

模式用途关注点
编辑模式搭建和配置场景编辑效率、配置完整性
预览模式验证运行效果数据刷新、交互动作、视觉还原
查看模式面向最终用户展示加载速度、稳定性、权限与嵌入

发布前至少使用预览模式检查一次;正式交付前使用查看模式检查一次。

6. 发布交付流程

  1. 保存当前场景配置。
  2. 进入预览模式检查模型、数据和交互。
  3. 修正遮挡、错位、数据异常和性能问题。
  4. 生成查看地址或集成入口。
  5. 在目标大屏或业务系统中验证分辨率和权限。
  6. 交付给现场或业务用户使用。

7. 嵌入业务系统

SceneV 3D 可以作为独立页面访问,也可以嵌入到已有系统中。常见方式包括:

  1. 在业务系统中以菜单页面打开 3D 场景。
  2. 使用 iframe 嵌入到监控中心或运维平台。
  3. 通过 URL 参数传递项目、设备、楼层或 token。
  4. 与统一登录、权限和业务 API 集成。

TIP

如果需要与现有大屏页面联动,可以在 SceneV 大屏中放置 3D 入口,也可以在 3D 场景中跳转到对应的大屏看板。

8. URL 参数建议

嵌入业务系统时,建议通过 URL 参数传递上下文:

参数示例说明
projectIdpark-demo指定项目或场景
deviceIdpump-01进入后定位到指定设备
floor2F指定楼层或区域
tokenxxxxx传递登录态或临时访问凭证
preview1指定进入预览模式

敏感参数不建议长期暴露在 URL 中,正式项目应结合后端鉴权或临时凭证机制。