场景与环境

2026年8月20日大约 9 分钟

场景与环境（5 种）

场景根、相机、视角书签、瓦片底图与后期效果——决定整个三维场景的底子：背景与天空、环境反射、雾、剖切、相机操控与巡航、辉光与描边。场景设置与相机是单例（uid 固定 scene3d-scene / scene3d-camera），后期效果建议全场景一份。

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

在线预览按需加载

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

场景设置 `scene3d-scene`

场景根（单例）：背景与天空、环境反射、网格与坐标轴、雾、剖切分析、渲染引擎与服务地址都在这里。每个三维场景必须有且只有一个，uid 固定 scene3d-scene。

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

属性

属性	名称	类型	默认	说明
`engine`	渲染引擎	`select`	`webgpu`	可选：`webgpu` / `webgl`
`bg-mode`	背景	`select`	`color`	可选：`color` / `transparent` / `panorama` / `sky`
`scene-bg`	背景色	`color`	`#0d1220`
`bg-image`	全景图	`file(accept=jpg\|jpeg\|png\|webp\|hdr)`	—
`sky-preset`	天空预设	`select`	`night`	可选：`night` / `dusk` / `dawn` / `nebula`
`sky-stars`	星星密度	`slider(min=0,max=2,step=0.1)`	`1`
`bg-blur`	背景模糊	`slider(min=0,max=1,step=0.05)`	`0`
`env-mode`	环境反射	`select`	`room`	可选：`room` / `background` / `none`
`env-intensity`	环境强度	`slider(min=0,max=3,step=0.05)`	`1`
`grid`	显示网格	`boolean`	`true`
`grid-infinite`	无限延伸	`boolean`	`true`
`grid-cell`	网格间距	`number(min=0.01,step=0.5)`	`1`
`grid-section`	主格间隔	`number(min=1,step=1)`	`10`
`grid-cell-color`	细格颜色	`color`	`#323748`
`grid-section-color`	主格颜色	`color`	`#495069`
`axes`	坐标轴	`boolean`	`false`
`fog`	启用	`boolean`	`false`
`fog-mode`	雾类型	`select`	`linear`	可选：`linear` / `exp`
`fog-color`	雾色	`color`	`#0d1220`
`fog-near`	起始距离	`number(min=0)`	`30`
`fog-far`	结束距离	`number(min=1)`	`300`
`fog-density`	雾密度	`slider(min=0.001,max=0.12,step=0.001)`	`0.015`
`clip-enable`	启用剖切	`boolean`	`false`
`clip-axis`	剖切轴	`select`	`x`	可选：`x` / `y` / `z`
`clip-position`	剖切位置	`number(step=0.5)`	`0`
`clip-invert`	反向	`boolean`	`false`
`service-url`	服务地址	`string`	—
`service-token`	访问令牌	`string`	—
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "scene3d-scene",
  "type": "scene3d-scene",
  "options": {
    "engine": "webgl",
    "bg-mode": "sky",
    "sky-preset": "night",
    "sky-stars": 1.4,
    "bg-blur": 0,
    "scene-bg": "#0d1424",
    "env-mode": "room",
    "env-intensity": 1,
    "grid": true,
    "grid-infinite": true,
    "grid-cell": 1,
    "grid-section": 10,
    "grid-cell-color": "#16233c",
    "grid-section-color": "#274a76",
    "axes": false,
    "fog": true,
    "fog-mode": "exp",
    "fog-color": "#0a1424",
    "fog-density": 0.012,
    "fog-near": 30,
    "fog-far": 300,
    "clip-enable": false,
    "clip-axis": "x",
    "clip-position": 0,
    "clip-invert": false
  }
}

相机 `scene3d-camera`

相机（单例）：初始视角、操控限制、入场飞入、三种巡航（环绕 / 书签巡航 / 路径漫游）、第一人称行走与小地图。uid 固定 scene3d-camera。

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

属性

