组态与流动

2026年8月20日大约 18 分钟

组态与流动（15 种）

三维组态的主力元素：管道 / 管网 / 飞线 / 线条 / 导引线表达流向，光墙 / 雷达 / 区域面 / 热力图表达范围与态势，液位罐 / 数据点云 / 视频 / LED 字幕把测点值直接变成可视形态。流动类多支持 flow-rules（值=on/off/reverse[:速度]）。

元素都放在 scene-3d 组件的 pieces 里，按 { uid, type, options } 描述；坐标是世界坐标（场景单位），角度用度（°）。下方每节给出用途、在线预览、全量属性表与可复制 JSON。测点驱动三件套（data-key + state-rules + blink-values）见测点数据驱动，触发器与动作见播放态交互。

在线预览按需加载

三维每个场景独占一个 GPU 上下文（引擎侧同页实例配额为 4），故本页预览默认不自动运行——点「加载在线预览」才建场景，同页只保留一个活跃预览（打开新的会自动关掉上一个）。预览用 vjmap 官方公开服务，联网即可出图。

管道 `scene3d-pipe`

管道：给一串 x,y,z 自动圆滑成管，带流动贴图。测点可控管体色（state-rules）与流动开关 / 方向 / 速度（flow-rules）。

预览即 data/三维/元素/14-pipe-管道.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`pipe-path`	路径点	`string(textarea,rows=5)`	`-6,0.5,0 -2,0.5,0 -2,0.5,4 3,0.5,4`
`pipe-radius`	管径	`number(min=0.01,step=0.05)`	`0.18`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`mat-color`	颜色	`color`	`#3d7dd8`
`mat-metalness`	金属度	`slider(min=0,max=1,step=0.05)`	`0.6`
`mat-roughness`	粗糙度	`slider(min=0,max=1,step=0.05)`	`0.35`
`flow`	启用流动	`boolean`	`true`
`flow-color`	流动色	`color`	`#7fd6ff`
`flow-speed`	流速	`slider(min=0,max=3,step=0.1)`	`0.8`
`flow-density`	流动段数	`slider(min=1,max=16,step=1)`	`4`
`flow-reverse`	反向流动	`boolean`	`false`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`flow-rules`	流动规则	`string(textarea,rows=3)`	—

JSON 片段

{
  "uid": "pipe_main",
  "type": "scene3d-pipe",
  "options": {
    "pipe-path": "-13,1,1.6\n-6,1,1.6\n-6,1,-5\n3,1,-5\n8.2,1,-5",
    "pipe-radius": 0.3,
    "mat-color": "#2c5a8f",
    "mat-metalness": 0.6,
    "mat-roughness": 0.35,
    "flow": true,
    "flow-color": "#59c8ff",
    "flow-speed": 1,
    "flow-density": 5,
    "glow": true,
    "data-key": "PIPE",
    "flow-rules": "run=on\nstop=off\nback=reverse:1.8\nalarm=off",
    "state-rules": "run=#2c5a8f\nstop=#4a5a70\nback=#7a5a12\nalarm=#c22a3a"
  }
}

管网 `scene3d-pipenet`

管网（分支拓扑）：多段路径一次成网，端点重合自动生成节点球，断面可选圆管 / 拱形管廊 / 风管桥架。给水 / 电力 / 燃气分支网络用。

