Skip to content

快速开始 ​

本节介绍使用 SceneV 3D 搭建数字孪生场景的基本流程。实际项目中可以先完成一个最小可运行场景,再逐步增加模型、数据和交互。

1. 打开在线设计器 ​

TIP

如果部署在内网或私有项目中,入口地址可能由项目配置决定。本文以在线演示站的使用方式进行说明。

2. 创建场景 ​

一个 SceneV 3D 项目通常包含以下内容:

内容说明
场景承载 3D 内容的主空间
模型设备、建筑、产线、管线等三维对象
数据源HTTP、WebSocket、MQTT、ThingsBoard 等实时数据
交互点击、选中、视角切换、弹框、跳转等动作
发布预览、分享或嵌入到业务系统

3. 搭建基础空间 ​

  1. 创建一个新的 3D 场景。
  2. 设置场景名称、背景、环境光和相机视角。
  3. 添加基础地面、园区、厂房或设备模型。
  4. 调整模型的位置、旋转、缩放,让空间比例符合业务场景。
  5. 保存场景并进行预览。

场景初始化建议 ​

配置项建议
场景名称使用业务名称,例如“智慧园区总览”“A车间产线监控”
默认相机设置到用户进入页面后最需要看到的视角
背景大屏展示建议使用深色背景,业务系统可按系统主题配置
灯光先使用全局环境光保证模型可见,再补充重点光源
坐标比例统一模型单位和缩放比例,避免设备大小失真
初始图层首屏只显示必要对象,减少加载压力

4. 接入实时数据 ​

先从最简单的数据开始,例如设备状态、温度、电流、告警数量。

json
{
  "deviceId": "device-001",
  "status": "running",
  "temperature": 36.8,
  "alarmLevel": 0
}

在场景中可以把这些字段绑定到模型状态:

数据字段绑定效果
status控制设备颜色、运行标识或动画
temperature显示到信息面板或标签
alarmLevel控制告警高亮、闪烁或弹框

数据接入流程 ​

  1. 新建数据源,选择 HTTP、WebSocket、MQTT 或 ThingsBoard。
  2. 配置数据源地址、请求参数、认证信息和刷新方式。
  3. 使用过滤器将原始数据转换为场景可识别的数据结构。
  4. 将字段绑定到模型、标签、面板或事件条件。
  5. 在预览模式下确认数据刷新和状态变化是否正常。

过滤器返回示例 ​

javascript
return [
  {
    id: "pump-01",
    label: "1号水泵",
    value: {
      status: "running",
      temperature: 36.8,
      alarmLevel: 0
    }
  }
];

5. 配置交互 ​

常见交互包括:

  1. 点击模型后显示设备详情。
  2. 点击楼栋后切换到楼层视角。
  3. 点击告警设备后打开告警面板。
  4. 通过按钮切换总览、产线、设备、告警等视角。

最小交互闭环 ​

推荐先做一个设备详情闭环:

  1. 给设备模型设置唯一编码,例如 pump-01。
  2. 绑定设备实时数据。
  3. 设置点击事件。
  4. 点击后显示详情面板。
  5. 面板展示状态、温度、压力、告警等字段。
  6. 点击空白处或关闭按钮后恢复总览状态。

6. 预览与发布 ​

完成场景配置后,建议按下面顺序检查:

  • 场景首次加载是否正常。
  • 模型是否完整显示。
  • 相机默认视角是否适合大屏展示。
  • 数据源是否能正常连接。
  • 交互动作是否符合预期。
  • 大屏分辨率下是否有文字遮挡或面板溢出。

在线站点区分编辑器和预览器,预览相关路径包含 /preview/3d、/view/3d。发布前建议至少检查一次预览模式和一次最终查看模式。

更多场景配置可继续阅读 编辑器介绍 和 场景与模型。