标注与信息

2026年8月20日大约 11 分钟

标注与信息（10 种）

把数据与说明挂到三维空间里：CSS2D 类（值标签 / 标记点 / 动效标记 / 看板牌）永远面向相机、不被遮挡且可点击；真三维贴片类（三维文字 / 图表贴片 / HTML 面板）参与深度遮挡、可辉光、能进截图。

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

在线预览按需加载

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

值标签 `scene3d-label`

值标签（CSS2D）：把测点值贴在设备旁，带单位与小数位、状态色与告警闪烁。永远面向相机、可选是否被遮挡，可点击派发事件。

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

属性

属性	名称	类型	默认	说明
`label-text`	固定文本	`string`	—
`unit`	单位后缀	`string`	—
`decimals`	小数位	`number(min=0,max=6,step=1)`	`1`
`position`	位置	`vector<X,Y,Z>`	`[0,3,0]`
`anchor`	对齐	`select`	`bottom`	可选：`bottom` / `center` / `top` / `left` / `right`
`occlusion`	被场景遮挡	`boolean`	`false`
`enter-anim`	入场动画	`select`	`none`	可选：`none` / `bounce` / `drop`
`font-size`	字号	`number(unit=px,min=8,max=64)`	`14`
`text-color`	文字色	`color`	`#e6f2ff`
`bg-color`	背景色	`color`	`rgba(13,18,32,0.78)`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "lb_temp",
  "type": "scene3d-label",
  "options": {
    "label-text": "1#泵 温度",
    "data-key": "TEMP",
    "unit": " ℃",
    "decimals": 1,
    "position": [
      -3,
      3,
      -2
    ],
    "font-size": 14
  }
}

三维文字 `scene3d-text`

三维文字：真三维文字网格（中文免字体），可朝相机或固定朝向，支持描边与辉光。做门楣标题、区域名、地面标注。

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

属性

属性	名称	类型	默认
`text`	文字内容	`string(textarea,rows=3)`	`三维文字`
`text-size`	行高	`number(min=0.05,step=0.1)`	`1`
`text-billboard`	始终面向相机	`boolean`	`true`
`position`	位置	`vector<X,Y,Z>`	`[0,3,0]`
`rotation`	旋转	`vector<X,Y,Z>(unit=°)`	`[0,0,0]`
`text-color`	文字色	`color`	`#e6f2ff`
`text-bg`	背景色	`color`	—
`text-stroke`	深色描边	`boolean`	`true`
`glow`	辉光	`boolean`	`false`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "t_main",
  "type": "scene3d-text",
  "options": {
    "text": "智慧园区",
    "text-size": 1.6,
    "text-billboard": true,
    "position": [
      0,
      7,
      -2
    ],
    "text-color": "#7fd6ff",
    "text-stroke": true,
    "glow": true
  }
}

标记点 `scene3d-marker`

标记点（CSS2D）：呼吸光圈 / 旋转光环 / 图钉三种轻量样式，带文字与图标，可点击。POI 与告警点标配。

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

属性

属性	名称	类型	默认	说明
`marker-style`	样式	`select`	`beacon`	可选：`beacon` / `ring` / `pin`
`marker-text`	说明文字	`string`	—
`marker-icon`	自定义图标	`file(format=image,accept=jpg\|jpeg\|png\|webp\|svg)`	—
`position`	位置	`vector<X,Y,Z>`	`[0,2,0]`
`anchor`	对齐	`select`	`center`	可选：`center` / `bottom` / `top`
`occlusion`	被场景遮挡	`boolean`	`false`
`enter-anim`	入场动画	`select`	`none`	可选：`none` / `bounce` / `drop`
`marker-color`	颜色	`color`	`#00e5ff`
`marker-size`	尺寸	`number(unit=px,min=16,max=160)`	`46`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "mk_pump",
  "type": "scene3d-marker",
  "options": {
    "marker-style": "beacon",
    "marker-text": "1#泵房",
    "position": [
      -8,
      3.2,
      -2
    ],
    "anchor": "center",
    "marker-color": "#00e5ff",
    "marker-size": 46,
    "data-key": "PUMP",
    "state-rules": "ok=#00e5ff\nalarm=#ff4d6a",
    "blink-values": "alarm"
  }
}