预览即 data/三维/元素/15-pipenet-管网拓扑.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`net-source`	路径来源	`select`	`static`	可选：`static` / `cad`
`net-paths`	管网路径	`string(textarea,rows=8)`	`-8,0.6,0 0,0.6,0 8,0.6,0 --- 0,0.6,0 0,0.6,6 --- 0,0.6,0 …`
`cad-mapid`	图纸 ID	`string`	—
`cad-version`	版本	`string`	—
`cad-layer`	样式图层	`string`	—
`cad-condition`	筛选条件	`string(textarea,rows=2)`	—
`cad-limit`	实体上限	`number(min=1,max=20000,step=100)`	`3000`
`fit-size`	适配尺寸	`number(min=1,step=10)`	`200`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`net-shape`	断面形状	`select`	`circle`	可选：`circle` / `arch` / `rect`
`net-radius`	管径	`number(min=0.05,step=0.05)`	`0.3`
`net-rect-width`	断面宽	`number(min=0.1,step=0.1)`	`1.2`
`net-rect-height`	断面高	`number(min=0.1,step=0.1)`	`0.8`
`net-node-radius`	节点半径	`number(min=0.05,step=0.05)`	`0.45`
`net-color`	管体颜色	`color`	`#3f7dd8`
`net-inner-color`	内壁颜色	`color`	`#1a2c44`
`net-flow`	流动箭头	`boolean`	`false`
`net-flow-speed`	流动速度	`number(min=-10,max=10,step=0.1)`	`1`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "net_water",
  "type": "scene3d-pipenet",
  "options": {
    "net-paths": "-14,0.6,-4\n-6,0.6,-4\n-6,0.6,4\n-14,0.6,4\n-14,0.6,-4\n---\n-10,0.6,-4\n-10,0.6,4\n---\n-14,0.6,0\n-6,0.6,0\n---\n-10,0.6,0\n-10,3,0",
    "net-shape": "circle",
    "net-radius": 0.28,
    "net-node-radius": 0.45,
    "net-color": "#3f7dd8",
    "net-inner-color": "#1a2c44",
    "glow": false
  }
}

人员点位 `scene3d-persons`

人员点位：定位系统驱动的移动人员，按 id 差分（新增出现 / 缺失移除 / 移动补间平滑）。可用零素材定位针精灵或人物模型（行走 / 待机动画自动切换），支持沿管网行走与历史轨迹回放。

预览即 data/三维/元素/40-persons-人员点位.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

本预览依赖外部资源

人物模型模式默认用 three 官方士兵模型（公网直链）；本预览用零素材的定位针精灵，不依赖外网。

属性

属性	名称	类型	默认	说明
`person-mode`	人员样式	`select`	`sprite`	可选：`sprite` / `model`
`person-size`	图标大小	`slider(min=16,max=96,step=2)`	`40`
`person-color`	图标颜色	`color`	`#4cc3ff`
`icon-url`	自定义图标	`file(accept=png\|jpg\|jpeg\|webp\|svg)`	—
`model-url`	人物模型	`file(accept=glb\|gltf\|fbx\|obj)`	`https://raw.githubusercontent.com/mrdoob/three.js/dev/exa…`
`model-size`	人物身高	`number(min=0.2,step=0.1)`	`1.8`
`walk-clip`	行走动画名	`string`	`Walk`
`idle-clip`	待机动画名	`string`	`Idle`
`model-heading`	朝向偏移	`number(unit=°,step=15)`	`180`
`name-size`	姓名字号	`number(unit=px,min=8,max=32)`	`13`
`name-color`	姓名颜色	`color`	`#7dffea`
`name-prefix`	名称前缀	`string`	`人员`
`name-overlay`	姓名叠画图内	`boolean`	`false`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`select-wave`	选中光波	`boolean`	`true`
`wave-color`	光波颜色	`color`	`#00e5ff`
`wave-size`	光波半径	`number(min=0.2,step=0.2)`	`2.4`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`follow-net`	关联管网	`select(editable)`	—
`move-duration`	移动补间时长	`number(unit=ms,min=0,step=100)`	`3000`
`trail-limit`	轨迹点数上限	`number(min=2,max=5000,step=50)`	`400`
`demo-walk`	启用演示	`boolean`	`false`
`demo-count`	人数	`number(min=1,max=200,step=1)`	`20`
`demo-interval`	推送周期	`number(unit=s,min=0.5,step=0.5)`	`3`
`demo-step`	每步距离	`number(min=0.5,step=0.5)`	`6`

JSON 片段

{
  "uid": "p_pers",
  "type": "scene3d-persons",
  "options": {
    "data-key": "PERSONS",
    "follow-net": "p_net",
    "person-mode": "model",
    "model-size": 1.8,
    "move-duration": 3000,
    "trail-limit": 400,
    "position": [
      0,
      0.32,
      0
    ],
    "person-size": 40,
    "person-color": "#4cc3ff",
    "name-size": 13,
    "name-color": "#7dffea",
    "name-prefix": "人员",
    "select-wave": true,
    "wave-color": "#00e5ff",
    "wave-size": 1.6,
    "demo-walk": true,
    "demo-count": 8,
    "demo-interval": 2.5,
    "demo-step": 2
  }
}

