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。发布前建议至少检查一次预览模式和一次最终查看模式。

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