动效标记 `scene3d-fxmarker`

动效标记（CSS2D）：引擎自带的成品多层光圈动效（呼吸 / 扩散 / 荧光 / 光环 / 旋转光圈 / 旋转文字边框），科技感 POI 首选。与「标记点」互补——后者是轻量 CSS 动画。

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

属性

属性	名称	类型	默认	说明
`fx-style`	动效样式	`select`	`breathing`	可选：`breathing` / `diffused` / `fluorescence` / `halo-ring` / `rotating-aperture` / `rotating-textborder`
`marker-text`	标记文字	`string`	—
`position`	位置	`vector<X,Y,Z>`	`[0,2,0]`
`anchor`	对齐	`select`	`center`	可选：`center` / `bottom` / `top`
`occlusion`	被场景遮挡	`boolean`	`false`
`fx-colors`	配色	`string`	—
`marker-size`	尺寸	`number(unit=px,min=16,max=320)`	`80`
`text-color`	文字颜色	`color`	`#e6f2ff`
`text-size`	文字字号	`number(unit=px,min=8,max=48)`	`14`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "fx_breath",
  "type": "scene3d-fxmarker",
  "options": {
    "fx-style": "breathing",
    "marker-text": "呼吸光圈",
    "position": [
      -12.5,
      1.4,
      -3
    ],
    "fx-colors": "#00e5ff",
    "marker-size": 96,
    "text-color": "#e6f2ff",
    "text-size": 13
  }
}

光柱标记 `scene3d-beam`

光柱标记：贴地落点拉一道发光光柱，配底部涟漪与顶部菱形。双交叉渐变面片零素材，是 POI 与告警地标的标配。

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

属性

属性	名称	类型	默认
`beam-height`	柱高	`number(min=0.5,step=0.5)`	`6`
`beam-width`	柱宽	`slider(min=0.1,max=5,step=0.1)`	`0.9`
`position`	落点	`vector<X,Y,Z>`	`[0,0,0]`
`beam-color`	颜色	`color`	`#00e5ff`
`beam-opacity`	亮度	`slider(min=0.1,max=1,step=0.05)`	`0.9`
`ripple`	底部涟漪	`boolean`	`true`
`ripple-radius`	涟漪半径	`number(min=0.2,step=0.2)`	`1.6`
`ripple-period`	扩散周期	`slider(min=0.5,max=6,step=0.1,unit=s)`	`2`
`beam-top`	顶部宝石	`boolean`	`true`
`beam-spin`	柱体缓旋	`boolean`	`true`
`glow`	辉光	`boolean`	`true`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—
`blink-values`	告警闪烁值	`string`	—

JSON 片段

{
  "uid": "bm_hub",
  "type": "scene3d-beam",
  "options": {
    "position": [
      -10,
      0,
      -4
    ],
    "beam-height": 12,
    "beam-width": 1.2,
    "beam-color": "#00e5ff",
    "beam-opacity": 0.9,
    "ripple": true,
    "ripple-radius": 2.6,
    "ripple-period": 2,
    "beam-top": true,
    "glow": true
  }
}

数据看板牌 `scene3d-board`

数据看板牌（CSS2D）：一块牌子上多行指标实时刷新（标签 + 测点键 + 单位 + 小数位），行值命中规则可整行变色。

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

属性