车流 `scene3d-carflow`

车流：收费站 / 闸口过车模拟。车道与抬杆按主模型内命名子对象匹配，车辆按间隔发车、杆前停留、抬杆通过，车顶可挂车牌信息卡。

预览即 data/三维/场景/45-收费站管理云平台.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

本预览依赖外部资源

主模型与六种车模取自 vjmap 官方演示资源，需要能访问 vjmap.com；车流默认仅播放态运行。

属性

属性	名称	类型	默认	说明
`model-piece`	关联模型	`select(editable)`	—
`lane-match`	车道子对象	`string`	`CD*`
`lane-reverse`	反向车道	`string`	—
`pole-match`	抬杆子对象	`string`	`GZ*`
`pole-axis`	抬杆旋转轴	`select`	`z`	可选：`x` / `y` / `z`
`pole-angle`	抬起角度	`number(unit=°,step=5)`	`90`
`pole-duration`	抬杆时长	`number(unit=s,min=0.2,step=0.2)`	`2`
`car-urls`	车型清单	`string(textarea,rows=6)`	`https://vjmap.com/effect/tollstation/models/bigTruck.glb,…`
`car-scale`	车模缩放	`number(min=0.01,step=0.1)`	`1`
`drive-duration`	行驶时长	`number(unit=s,min=0.5,step=0.5)`	`3`
`dwell`	杆前停留	`number(unit=s,min=0,step=0.5)`	`2`
`pole-close-delay`	过杆后降杆延时	`number(unit=s,min=0,step=0.5)`	`1`
`spawn-gap`	发车间隔	`number(unit=s,min=0,step=0.5)`	`3`
`approach-dist`	驶入距离	`number(min=1,step=5)`	`50`
`stop-dist`	杆前停距	`number(step=0.5)`	`2`
`exit-dist`	驶出距离	`number(min=1,step=5)`	`60`
`flow-play-only`	仅播放态运行	`boolean`	`true`
`show-card`	显示信息卡	`boolean`	`true`
`card-width`	卡片宽度	`number(min=1,step=0.5)`	`6`
`card-plate-prefix`	车牌前缀	`string`	`京B`
`card-abnormal-rate`	异常概率	`slider(min=0,max=1,step=0.05)`	`0.1`
`lane-tags`	显示号牌	`boolean`	`true`
`tag-size`	号牌宽度	`number(unit=px,min=24,max=160)`	`56`
`tag-color`	文字颜色	`color`	`#ffffff`
`tag-bg`	底色	`color`	`rgba(10,45,90,0.9)`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "w_flow",
  "type": "scene3d-carflow",
  "options": {
    "model-piece": "w_toll",
    "lane-match": "CD*",
    "lane-reverse": "CD01|CD02|CD03|CD04",
    "pole-match": "GZ*",
    "pole-axis": "z",
    "pole-angle": 90,
    "pole-duration": 2,
    "drive-duration": 3,
    "dwell": 2,
    "pole-close-delay": 1,
    "spawn-gap": 3,
    "approach-dist": 50,
    "stop-dist": 2,
    "exit-dist": 60,
    "show-card": true,
    "card-width": 6,
    "card-plate-prefix": "京B",
    "card-abnormal-rate": 0.1,
    "lane-tags": true,
    "tag-size": 56
  }
}

飞线 `scene3d-flyline`

飞线：两点之间的拱形彗星线，带脉冲光点与反向回程。做数据汇聚 / 调度流向。