属性	名称	类型	默认	说明
`position`	相机位置	`vector<X,Y,Z>`	`[14,10,14]`
`target`	注视目标	`vector<X,Y,Z>`	`[0,0,0]`
`fov`	视场角	`number(unit=°,min=10,max=120)`	`45`
`capture-view`	当前视角	`button`	—
`entry-fly`	入场飞入	`boolean`	`false`
`entry-duration`	飞入时长	`slider(min=0.5,max=10,step=0.5,unit=s)`	`2.5`
`entry-scale`	起始距离	`slider(min=1.2,max=5,step=0.1,unit=×)`	`2.2`
`cruise-mode`	模式	`select`	`off`	可选：`off` / `orbit` / `tour` / `path`
`orbit-speed`	环绕速度	`slider(min=0.5,max=60,step=0.5,unit=°/s)`	`10`
`tour-interval`	停留时长	`number(unit=s,min=2,step=1)`	`6`
`cruise-path`	漫游路径	`string(textarea,rows=4)`	—
`cruise-path-duration`	单程时长	`number(unit=s,min=0.5,step=1)`	`20`
`cruise-path-loop`	循环方式	`select`	`loop`	可选：`loop` / `yoyo`
`cruise-follow-distance`	跟随距离	`number(min=0.2,step=0.5)`	`2`
`cruise-follow-angle`	跟随俯角	`number(unit=°,min=0,max=89)`	`25`
`cruise-play-only`	仅播放态巡航	`boolean`	`true`
`walk-enable`	启用行走	`boolean`	`false`
`walk-speed`	行走速度	`slider(min=0.5,max=20,step=0.5)`	`4`
`walk-rotate-speed`	转向速度	`slider(min=10,max=180,step=5,unit=°/s)`	`60`
`minimap`	显示小地图	`boolean`	`false`
`minimap-size`	面板大小	`slider(min=80,max=400,step=10,unit=px)`	`180`
`minimap-view`	俯视范围	`number(min=2,step=2)`	`24`
`minimap-rotate`	跟随朝向旋转	`boolean`	`true`
`minimap-play-only`	仅播放态显示	`boolean`	`true`
`min-distance`	最近距离	`number(min=0,step=1)`	`0`
`max-distance`	最远距离	`number(min=0,step=1)`	`0`
`min-polar`	最高俯角	`number(unit=°,min=0,max=180)`	`0`
`max-polar`	最低俯角	`number(unit=°,min=0,max=180)`	`90`
`allow-pan`	允许平移	`boolean`	`true`
`dolly-speed`	缩放速度	`slider(min=0.1,max=5,step=0.1)`	`1`
`truck-speed`	平移速度	`slider(min=0.1,max=10,step=0.1)`	`2`
`smooth-time`	运动阻尼	`slider(min=0,max=1,step=0.05)`	`0.25`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "scene3d-camera",
  "type": "scene3d-camera",
  "options": {
    "position": [
      24,
      15,
      28
    ],
    "target": [
      0,
      3,
      0
    ],
    "fov": 45,
    "entry-fly": true,
    "entry-duration": 3,
    "entry-scale": 2.4,
    "cruise-mode": "orbit",
    "orbit-speed": 9,
    "tour-interval": 5,
    "cruise-play-only": true,
    "cruise-path": "15,2.2,11\n15,2.2,-11\n-15,2.2,-11\n-15,2.2,11",
    "cruise-path-duration": 26,
    "cruise-path-loop": "loop",
    "cruise-follow-distance": 2.5,
    "cruise-follow-angle": 18,
    "walk-enable": false,
    "walk-speed": 4,
    "walk-rotate-speed": 70,
    "minimap": true,
    "minimap-size": 200,
    "minimap-view": 44,
    "minimap-rotate": true,
    "minimap-play-only": true,
    "min-distance": 4,
    "max-distance": 90,
    "min-polar": 8,
    "max-polar": 85,
    "allow-pan": true,
    "dolly-speed": 1,
    "truck-speed": 2,
    "smooth-time": 0.25
  }
}

视角书签 `scene3d-view`

视角书签：存一组「机位」，供书签巡航按序飞越，或被 scene3dFlyTo 动作按 uid 精确调用。编辑器里有「保存当前视角 / 飞到此视角」按钮。

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

属性

属性	名称	类型	默认
`position`	相机位置	`vector<X,Y,Z>`	`[14,10,14]`
`target`	注视目标	`vector<X,Y,Z>`	`[0,0,0]`
`capture-view`	保存视角	`button`	—
`fly-view`	预览	`button`	—
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "v_all",
  "type": "scene3d-view",
  "options": {
    "position": [
      26,
      16,
      30
    ],
    "target": [
      0,
      2,
      0
    ]
  }
}

瓦片地图 `scene3d-tilemap`

瓦片地图底图：把 OSM / 高德 / 天地图 / CAD 图纸瓦片铺成三维地面，支持地形起伏、区域裁剪与深色滤镜。底图不参与射线拾取。

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

本预览依赖外部资源

瓦片来自高德矢量路网（免令牌）。原工程默认的 OpenStreetMap 在国内不可达，文档预览已换成高德；内网环境请用 tile-preset: custom 指向自有瓦片服务。

属性