属性	名称	类型	默认	说明
`board-title`	标题	`string`	—
`position`	位置	`vector<X,Y,Z>`	`[0,4,0]`
`anchor`	对齐	`select`	`bottom`	可选：`bottom` / `center` / `top` / `left` / `right`
`occlusion`	被场景遮挡	`boolean`	`false`
`board-width`	面板宽度	`slider(min=96,max=480,step=4,unit=px)`	`200`
`font-size`	字号	`number(unit=px,min=9,max=32)`	`13`
`board-accent`	主题色	`color`	`#3fa8ff`
`value-color`	数值颜色	`color`	`#7fd6ff`
`board-bg`	背景色	`color`	`rgba(10,16,30,0.85)`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`board-rows`	行配置	`string(textarea,rows=5)`	`温度\|TEMP\|℃\|1 压力\|PRESS\|MPa\|2`
`row-state-rules`	行状态色规则	`string(textarea,rows=3)`	—

JSON 片段

{
  "uid": "bd_unit",
  "type": "scene3d-board",
  "options": {
    "board-title": "1#压缩机组",
    "position": [
      -4,
      4.4,
      0
    ],
    "anchor": "bottom",
    "occlusion": false,
    "board-width": 208,
    "font-size": 13,
    "board-accent": "#3fa8ff",
    "value-color": "#7fd6ff",
    "board-bg": "rgba(10,16,30,0.85)",
    "board-rows": "出口温度|TEMP|℃|1\n出口压力|PRESS|MPa|2\n负载率|LOAD|%|0\n状态|STATE||0",
    "row-state-rules": "hot=#ef4444\nok=#22c55e"
  }
}

图表贴片 `scene3d-chart2d`

图表贴片：柱状 / 饼图 / 环图画在纹理上的真三维面板，可遮挡、可辉光、能进截图。与 CSS2D 看板牌互补，适合斜放设备旁或贴墙当车间图表屏。

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

属性

属性	名称	类型	默认	说明
`chart-kind`	图表类型	`select`	`bar`	可选：`bar` / `pie` / `donut`
`chart-title`	标题	`string`	—
`chart-data`	图表数据	`string(textarea,rows=5)`	`一号线,42 二号线,35 三号线,58 四号线,27`
`panel-width`	面板宽	`number(min=0.5,step=0.5)`	`6`
`panel-height`	面板高	`number(min=0.5,step=0.5)`	`3.6`
`chart-anim`	生长动画	`boolean`	`true`
`billboard`	公告牌（面向相机）	`boolean`	`false`
`glow`	辉光	`boolean`	`false`
`bg-color`	面板底色	`color`	`rgba(10,16,30,0.88)`
`text-color`	文字色	`color`	`#e6f2ff`
`position`	位置	`vector<X,Y,Z>`	`[0,2,0]`
`rotation`	旋转	`vector<X,Y,Z>(unit=°)`	`[0,0,0]`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`data-key`	测点键	`select(editable)`	—

JSON 片段

{
  "uid": "ch_bar",
  "type": "scene3d-chart2d",
  "options": {
    "chart-kind": "bar",
    "chart-title": "各产线产量（件）",
    "chart-data": "一号线,42\n二号线,35\n三号线,58\n四号线,27",
    "panel-width": 7,
    "panel-height": 4.2,
    "position": [
      -8,
      3.4,
      -2.6
    ],
    "rotation": [
      0,
      8,
      0
    ],
    "chart-anim": true,
    "billboard": false,
    "glow": true,
    "data-key": "CHART"
  }
}

HTML 面板 `scene3d-html`

HTML 面板（CSS3D）：任意 HTML 贴在三维空间里，近大远小、可被场景遮挡。与看板牌的区别是它真正处在三维空间中。

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

属性

