---
title: 三维场景
source: https://vjmap.com/guide/visual/scene3d.html
---

---
group: 地图、三维与组态
description: 用三维场景组件搭数字孪生：进入场景编辑、添加几何体与组态元素、换材质、画管道、设镜头巡航，用测点数据驱动颜色，点击设备聚焦。
---

# 三维场景

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

![三维场景示例：发光管道、飞线和按钮联动](./images/scene3d-overview.webp)

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

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

::: tip 先看示例
访客工作区的「三维-场景」分类有 45 个示例工程，从「三维示例01-基础场景与材质」到灯光阴影、相机巡航、测点驱动、模型爆炸、CAD 图纸转三维、热力图、路径漫游等逐个功能演示；「三维-元素」分类有 40 个工程，每个工程讲一种三维元素。打开看完不要保存，见[项目管理](./projects.html)。
:::

## 新建三维场景

两种方式：

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

![用「示例 · 三维场景」模板新建](./images/scene3d-template.webp)

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

## 进入场景编辑

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

![进入三维场景后的编辑界面](./images/scene3d-editor.webp)

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

3D 组件库的分类：

| 分类 | 元素 |
|---|---|
| 灯光 | 环境光、平行光、点光源、聚光灯、半球光 |
| 形状 | 立方体、球体、圆柱、圆锥、胶囊体、平面（地面）、圆环、全息投影、拉伸体、镜面地板 |
| 模型 | 模型（glb、gltf、fbx、obj 等文件） |
| 标注 | 值标签、三维文字、标记点、测量标注、光柱标记、数据看板牌、图标点位、HTML 面板 |
| 组态 | 管道、飞线、光墙围栏、雷达扫描、热力图、导引线、视频面板、数据点云、LED 字幕屏、管网、人员点位、车流、液位罐、区域面、线条、CAD 转 3D |
| 场景 | 瓦片地图（互联网地图或 CAD 图纸做地面）、视角书签 |
| 基础 | 批量楼块、倾斜摄影 |
| 特效 | 文字聚字、火焰、烟雾、下雨、下雪、烟花、后期效果（辉光、描边） |

## 添加元素

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

![搜索并添加一个液位罐](./images/scene3d-add-element.webp)

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

## 换材质

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

![几何体的材质类型](./images/scene3d-material.webp)

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

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

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

## 天空与环境

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

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

## 画管道、飞线和区域

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

![「绘制」菜单](./images/scene3d-draw.webp)

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

以管道为例：

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

![画好的管道和它的流动设置](./images/scene3d-pipe.webp)

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

## 镜头与巡航

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

![相机的视角与巡航设置](./images/scene3d-camera.webp)

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

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

## 让数据驱动设备

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

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

![三维场景组件绑定测点表](./images/scene3d-data-bind.webp)

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

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

![元素的测点驱动规则](./images/scene3d-data-rules.webp)

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

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

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

![点「模拟故障」后，三台设备变红](./images/scene3d-data-result.webp)

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

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

## 点击设备：事件交互

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

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

![双击设备聚焦的事件设置](./images/scene3d-events.webp)

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

常用的三维动作：

| 动作 | 作用 |
|---|---|
| 三维·相机飞行 | 飞到指定位置或某个视角书签，常配「点击空白处时」回到总览 |
| 三维·聚焦元素 | 镜头自动对准元素 |
| 三维·信息弹窗 | 在元素上方弹出信息框，内容每行「标签=值」 |
| 三维·写测点值 | 改写测点，联动所有认领这个测点的元素 |
| 三维·高亮元素、三维·显示隐藏 | 描边或辉光高亮，显示或隐藏元素 |
| 三维·爆炸分解、三维·模型动画、三维·路径动画 | 模型拆开、播放模型自带动画、元素沿路径运动 |
| 三维·剖切分析、三维·场景截图 | 剖开场景、截图下载 |
| 三维·改元素选项、三维·补间动画 | 运行时改任意设置（如切换天空），让元素平移、旋转、缩放 |

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

::: tip 性能
一个页面最多放 4 个三维场景；浏览器标签页切到后台时，三维场景自动暂停渲染。场景里元素很多时，优先用「批量楼块」「图标点位」这类批量元素，比逐个添加省资源。
:::

## 相关文档

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