属性	名称	类型	默认	说明
`tile-preset`	地图源	`select`	`osm`	可选：`osm` / `gaode-vec` / `gaode-img` / `tianditu-img` / `tianditu-vec` / `cad` / `custom`
`tile-url`	瓦片地址	`string`	—
`anno-url`	注记层地址	`string`	—
`tile-token`	令牌 tk	`string`	—
`cad-mapid`	图纸 ID	`string`	—
`cad-version`	图纸版本	`string`	—
`cad-dark`	深色样式打图	`boolean`	`true`
`root-tile`	根瓦片 z,x,y	`string`	`0,0,0`
`base-scale`	铺设尺寸	`number(min=1,step=10)`	`100`
`position`	整体偏移	`vector<X,Y,Z>`	`[0,0,0]`
`cad-overlay-mapid`	叠加图纸 ID	`string`	—
`cad-overlay-epsg`	图纸坐标系	`string`	`EPSG:4544`
`clip-polygon`	裁剪多边形	`string(textarea,rows=5)`	—
`clip-outer`	反选（保留外侧）	`boolean`	`false`
`style-filter`	颜色滤镜	`select`	`dark`	可选：`dark` / `none` / `gray` / `mono`
`mono-color`	色调颜色	`color`	`#4586b6`
`terrain-url`	高度瓦片地址	`string`	—
`height-scale`	高度夸张	`slider(min=0.05,max=10,step=0.05)`	`1`
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "base_map",
  "type": "scene3d-tilemap",
  "options": {
    "tile-preset": "gaode-vec",
    "tile-url": "",
    "anno-url": "",
    "tile-token": "",
    "cad-mapid": "",
    "cad-dark": true,
    "root-tile": "10,843,388",
    "base-scale": 100,
    "position": [
      0,
      -0.02,
      0
    ],
    "clip-polygon": "",
    "clip-outer": false,
    "style-filter": "dark",
    "mono-color": "#4586b6",
    "terrain-url": "",
    "height-scale": 1
  }
}

后期效果 `scene3d-effects`

后期效果（建议单份）：选择性辉光（各元素勾 glow 才参与）、交互描边（悬停 / 点击）、悬停名称气泡。画质与风格化后期也在这里。

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

属性

属性	名称	类型	默认	说明
`bloom`	启用辉光	`boolean`	`true`
`bloom-intensity`	辉光强度	`slider(min=0,max=10,step=0.1)`	`2`
`bloom-threshold`	亮度阈值	`slider(min=0,max=1,step=0.05)`	`0.1`
`outline-hover`	悬停描边	`boolean`	`true`
`outline-click`	点击选中描边	`boolean`	`false`
`hover-tip`	悬停名称气泡	`boolean`	`false`
`hover-tip-sub`	气泡显示子对象名	`boolean`	`false`
`outline-color`	描边颜色	`color`	`#7fd6ff`
`outline-strength`	描边强度	`slider(min=0.5,max=10,step=0.5)`	`3`
`aa-mode`	抗锯齿	`select`	`none`	可选：`none` / `fxaa` / `smaa`
`ssao`	环境光遮蔽（SSAO）	`boolean`	`false`
`ssao-intensity`	SSAO 强度	`slider(min=0,max=4,step=0.1)`	`1`
`ssao-radius`	SSAO 半径	`slider(min=0.01,max=0.5,step=0.01)`	`0.04`
`dof`	景深（背景虚化）	`boolean`	`false`
`dof-focus`	对焦距离	`number(min=0,step=0.5)`	`2`
`dof-range`	清晰范围	`number(min=0.1,step=0.5)`	`5`
`dof-bokeh`	散景强度	`slider(min=0,max=10,step=0.5)`	`3`
`tone-mapping`	色调映射	`select`	`none`	可选：`none` / `aces` / `reinhard` / `reinhard2-adaptive` / `cineon`
`pixelate`	像素化	`boolean`	`false`
`pixelate-size`	像素块大小	`slider(min=2,max=64,step=1)`	`6`
`color-depth`	色深压缩	`boolean`	`false`
`color-bits`	色彩位数	`slider(min=3,max=30,step=3)`	`12`
`dot-screen`	网点印刷	`boolean`	`false`
`dot-angle`	网点角度	`slider(min=0,max=180,step=5)`	`90`
`dot-scale`	网点大小	`slider(min=0.2,max=3,step=0.1)`	`1`
`glitch`	故障干扰（Glitch）	`boolean`	`false`
`glitch-wild`	持续强干扰	`boolean`	`false`
`chromatic`	色差（RGB 分离）	`boolean`	`false`
`chroma-offset`	色差偏移	`slider(min=0,max=10,step=0.5)`	`2`
`chroma-radial`	径向渐强	`boolean`	`false`
`blur`	全屏模糊	`boolean`	`false`
`custom-post-shader`	自定义后期着色器	`string(textarea,rows=6)`	—
`row-row-filter-mode-id`	选择数据规则	`select(condition)`	—

JSON 片段

{
  "uid": "fx_post",
  "type": "scene3d-effects",
  "options": {
    "bloom": true,
    "bloom-intensity": 2.4,
    "bloom-threshold": 0.1,
    "outline-hover": true,
    "outline-click": true,
    "hover-tip": true,
    "outline-color": "#7fd6ff",
    "outline-strength": 3,
    "aa-mode": "none",
    "ssao": false,
    "ssao-intensity": 1,
    "ssao-radius": 0.04,
    "dof": false,
    "dof-focus": 8,
    "dof-range": 6,
    "dof-bokeh": 3,
    "tone-mapping": "none",
    "pixelate": false,
    "pixelate-size": 6,
    "color-depth": false,
    "color-bits": 12,
    "dot-screen": false,
    "dot-angle": 90,
    "dot-scale": 1,
    "glitch": false,
    "glitch-wild": false,
    "chromatic": false,
    "chroma-offset": 2,
    "chroma-radial": false,
    "blur": false,
    "custom-post-shader": ""
  }
}