3D园区v0.10.10

文档基于3D园区v0.10.10版本

组件说明

3D园区是地图组件的一种，支持自定义园区模型，上传自定义建筑模型，在可视化应用中用于展示智慧园区场景，通常在可视化应用中做智慧园区使用。

效果案例

*智慧园区可视化效果设计

组件结构

3D园区组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。

*组件结构说明

一、父组件配置

子组件管理

组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。

支持对已添加子组件进行隐藏、重命名、复制、删除操作。

*子组件管理

样式

1、基本属性

位置尺寸：

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

定点气泡图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明

默认隐藏：

控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。

2、基础配置

视角控制：

关闭视角控制则无法用鼠标拖动移动3D园区视角。

设备像素比：

支持自动配置和手动配置，如开启手动配置，开启后可根据设备设置像素比数值。

Gamma输出：

可自由配置Gamma系数，简单而言，系数越高则整体显示效果“更亮”，细数越低则整体显示效果“更暗”。

3、发光效果

组件当前实现发光效果使用的是一种名为bloom(或者叫泛光)的后处理特效，模拟太阳光照射到物体之后产生的强烈的发光及边缘亮光。通俗地说，其基本原理是对于渲染后的每一个像素按照其亮度值来提高亮度和扩散光晕至周边区域。

当前只有自定义模型支持发光效果，可在自定模型子组件的配置项（自定义模型-选中点亮-发光视图）中勾选来启用。

有以下可配置的参数：

强度：

发光时提升亮度的系数，值越大即亮度越高，为0即不发光。由于像素亮度是有上限的，单个像素提升至纯白颜色(#FFFFFF)之后变再无变化。

半径：

发光扩散至周边区域的范围半径，值越大即范围越大。

阈值：

当像素高度指定阈值时，才产生发光效果。取值范围是0到1。0表示纯黑色(#000000)，1表示纯白色(#FFFFFF)，中间为对应比值的灰度的颜色。

由于是后处理技术（对于渲染帧的像素进行处理），所以开启了发光效果的物体的深度信息将丢失，就是说开启了发光效果的物体永远会处于普通物体的前面。

而且当前对于后处理特效，技术上是在另一个层级中渲染的，所以将不受太阳光等光照的影响。如果设置了强度为0，或由于低于阈值而无发光效果，将会因为无太阳光照射而呈现物体原本的漫反射颜色。

4、描边效果

在物体轮廓上进行描边的效果，也是使用后处理来实现的特效。

当前只有自定义模型子组件和模型列表子组件支持该效果。自定义模型不需要单独设置，开启了主组件上的描边效果即可生效。模型列表只有在开启配置项中的点击效果，并在预览页面下点击之后才会生效。由于模型列表一般用于显示多个模型，以此来突出显示当前选中模型。

当前版本由于技术限制，发光效果的和描边效果有冲突，对于同一个模型二者不能同时生效。

描边强度：

描边颜色的亮度，越大颜色越亮。

描边发光：

设置一个大于0的值时，表示将在描边线条的基础上向周边扩散光晕，这个数值表示了扩散的范围。

描边粗细：

设置描边线条的粗细。

pulseperiod：

定义上来说是闪烁效果的周期，通俗地说是控制闪烁效果的速度。设置为大于0的数值之后可观察到描边闪烁的效果，值越大闪烁得越慢。（因为是周期）

可见描边颜色：

没有被其他物体遮挡的部分呈现的描边颜色，实际表现的颜色还受到描边强度的影响。

消隐描边颜色：

被其他物体遮挡的部分呈现的描边颜色。

一些后处理特效通用的注意事项参照上文中发光效果的部分。

5、相机

位置：

通过X、Y、Z设置园区视角角度，如需将园区视角由俯视改为平视，可调整Y值大小来实现。

焦点：

通过X、Y、Z设置园区中心视角，默认设置为0，用户可根据需要自己调整。

首先简要说明下概念，近剪切面：将不会呈现比此平面更为接近摄像机的物体。 远剪切面：将不会呈现比此平面更远的物体

远裁剪面：远裁剪面的可视范围数值。

近裁剪面：近裁剪面的可视范围数值。

Fov：一个摄像机镜头能涵盖多大范围的景物，通常以角度来表示，这个角度就叫镜头的视角Fov。

6、天空配置

对3D园区的天空效果渲染进行配置设置

7、场景雾化

默认关闭，开启后从以下三项配置。

8、园区大小

当没有背景模型时该配置项生效

尺寸：

园区大小是该值大小的方形

9、背景音乐

音频：

支持自定义上传音频，支持格式有OGG/MP3/WAV

音量：

设置音量大小

10、园区背景

模型配置：

支持自定义上传园区背景模型，支持glb格式。

渲染顺序系数：影响渲染的系数，不表示绝对的渲染层级。实际层级还受到透明度、深度写入等因素的影响。

环境光：

可以设置光强和光色。

太阳光：

强度设置太阳光光照强度；位置配置项中设置园区背景位置。

多场景：

设置园区镜头位置，用户可自定义通过鼠标旋转视角，设置入场时间，点击保存可以保存场景视角，点击新建加号可添加不同场景，用于交互配置不同视角场景。

数据

3D园区主组件数据相对固定，此处一般场景下无需进行编辑操作。

交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

二、子组件配置

1、柱子

用于智慧园区场景内部添加装饰，编辑页面点击新建，用户可在页面内自主添加柱子，点击编辑按钮可对已经添加的柱子进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

数据：

根据坐标位置设置柱子位置，根据数值大小设置热力值柱子高度

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"z": 0,
		"h": 5
	},
	{
		"x": 10,
		"z": 0,
		"h": 9
	},
	{
		"x": 10,
		"z": 10,
		"h": 1
	},
	{
		"x": 20,
		"z": 10,
		"h": 5
	},
	{
		"x": 0,
		"z": 20,
		"h": 4
	}
]

