三维场景

「三维场景」是组件库里的一个组件，放进页面后就是一块真三维的画布：地面、几何体、模型、管道、飞线、光柱、标签都在里面搭，配上灯光阴影和特效材质，再用测点数据让设备变色、液位升降、管道流动，适合做园区、厂站、机房、管廊这类数字孪生大屏。它可以和普通图表、组态画在同一页上。

上图是访客工作区里的「三维示例06-管道与飞线」预览效果：蓝色主输送管和橙色蒸汽支管带流动光效，中间的塔向三个站点发出飞线。

1. 工况按钮：「管道正向」「管道停输」「管道反向」是页面上的普通按钮，点一下就改写测点值，三维管道的流动方向随之切换，做法见下文让数据驱动设备。

新建三维场景

两种方式：

• 用模板新建：首页点「+ 新建」，选「示例 · 三维场景」（地面、几种材质的几何体、灯光阴影、光柱和标签，播放时自动环绕）或「示例 · 三维巡检」（黄昏天空、机组状态色、液位罐、流光管道，侧栏和底栏已经排好），填好名称点「创建」。
• 在已有页面里添加：在左侧组件库的「三维场景」分类里，悬停「三维场景」卡片点「+」，或直接拖进画布，再调整大小和位置。

1. 示例 · 三维场景：带示例内容的三维模板，选中后右上角出现勾。
2. 名称：填工程名，本篇用「文档示例·三维场景」。
3. 创建：创建并进入编辑器。

进入场景编辑

在画布上双击三维场景组件，就进入它的内部编辑：左侧换成「场景图层」和「3D 组件库」，视口上方出现一排三维工具。编辑完点顶部的「退出组件编辑」，或双击空白处、按 Esc 退出。

1. 退出组件编辑：回到页面编辑。
2. 场景图层：按「场景」（场景设置、相机）「灯光」「形状」「模型」「标注」「组态」「特效」分组列出场景里的元素，点一行就选中它，行尾可以隐藏、删除。
3. 3D 组件库：左侧竖排是分类，全部 51 种元素，悬停卡片点「+」添加；顶部搜索框按名称搜。
4. 三维工具条：「移动」「旋转」「缩放」切换视口里的变换手柄，「框选」「聚焦」「对齐」「复制」「删除」，「绘制」在场景里直接点画点、线、面，「节点」编辑路径，「测量」量距离。
5. 视口：左键拖动旋转视角，右键平移，滚轮缩放；点元素选中，拖手柄移动、旋转、缩放。
6. 属性面板：选中元素的设置。什么都没选时显示「场景设置」：渲染引擎（默认 WebGPU，浏览器不支持时自动改用 WebGL）、背景、环境光照、参考网格、雾效、剖切分析等。

3D 组件库的分类：

添加元素

1. 在 3D 组件库的搜索框输入名称，例如「液位罐」。
2. 悬停卡片，点中间的「+」，元素加到场景中心，同时被选中。
3. 在右侧属性面板改尺寸和位置，或者用视口里的手柄拖到合适的地方。

1. 搜索框：按名称搜三维元素，支持拼音。
2. 元素卡片：悬停后点「+」添加。
3. 场景图层：新元素出现在对应分组（液位罐在「组态」组）里。
4. 液位罐：罐体上方显示当前液位百分比，属性面板里能改罐体形状、尺寸、位置和外观（罐体颜色、液体颜色、高低液位颜色等）。

换材质

选中一个几何体，在属性面板的「材质」分组里改「材质类型」：

1. 选中的立方体：视口里出现移动手柄。
2. 材质类型：当前是「标准 PBR」。
3. 可选材质：「标准 PBR」（可调颜色、贴图、金属度、粗糙度、透明度、自发光）、「全息投影」（扫描条纹和闪烁）、「玻璃透射」、「流光渐变（建筑光效）」、「Shadertoy 着色器」、「镜面反射（仅平面）」。

材质分组里还有「辉光」开关。打开后元素会发光，前提是场景「特效」组里有「后期效果」元素并开启了辉光。几何体下面还有「阴影」「变换」「路径动画」「自转」等分组，可以让设备自己转起来、沿路线移动。

想一次看到几种材质的效果，可以打开示例「三维示例12-特效材质秀」预览。

天空与环境

不选元素时（或在场景图层里点「场景设置」），属性面板就是整个场景的设置：

• 背景：「纯色」「透明（露出页面背景）」「全景图（jpg/png/hdr）」「程序化天空」。程序化天空有「深夜星空」「晚霞」「晨曦」「极光夜」四种预设，不用任何图片素材。
• 环境光照：控制金属、玻璃等材质的反射效果。
• 参考网格、雾效：网格可以无限延伸；雾效有按远近距离和指数两种。
• 剖切分析：沿某个轴剖开场景看内部。

画管道、飞线和区域

点三维工具条的「绘制」，在视口里直接点出元素的形状，比先添加再改坐标快得多：