预览即 data/三维/元素/16-flyline-飞线.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`fly-from`	起点	`vector<X,Y,Z>`	`[-5,0.2,-3]`
`fly-to`	终点	`vector<X,Y,Z>`	`[5,0.2,3]`
`fly-height`	拱高	`number(min=0,step=0.5)`	`3`
`fly-width`	线宽	`number(min=0.005,step=0.01)`	`0.05`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`line-color`	轨迹色	`color`	`#2e5f9e`
`pulse-color`	脉冲色	`color`	`#7fd6ff`
`pulse-count`	脉冲数	`slider(min=1,max=6,step=1)`	`1`
`glow`	辉光	`boolean`	`false`
`flow`	启用	`boolean`	`true`
`flow-speed`	速度	`slider(min=0,max=3,step=0.1)`	`0.6`
`flow-reverse`	反向	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`flow-rules`	流动规则	`string(textarea,rows=3)`	—

JSON 片段

{
  "uid": "fl_a",
  "type": "scene3d-flyline",
  "options": {
    "fly-from": [
      -13,
      2.6,
      -8
    ],
    "fly-to": [
      0,
      8,
      0
    ],
    "fly-height": 4,
    "fly-width": 0.04,
    "line-color": "#1d4f8f",
    "pulse-color": "#7fd6ff",
    "pulse-count": 1,
    "glow": true,
    "flow": true,
    "flow-speed": 0.7,
    "data-key": "LINK",
    "flow-rules": "on=on\noff=off\nrev=reverse:1.5"
  }
}

线条 `scene3d-line`

线条（批量细线）：一实体多条路径，动画可选生长循环或跑马亮段。细线配辉光即霓虹边界。

预览即 data/三维/元素/17-line-线条.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`line-paths`	线路径	`string(textarea,rows=6)`	`-8,0.1,-6 8,0.1,-6 8,0.1,6 --- -8,0.1,6 -8,0.1,-6`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`line-color`	颜色	`color`	`#5fd0ff`
`line-animate`	动画	`select`	`none`	可选：`none` / `grow` / `march`
`animate-speed`	动画速度	`slider(min=0.1,max=5,step=0.1)`	`1`
`march-length`	亮段长度	`slider(min=0.05,max=0.9,step=0.05)`	`0.25`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "ln_border",
  "type": "scene3d-line",
  "options": {
    "line-paths": "-15,0.08,-7\n-5,0.08,-7\n-5,0.08,7\n-15,0.08,7\n-15,0.08,-7\n---\n-10,0.08,-7\n-10,0.08,7",
    "line-color": "#5fd0ff",
    "line-animate": "none",
    "glow": true,
    "data-key": "BORDER",
    "state-rules": "ok=#5fd0ff\nalarm=#ff4d6a",
    "blink-values": "alarm"
  }
}

导引线 `scene3d-trail`

导引线（箭头流动宽线）：屏幕像素等宽的发光箭头带，可配半透明同色底带。疏散路线与巡检动线首选。