2、自定义地面

用于丰富园区展示效果。可用于丰富部分区域的地面状态，编辑页面点击新建，用户可在页面内自主修改地面状态。点击编辑按钮可对已经配置好的地面进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

地面类型

可修改地面类型水面或贴图平面

基础配置

自定义地面的基础高度

水面配置

当地面类型切换水面时，可以进行水面配置。

贴图配置

当地面类型切换贴图时，可以进行贴图配置。

3、围栏

用于丰富园区展示效果，可用于针对单个建筑进行突出显示，编辑页面点击新建，用户可在页面内自主添加围栏点，点击编辑按钮可对已经添加的围栏点进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置围栏线条位置

*组件数据格式说明

数据样例

[
	{
		"x": -30.04154358367453,
		"y": 1.7625475022159334e-15,
		"z": -7.937808274202476
	},
	{
		"x": 14.19911658568752,
		"y": 0,
		"z": -22.4404468857942
	},
	{
		"x": 21.30126653524589,
		"y": 0,
		"z": 6.088593215937699
	},
	{
		"x": -21.27818503889756,
		"y": -4.373420883808649e-15,
		"z": 19.696136662654975
	},
	{
		"x": -30.04154358367453,
		"y": 1.7625475022159334e-15,
		"z": -7.937808274202476
	}
]

4、飞线

用于丰富园区展示效果，可用于信息之间的连接、展示，编辑页面点击新建，用户可在页面内自主绘制飞线线条，点击编辑按钮可对已经绘制的飞线进行编辑，调节飞线位置，单个点位置，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置飞线线条位置

*组件数据格式说明

数据样例

[
	{
		"x1": 0,
		"z1": 0,
		"x2": 20,
		"z2": 0
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 30,
		"z2": 0
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 20,
		"z2": 20
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 0,
		"z2": 20
	},
	{
		"x1": 0,
		"z1": 0,
		"x2": 0,
		"z2": 40
	}
]

5、热力

用于丰富园区展示效果，可用于展示人流、车流或其他数据的密集度，编辑页面点击新建，用户可在页面内自主添加热力点，可在同一点持续叠加，也可在外围数据栏，修改数值大小，更改热力值，点击删除按钮可对已经添加的热力点进行删除，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

颜色区间

用户可自定义设置热力值的颜色区间，可通过比例定义颜色区间。

数据：

根据坐标位置设置热力点位置，根据数值大小设置热力值大小

*组件数据格式说明

数据样例

