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 中,正式项目应结合后端鉴权或临时凭证机制。