预览即 data/三维/元素/18-trail-导引线.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`trail-path`	路径点	`string(textarea,rows=5)`	`-8,0.05,0 -2,0.05,0 2,0.05,4 8,0.05,4`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`trail-color`	颜色	`color`	`#2ee6a8`
`trail-width`	线宽	`slider(min=2,max=64,step=1,unit=px)`	`14`
`trail-icon-length`	箭头长度	`slider(min=1,max=60,step=1)`	`18`
`trail-icon-space`	箭头间距	`slider(min=0,max=60,step=1)`	`6`
`trail-animate`	流动	`boolean`	`true`
`trail-speed`	流速	`slider(min=0,max=10,step=0.2)`	`2`
`trail-show-line`	显示底带	`boolean`	`false`
`trail-line-opacity`	底带浓度	`slider(min=0.05,max=1,step=0.05)`	`0.45`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`flow-rules`	流动规则	`string(textarea,rows=3)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "tr_main",
  "type": "scene3d-trail",
  "options": {
    "trail-path": "-11,0.06,-6\n-6,0.06,-6\n-6,0.06,0\n2,0.06,0\n2,0.06,6\n10,0.06,6",
    "trail-color": "#2ee6a8",
    "trail-width": 16,
    "trail-icon-length": 20,
    "trail-icon-space": 6,
    "trail-animate": true,
    "trail-speed": 2,
    "trail-show-line": false,
    "glow": true,
    "data-key": "EVAC",
    "state-rules": "normal=#2ee6a8\nevac=#ff4d5e",
    "flow-rules": "normal=on:2\nevac=on:5",
    "blink-values": ""
  }
}

光墙围栏 `scene3d-wall`

光墙围栏：沿路径立起半透明流光墙，可闭合成电子围栏。周界告警标配，测点命中可整墙变红闪烁。

预览即 data/三维/元素/19-wall-光墙围栏.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`wall-path`	围栏路径	`string(textarea,rows=5)`	`-6,-6 6,-6 6,6 -6,6`
`wall-height`	墙高	`number(min=0.1,step=0.5)`	`3`
`wall-close`	自动闭合	`boolean`	`true`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`wall-color`	颜色	`color`	`#00e5ff`
`wall-opacity`	基底不透明度	`slider(min=0.05,max=1,step=0.05)`	`0.55`
`wall-flow`	流光扫动	`boolean`	`true`
`flow-speed`	扫动速度	`slider(min=0,max=3,step=0.05)`	`0.5`
`flow-repeat`	光带数量	`slider(min=1,max=12,step=1)`	`3`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "wall_fence",
  "type": "scene3d-wall",
  "options": {
    "wall-path": "-1,-6\n-12.5,-6\n-15,0\n-12.5,6\n-1,6\n1.5,0",
    "wall-height": 2.4,
    "wall-close": true,
    "position": [
      0,
      0,
      0
    ],
    "wall-color": "#00e5ff",
    "wall-opacity": 0.5,
    "wall-flow": true,
    "flow-speed": 0.6,
    "flow-repeat": 3,
    "glow": true,
    "data-key": "PERIM",
    "state-rules": "ok=#00e5ff\nintrude=#ff4d6a",
    "blink-values": "intrude"
  }
}

雷达扫描 `scene3d-radar`

雷达扫描：贴地旋转的扇形扫描面，可调半径 / 转速 / 扇区角度。表达监测覆盖范围与态势。

预览即 data/三维/元素/20-radar-雷达扫描.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`radar-radius`	半径	`number(min=0.1,step=0.5)`	`5`
`position`	位置	`vector<X,Y,Z>`	`[0,0.15,0]`
`radar-color`	颜色	`color`	`#00ffb3`
`radar-speed`	转速	`slider(min=0.1,max=10,step=0.1)`	`2`
`radar-sector`	扇区角度	`slider(min=10,max=360,step=5,unit=°)`	`200`
`radar-opacity`	不透明度	`slider(min=0.05,max=1,step=0.05)`	`0.9`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "rad_main",
  "type": "scene3d-radar",
  "options": {
    "position": [
      -7,
      0.06,
      0
    ],
    "radar-radius": 8,
    "radar-color": "#00ffb3",
    "radar-speed": 2,
    "radar-sector": 200,
    "radar-opacity": 0.85,
    "glow": true,
    "data-key": "GUARD",
    "state-rules": "ok=#00ffb3\nalarm=#ff4d6a",
    "blink-values": "alarm"
  }
}

区域面 `scene3d-zone`

区域面：≥3 点闭合的贴地或抬高平台面。责任分区 / 危险区 / 管控区，告警时整区红闪。

预览即 data/三维/元素/23-zone-区域面.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认
`zone-points`	区域顶点	`string(textarea,rows=5)`	`-6,-4 6,-4 6,4 -6,4`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`zone-color`	填充颜色	`color`	`#2e8bff`
`zone-opacity`	不透明度	`slider(min=0.05,max=1,step=0.05)`	`0.35`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "zn_prod",
  "type": "scene3d-zone",
  "options": {
    "zone-points": "-16,-10\n-2,-10\n-2,-4\n-8,-4\n-8,0\n-16,0",
    "zone-color": "#2e8bff",
    "zone-opacity": 0.32,
    "glow": false
  }
}

热力图 `scene3d-heatmap`

热力图：贴地色斑（2d）或起伏曲面（3d）两种模式，可用测点 JSON 整批实时替换。