[
	{
		"x": 40,
		"y": 40,
		"value": 49.82
	},
	{
		"x": 7,
		"y": 64,
		"value": 10.065
	},
	{
		"x": 15,
		"y": 22,
		"value": 49.82
	},
	{
		"x": 68,
		"y": 76,
		"value": 55.547
	},
	{
		"x": 10,
		"y": 51,
		"value": 61.165
	},
	{
		"x": 69,
		"y": 62,
		"value": 76.91
	},
	{
		"x": 65,
		"y": 78,
		"value": 37.305
	},
	{
		"x": 4,
		"y": 73,
		"value": 54.487
	},
	{
		"x": 42,
		"y": 30,
		"value": 2.308
	}
]

6、图片

用于在智慧园区展示图片

配置

7、信息面板

用于在智慧园区中展示需要展示的信息文字

配置

8、标牌

用于智慧园区场景内部添加文字类标签，编辑页面点击新建，用户可在页面内自主添加标牌点，点击编辑按钮可对已经添加的标牌点进行编辑，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

数据：

根据坐标位置设置标牌位置，

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"y": 2,
		"z": 0,
		"t": "text1text1text1text1text1text1"
	},
	{
		"x": 10,
		"y": 2,
		"z": 0,
		"t": "text2text2text2text2text2text2text2text2text2text2"
	},
	{
		"x": 10,
		"y": 2,
		"z": 10,
		"t": "text3"
	},
	{
		"x": 20,
		"y": 2,
		"z": 10,
		"t": "text4"
	},
	{
		"x": 0,
		"y": 2,
		"z": 20,
		"t": "text5"
	}
]

9、自定义模型

模型配置

用户可自定义上传模型，支持上传glb模型，建议上传Draco压缩后的模型文件，文件大小上限为150MB，选中点亮设置模型被选中状态下高亮状态，可以通过自定义交互事件做高亮绑定交互，模型动作中用户可自定义配置模型动作，如旋转、浮动，支持自定义设置动画时间；勾选自动播放可播放模型所绑定的动画。

注意：如果模型在建模软件中体积较大，导入后在默认镜头下无法看到，需调整镜头并调节模型位置。

基础配置

轨迹运动配置

模型沿着一系列给定点位组成的路径移动的动画。

轨迹动画在子组件的数据面板下配置，数据里要求的是一个数组，数组元素是一个对象，这个对象有三个字段x、y、z，分别表示每个轨迹点的世界坐标。

触发轨迹动画需要在其他组件上配置自定义事件，动作配置中选择自定义模型为目标组件，动作选择动画控制，即可在弹出的动画动作的下拉列表中看到按轨迹移动的选项。

如此配置之后，即可在触发该自定义事件之后，播放该自定义模型的轨迹动画。

相应地，和播放

还可以在自定义模型自身的配置项里配置轨迹动画的相关参数，如下所示：

• 起步时间：触发播放的动作之后，延迟多久才开始正式进行轨迹动画。单位为秒。
• 运动时间：多长时间内播放一轮完整的轨迹动画。单位为秒。
• 轨迹重置时间：播放完一轮动画，等待多久才重新播放下一轮动画，轨迹运动类型配置为循环相关的类型时才生效。单位为秒
• 轨迹运动类型：单次停止、单次返回、从头循环、返回循环。（顾名思义）
• 自动旋转：设置模型的正方向是否要一直朝着运动轨迹曲线上每个点的切线方向，模型正方向是模型空间下的Z轴正方向。整体上看，勾选该配置之后模型会一直看着轨迹路线前方移动，就像一辆在路上开着的小车；不勾选时模型会望着一个固定方向被拖着按轨迹移动，像被人操控的无生命物体。

*自定义模型编辑页面

10、点光源

用于在智慧园区内部增加光源，编辑页面点击新建，用户可在页面内自主添加点光源。

基础配置

数据：

根据坐标位置设置点光源位置，

*组件数据格式说明

数据样例

[
	{
		"x": 0,
		"y": 3,
		"z": -5
	},
	{
		"x": 10,
		"y": 3,
		"z": -5
	},
	{
		"x": 10,
		"y": 3,
		"z": 5
	},
	{
		"x": 0,
		"y": 3,
		"z": 5
	}
]

11、粒子系统

用于在智慧园区内部增加光源，编辑页面点击移动，用户可在页面内自由移动粒子位置。

配置

12、流光

