快速开始
本节介绍使用 SceneV 3D 搭建数字孪生场景的基本流程。实际项目中可以先完成一个最小可运行场景,再逐步增加模型、数据和交互。
1. 打开在线设计器
TIP
如果部署在内网或私有项目中,入口地址可能由项目配置决定。本文以在线演示站的使用方式进行说明。
2. 创建场景
一个 SceneV 3D 项目通常包含以下内容:
| 内容 | 说明 |
|---|---|
| 场景 | 承载 3D 内容的主空间 |
| 模型 | 设备、建筑、产线、管线等三维对象 |
| 数据源 | HTTP、WebSocket、MQTT、ThingsBoard 等实时数据 |
| 交互 | 点击、选中、视角切换、弹框、跳转等动作 |
| 发布 | 预览、分享或嵌入到业务系统 |
3. 搭建基础空间
- 创建一个新的 3D 场景。
- 设置场景名称、背景、环境光和相机视角。
- 添加基础地面、园区、厂房或设备模型。
- 调整模型的位置、旋转、缩放,让空间比例符合业务场景。
- 保存场景并进行预览。
场景初始化建议
| 配置项 | 建议 |
|---|---|
| 场景名称 | 使用业务名称,例如“智慧园区总览”“A车间产线监控” |
| 默认相机 | 设置到用户进入页面后最需要看到的视角 |
| 背景 | 大屏展示建议使用深色背景,业务系统可按系统主题配置 |
| 灯光 | 先使用全局环境光保证模型可见,再补充重点光源 |
| 坐标比例 | 统一模型单位和缩放比例,避免设备大小失真 |
| 初始图层 | 首屏只显示必要对象,减少加载压力 |
4. 接入实时数据
先从最简单的数据开始,例如设备状态、温度、电流、告警数量。
json
{
"deviceId": "device-001",
"status": "running",
"temperature": 36.8,
"alarmLevel": 0
}在场景中可以把这些字段绑定到模型状态:
| 数据字段 | 绑定效果 |
|---|---|
status | 控制设备颜色、运行标识或动画 |
temperature | 显示到信息面板或标签 |
alarmLevel | 控制告警高亮、闪烁或弹框 |
数据接入流程
- 新建数据源,选择 HTTP、WebSocket、MQTT 或 ThingsBoard。
- 配置数据源地址、请求参数、认证信息和刷新方式。
- 使用过滤器将原始数据转换为场景可识别的数据结构。
- 将字段绑定到模型、标签、面板或事件条件。
- 在预览模式下确认数据刷新和状态变化是否正常。
过滤器返回示例
javascript
return [
{
id: "pump-01",
label: "1号水泵",
value: {
status: "running",
temperature: 36.8,
alarmLevel: 0
}
}
];5. 配置交互
常见交互包括:
- 点击模型后显示设备详情。
- 点击楼栋后切换到楼层视角。
- 点击告警设备后打开告警面板。
- 通过按钮切换总览、产线、设备、告警等视角。
最小交互闭环
推荐先做一个设备详情闭环:
- 给设备模型设置唯一编码,例如
pump-01。 - 绑定设备实时数据。
- 设置点击事件。
- 点击后显示详情面板。
- 面板展示状态、温度、压力、告警等字段。
- 点击空白处或关闭按钮后恢复总览状态。
6. 预览与发布
完成场景配置后,建议按下面顺序检查:
- 场景首次加载是否正常。
- 模型是否完整显示。
- 相机默认视角是否适合大屏展示。
- 数据源是否能正常连接。
- 交互动作是否符合预期。
- 大屏分辨率下是否有文字遮挡或面板溢出。
在线站点区分编辑器和预览器,预览相关路径包含 /preview/3d、/view/3d。发布前建议至少检查一次预览模式和一次最终查看模式。