预览即 data/三维/元素/21-heatmap-热力图.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`heat-mode`	模式	`select`	`2d`	可选：`2d` / `3d`
`heat-size`	覆盖范围	`vector<X,Y,Z>`	`[20,0,20]`
`heat-height`	起伏高度	`number(min=0.1,step=0.5)`	`3`
`position`	位置	`vector<X,Y,Z>`	`[0,0.18,0]`
`heat-opacity`	不透明度	`slider(min=0.05,max=1,step=0.05)`	`0.75`
`heat-radius`	点半径	`slider(min=4,max=120,step=2)`	`40`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`heat-points`	静态数据点	`string(textarea,rows=6)`	`-6,-4,35 -2,2,68 0,-1,92 3,4,55 6,-3,74 -4,5,28 5,1,60`
`heat-min`	量程下限	`number`	`0`
`heat-max`	量程上限	`number`	`100`
`data-key`	测点键	`select(editable)`	—

JSON 片段

{
  "uid": "heat_2d",
  "type": "scene3d-heatmap",
  "options": {
    "heat-mode": "2d",
    "heat-size": [
      16,
      0,
      14
    ],
    "position": [
      -10,
      0.06,
      -1
    ],
    "heat-opacity": 0.8,
    "heat-radius": 40,
    "heat-min": 0,
    "heat-max": 100,
    "heat-points": "-6,-4,88\n-4,-1,72\n-2,3,45\n0,-3,95\n2,1,60\n4,4,30\n6,-2,78\n-5,4,25\n5,-5,52\n1,5,40",
    "data-key": "HEAT"
  }
}

液位罐 `scene3d-tank`

液位罐：开口玻璃罐体 + 半透明液柱与波浪液面，按量程把测点值变成液位高度，低 / 高阈值自动变色并可脉冲告警。

预览即 data/三维/元素/22-tank-液位罐.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`tank-shape`	罐体形状	`select`	`cylinder`	可选：`cylinder` / `box`
`tank-size`	尺寸	`vector<宽,高,深>`	`[3,4,3]`
`position`	位置	`vector<X,Y,Z>`	`[0,0,0]`
`shell-color`	罐体颜色	`color`	`#9ec4dc`
`shell-opacity`	罐体透明度	`slider(min=0.05,max=0.9,step=0.05)`	`0.22`
`liquid-color`	液体颜色	`color`	`#22a7f0`
`liquid-low-color`	低液位颜色	`color`	`#f59e0b`
`liquid-high-color`	高液位颜色	`color`	`#ef4444`
`show-value`	顶部百分比	`boolean`	`true`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`tank-value`	静态液位值	`number`	`50`
`tank-min`	量程下限	`number`	`0`
`tank-max`	量程上限	`number`	`100`
`tank-low`	低液位阈值	`slider(min=0,max=100,step=1,unit=%)`	`20`
`tank-high`	高液位阈值	`slider(min=0,max=100,step=1,unit=%)`	`85`
`blink-high`	高液位闪烁	`boolean`	`true`

JSON 片段

{
  "uid": "tk_oil",
  "type": "scene3d-tank",
  "options": {
    "tank-shape": "cylinder",
    "tank-size": [
      3.6,
      5,
      3.6
    ],
    "position": [
      -8,
      0,
      0
    ],
    "shell-color": "#7fb3d9",
    "shell-opacity": 0.26,
    "liquid-color": "#f59e0b",
    "liquid-low-color": "#f59e0b",
    "liquid-high-color": "#ef4444",
    "show-value": true,
    "glow": false,
    "data-key": "LV_OIL",
    "tank-min": 0,
    "tank-max": 100,
    "tank-low": 20,
    "tank-high": 85,
    "blink-high": true
  }
}

数据点云 `scene3d-points`

数据点云：球 / 方 / 菱三种点形，按量程三段配色、可按值缩放。InstancedMesh 单次绘制上千点位。

预览即 data/三维/元素/24-points-数据点云.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`points-shape`	点形状	`select`	`sphere`	可选：`sphere` / `box` / `diamond`
`points-size`	点大小	`number(min=0.02,step=0.1)`	`0.4`
`points-size-by-value`	值越大点越大	`boolean`	`false`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`glow`	辉光	`boolean`	`true`
`points-min`	量程下限	`number`	`0`
`points-max`	量程上限	`number`	`100`
`points-color-low`	低值色	`color`	`#22c55e`
`points-color-mid`	中值色	`color`	`#eab308`
`points-color-high`	高值色	`color`	`#ef4444`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`points-data`	静态数据点	`string(textarea,rows=6)`	`-4,1,-4,20 0,1.5,-4,45 4,1,-4,80 -4,2,0,35 0,2.5,0,95 4,2…`
`data-key`	测点键	`select(editable)`	—