属性	名称	类型	默认
`html`	HTML 内容	`string(textarea,rows=8)`	`<div style="font-family:'Microsoft YaHei',sans-serif"> …`
`position`	位置	`vector<X,Y,Z>`	`[0,2,0]`
`panel-width`	面板宽度	`number(min=0.5,step=0.5)`	`4`
`panel-px-width`	像素宽度	`slider(min=120,max=960,step=20,unit=px)`	`420`
`panel-billboard`	广告牌（面向相机）	`boolean`	`false`
`rotation`	旋转	`vector<X,Y,Z>(unit=°)`	`[0,0,0]`
`occlude`	被场景遮挡	`boolean`	`true`
`panel-bg`	面板背景	`color`	`rgba(10,16,30,0.88)`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "hp_welcome",
  "type": "scene3d-html",
  "options": {
    "html": "<div style=\"font-family:'Microsoft YaHei',sans-serif;text-align:center\">\n  <div style=\"font-size:24px;font-weight:800;background:linear-gradient(90deg,#7DE3FF,#FF7AC8);-webkit-background-clip:text;background-clip:text;color:transparent\">欢迎参观智慧展厅</div>\n  <div style=\"margin-top:8px;font-size:13px;color:#c9d8ef;line-height:1.8\">本立牌是一段 HTML —— 支持任意标签与内联样式<br/>近大远小 · 可被展台遮挡 · 像真实立牌一样站在场景里</div>\n  <div style=\"margin-top:10px\"><span style=\"display:inline-block;padding:3px 14px;border:1px solid #3fa8ff;border-radius:999px;font-size:12px;color:#7fd6ff\">CSS3D · scene3d-html</span></div>\n</div>",
    "position": [
      0,
      3.6,
      -4
    ],
    "panel-width": 5,
    "panel-px-width": 420,
    "panel-billboard": true,
    "occlude": false,
    "panel-bg": "rgba(10,16,30,0.88)"
  }
}

图标点位 `scene3d-sprites`

图标点位（批量精灵）：一行一个点位（坐标 + 可选标签），单实体承载上百点位，参与深度遮挡与拾取。可用测点 JSON 整批刷新。

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

属性

属性	名称	类型	默认
`icon-url`	图标图片	`file(accept=png\|jpg\|jpeg\|webp\|svg)`	—
`icon-color`	圆点颜色	`color`	`#00e5ff`
`sprite-size`	图标大小	`slider(min=4,max=128,step=2)`	`28`
`size-attenuation`	近大远小	`boolean`	`false`
`allow-overlap`	允许重叠	`boolean`	`true`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`text-size`	文字字号	`number(unit=px,min=8,max=48)`	`13`
`text-color`	文字颜色	`color`	`#e6f2ff`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—
`points`	点位列表	`string(textarea,rows=6)`	`-4,0,-4 4,0,-4 4,0,4 -4,0,4 0,0,0,中心点`
`data-key`	测点键	`select(editable)`	—

JSON 片段

{
  "uid": "sp_patrol",
  "type": "scene3d-sprites",
  "options": {
    "icon-color": "#00e5ff",
    "sprite-size": 28,
    "size-attenuation": false,
    "allow-overlap": true,
    "text-size": 13,
    "text-color": "#e6f2ff",
    "points": "-10,0.5,-5,巡查①\n-4,0.5,-7,巡查②\n3,0.5,-5,巡查③\n9,0.5,-7,巡查④\n9,0.5,4,巡查⑤\n2,0.5,6,巡查⑥\n-5,0.5,5,巡查⑦\n-11,0.5,3,巡查⑧",
    "data-key": "PTS"
  }
}

测量标注 `scene3d-ruler`

测量标注：两端点之间画尺寸线并标注距离，做持久的工程标注。编辑器视口工具条另有交互式测量工具。

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

属性

属性	名称	类型	默认
`ruler-start`	起点	`vector<X,Y,Z>`	`[-4,0.5,0]`
`ruler-end`	终点	`vector<X,Y,Z>`	`[4,0.5,0]`
`ruler-color`	标注颜色	`color`	`#ffd166`
`ruler-decimals`	小数位	`number(min=0,max=4,step=1)`	`2`
`ruler-unit`	单位后缀	`string`	`m`
`ruler-scale`	单位比例	`number<float>(min=0.0001,step=0.1)`	`1`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "r_len",
  "type": "scene3d-ruler",
  "options": {
    "ruler-start": [
      -8,
      0.3,
      2.2
    ],
    "ruler-end": [
      2,
      0.3,
      2.2
    ],
    "ruler-color": "#ffd166",
    "ruler-decimals": 2,
    "ruler-unit": " m",
    "ruler-scale": 1
  }
}