用于丰富园区展示效果，可用于人流、车流的展示，编辑页面点击新建，用户可在页面内自主绘制流光线条，点击编辑按钮可对已经绘制的流光线条进行编辑，调节飞线位置，单个点位置，点击独显可针对于该组件进行独立显示，独显为方便用户使用为默认选中状态。

基础配置

动画配置

数据：

根据坐标位置设置流光线条位置

*组件数据格式说明

数据样例

[
	[
		{
			"x": -620.4844494688172,
			"y": 0,
			"z": -13.523306365457088
		},
		{
			"x": 919.6961624898242,
			"y": 0,
			"z": -508.2863113707924
		}
	],
	[
		{
			"x": 361.80671186543367,
			"y": 0,
			"z": 625.4661340882511
		},
		{
			"x": 84.2567102637567,
			"y": 0,
			"z": -229.3893850425829
		},
		
	[
		{
			"x": 395.8078380422095,
			"y": 0,
			"z": -677.1554927088099
		},
		{
			"x": 813.4409952558317,
			"y": 0,
			"z": 576.4933084882252
		}
	]
]

13、模型列表

模型列表子组件可以可基于同一类型模型快速构建场景，可对同一类型模型统一配置自定义事件，避免反复添加、配置模型。

样式

ID

模型唯一标识符。例如“1”、“生产机械”、“医疗器械”等。

来源方式

模型来源，可上传自定义模型，也可以通过URL方式引用模型。

模型上传

上传自定义模型即可（仅支持.glb格式模型，建议上传Draco压缩后的文件，上传文件大小上限为150MB）。

引用URL：当您已经部署好模型服务后，可通过URL方式直接引入模型文件。

URL

两种引用URL方式，第一种为引用模型服务地址；

第二种方式需要配合资源列表共同使用，当配合资源列表使用时需要使用"@"作为引用标示符号，例如资源列表中配置了ID为"1"的模型，则在引用时需要填写"@1"。

层级

映射模型携带的层级关系，对应EasyV需要使用相对路径引用，例如引用如下图所示"Polygon_15_1"部分，则填写"./1/1/2"。

当一个整体模型由几部分模型组成时，通过此方式对不同模型组成部分可进行单独自定义事件和回调配置。

泛光

对模型增加泛光效果，当光强高时配合发光效果参数调节综合显示效果。

自动播放动画

当模型本身携带动画效果时，可勾选此项实现模型自身动画自动播放。

3D变换

可通过位置调整模型"x/y/z"坐标系位置；可通过"x/y/z"三个维度调整模型旋转角度；可通过"x/yz"三个维度调整模型缩放级别。

资源列表

上传模型文件，点击即可增加资源。上传模型后可对模型配置ID，当“来源方式”配置为“引用URL”时，可通过"@"标识符引用。

点击效果

即点击模型后镜头聚焦切换，可配置镜聚焦距离和移动速度。

数据

模型可携带模型数据，例如如下示例所示，某个模型可携带多个字段数据，携带的数据后续可进行交互判断或者作为回调使用。数据里必须要有"id"字段，这样才能通过这个"id"字段取配置项中找到对应"id"进行匹配。

{

"machine_id":"floor_1_01",
"machine_status":"normal",
"machine_type":"Processing equipment"

}

交互

点击回调

点击回调即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

配合模型数据使用，可配置点击回调当点击某一模型时发送该模型的数据，在组件接入的数据中根据该模型的id匹配对应的项。

如下数据中示例所示，可将某一字段数据作为回调。例如需要获取机械ID时可将"machine_id"作为回调字段。

{

"machine_id":"floor_1_01",
"machine_status":"normal",
"machine_type":"Processing equipment"

}

自定义事件

简单而言，自定义事件通过事件类型+条件去控制其他组件的不同状态。

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑。

详细的自定义事件教学👉自定义事件教学

可配置模型数据变化或者点击模型自定义事件，当配置为点击模型时，可在条件中增加条件作为判断，即点击哪类模型时才会发生自定义事件。如下示例图所示即配置点击"machine_id"为"floor_1_01"时发生自定义事件。

实操模板

链接点击链接可以查看教程和创建模板---3D园区场景漫游

教学视频--3D园区

教学视频--场景管理的使用

若有收获，就点个赞吧

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0