JSON 片段

{
  "uid": "pts_grid",
  "type": "scene3d-points",
  "options": {
    "points-shape": "sphere",
    "points-size": 0.4,
    "points-size-by-value": false,
    "glow": true,
    "points-min": 0,
    "points-max": 100,
    "points-color-low": "#22c55e",
    "points-color-mid": "#eab308",
    "points-color-high": "#ef4444",
    "points-data": "",
    "data-key": "GRID",
    "position": [
      0,
      0,
      0
    ]
  }
}

视频面板 `scene3d-video`

视频面板：mp4 / webm 贴在三维面板上，留空显示「无信号」占位，带发光边框。监控墙 / 设备屏用。

预览即 data/三维/元素/25-video-视频面板.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

本预览依赖外部资源

演示视频为公网直链，加载不出时改 video-url；留空则显示「无信号」占位。

属性

属性	名称	类型	默认
`video-url`	视频地址	`file(accept=mp4\|webm\|ogg)`	—
`video-size`	画面尺寸	`vector<X,Y,Z>(min=0.2)`	`[4.8,2.7,0]`
`video-billboard`	始终面向相机	`boolean`	`false`
`position`	位置	`vector<X,Y,Z>`	`[0,2.5,0]`
`rotation`	旋转	`vector<X,Y,Z>(unit=°)`	`[0,0,0]`
`video-frame`	发光边框	`boolean`	`true`
`frame-color`	边框颜色	`color`	`#3fa8ff`
`video-opacity`	不透明度	`slider(min=0.1,max=1,step=0.05)`	`1`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "v_cam1",
  "type": "scene3d-video",
  "options": {
    "video-url": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
    "video-size": [
      4.8,
      2.7,
      0
    ],
    "position": [
      -5.6,
      3.6,
      -1.9
    ],
    "video-frame": true,
    "frame-color": "#3fa8ff",
    "video-opacity": 1,
    "glow": true
  }
}

LED 字幕屏 `scene3d-ledtext`

LED 字幕屏：横向跑马灯或纵向滚屏，测点值可直接上屏并按状态色 / 闪烁强调。做告示、标语、告警滚动。

预览即 data/三维/元素/26-ledtext-LED字幕屏.vpproj.json 的场景（未裁剪）；点开后可拖拽旋转、滚轮缩放，右侧参数面板可实时改选项。

属性

属性	名称	类型	默认	说明
`led-text`	滚动文本	`string(textarea,rows=3)`	`欢迎光临 · WELCOME`
`led-direction`	滚动方向	`select`	`horizon`	可选：`horizon` / `vertical`
`led-speed`	滚动速度	`slider(min=0,max=0.3,step=0.005)`	`0.05`
`led-size`	屏幕尺寸	`vector<X,Y,Z>(min=0.2)`	`[6,1.2,0]`
`position`	位置	`vector<X,Y,Z>`	`[0,2.5,0]`
`rotation`	旋转	`vector<X,Y,Z>(unit=°)`	`[0,0,0]`
`led-color`	文字色	`color`	`#ffb02e`
`led-bg`	底色	`color`	`#120a02`
`led-font-size`	字号	`slider(min=12,max=120,step=2,unit=px)`	`48`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`led-prefix`	文本前缀	`string`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "led_main",
  "type": "scene3d-ledtext",
  "options": {
    "led-text": "欢迎乘坐智慧轨道交通 · 祝您旅途愉快 · WELCOME",
    "led-direction": "horizon",
    "led-speed": 0.05,
    "led-size": [
      14,
      1.6,
      0
    ],
    "position": [
      0,
      5.8,
      -2
    ],
    "led-color": "#ffb02e",
    "led-bg": "#120a02",
    "led-font-size": 44,
    "glow": true
  }
}