1. 绘制：打开绘制菜单。
2. 画点：光柱标记、标记点、值标签，在地面上点一下就放一个。
3. 画线：线条、管道、管网、光墙围栏、导引线、飞线，逐点点击画线。
4. 画面：区域面、拉伸体、围墙（闭合），点出一圈轮廓。

以管道为例：

1. 在「绘制」菜单点「管道」，顶部提示「逐点点击画线，回车完成，Esc 取消，Delete 删上一点」。
2. 在地面上依次点出管道经过的位置，按 Enter 完成。
3. 管道建好后自动选中，在属性面板调管径、材质和流动效果；要改路线，点工具条的「节点」拖动路径点。

1. 管道：转角自动做成圆弧弯头，管体上的亮色段就是流动效果。
2. 路径点：每行一个点的坐标，可以直接改数字微调。
3. 管径：管道粗细。
4. 流动效果：「启用流动」「流动色」「流速」「流动段数」「反向流动」「辉光」。

镜头与巡航

在场景图层里点「相机」，设置打开大屏时的视角和播放时的镜头运动：

1. 相机位置 / 注视目标：相机在哪里、看向哪里。
2. 保存当前视角为初始视角：先在视口里拖到满意的角度，再点这个按钮，预览和发布后就从这个角度开始。
3. 入场飞入：打开后，大屏加载时镜头从远处飞到初始视角。
4. 自动巡航：模式有「自动环绕（绕注视点旋转）」「书签巡航（逐个飞览视角书签）」「路径漫游（沿路径第一/三人称行进）」；「仅播放态巡航」打开时，编辑时镜头不动，只在预览和发布后转。

下面还有「第一人称行走」（播放时用 W、A、S、D 键行走）、「小地图」和「操控限制」（限制缩放距离、俯仰角，禁止平移）。书签巡航要先在 3D 组件库的「场景」分类添加几个「视角书签」。

让数据驱动设备

三维场景用一张「测点表」驱动元素：表里每行一个测点，一列是测点名（如 STATE、TEMP），一列是当前值。三维场景组件绑定这两列，场景里的元素再各自认领一个测点名。下面以示例「三维示例05-值标签与测点驱动」为例。

第一步：三维场景组件绑定测点表。 退出场景编辑，选中三维场景组件，在属性面板「数据」页签里：

1. 三维场景组件：选中的是组件本身，不是里面的元素。
2. 测点数据：「测点键」选测点名那一列，「测点值」选数值那一列。
3. 数据来源：项目数据源里的「测点数据」表，勾选「测点」「数值」两个字段。数据源怎么建见数据接入与绑定。
4. 数据预览：这张表现在有 TEMP、PRESS、FLOW、STATE、ALARM 五个测点。

第二步：元素认领测点并设置规则。 双击进入场景，选中一个元素，在「数据」页签的「测点驱动」分组里设置：

1. 选中的元素：示例里的「1#泵」。
2. 测点键：这个元素看哪个测点，这里是 STATE。
3. 状态色规则：每行一条「值=颜色」，示例是 1=#22c55e（运行绿）、0=#94a3b8（停机灰）、fault=#ef4444（故障红）。同义的值可以用 | 连起来，如 run|1=#22c55e。
4. 告警闪烁值：测点等于这些值时元素闪烁，这里填 fault。

液位罐用量程和高低阈值把数值换成液位高度和颜色，管道、飞线可以按值控制流动的开关和方向，值标签和数据看板牌直接显示测点值。

第三步：预览。 示例页面上的「模拟故障」按钮把 STATE 写成 fault，三台设备立刻变红并闪烁：

1. 模拟故障：按钮的点击事件用的是「三维·写测点值」动作，测点键填 STATE、写入值填 fault、目标场景选这个三维场景。
2. 设备：按状态色规则变成红色并闪烁；点「恢复运行」再写回 1 就变回绿色。

实际项目里，测点表接 HTTP 接口、WebSocket 或平台数据表，数值一刷新，场景就跟着变，不需要写代码。

点击设备：事件交互

选中三维场景组件，在「事件」页签点「添加事件」。触发方式除了通用的「点击」「鼠标移入时」等，还有三维专用的「点击三维元素时」「双击三维元素时」「右键三维元素时」「悬停三维元素时」「点击空白处时」；动作里有一组「三维·」开头的专用动作。

下面做一个「双击哪台设备，镜头就飞过去特写」：

1. 触发：选「双击三维元素时」。
2. 动作：选「三维·聚焦元素」，镜头会按元素大小自动取景。
3. 目标元素：留空，表示「双击的是哪个就聚焦哪个」；填了就只聚焦指定元素。
4. 目标场景：选这个三维场景组件。

常用的三维动作：

完整的触发器和通用动作见事件交互与多状态。示例「三维示例09-交互点击与联动」演示了点设备更新信息条并给相机特写、点空白回总览。

相关文档

• 组态：二维工艺流程图，和三维场景共用同一套测点驱动方式。
• 二维地图：CAD 图纸和互联网地图。
• 数据接入与绑定：建测点表需要的数据源。
• AI 助手：让 AI 直接往三维场景里加元素、改材质。