CN110427724A - 基于WebGL三维消防建筑模型可视化方法 - Google Patents

Abstract

本发明实施例公开了一种基于WebGL三维消防建筑模型可视化方法，包括：步骤1：构建布局空间；步骤2：设计消防建筑模型，计算消防信息卡片坐标；步骤3：创建一个相机；步骤4：创建消防建筑模型；步骤5：创建消防建筑每层的消防状态信息卡片；步骤6：美化布局空间；步骤7：引入消防数据源；步骤8：创建一个渲染器；步骤9对相机在布局空间所观察到的内容进行实时渲染。本发明能有效着重视觉中心的消防建筑，并展示焦点消防建筑消防状态；对于存在报警的问题楼层能够突出显示，同时结合所述楼层的消防状态信息，能使消防管理者直观了解当前情况；本发明能部署于互联网上还能识别移动端用户，并针对移动设备进行优化，保证可视化的流畅性。

Description

基于WebGL三维消防建筑模型可视化方法

技术领域

本发明涉及消防安全技术领域，尤其涉及一种基于WebGL三维消防建筑模 型可视化方法。

背景技术

随着城镇化的发展，人们活动场所愈加集中，若发生火灾，将带来巨大的 生命及财产损失。

现有消防管理系统，通过消防设备采集消防数据，然后通过物联网通讯技 术将数据传送到系统中，实现对建筑中消防设备的监测。但现有的消防数据的 展示方法，是直接通过数字与文字的形式来展现，并不能直观地在体现在真实 世界的消防状态，无法帮助消防管理者在消防监控中心或在移动端直观监控消 防状态，迅速把握关键信息。

发明内容

本发明实施例所要解决的技术问题在于，提供一种基于WebGL三维消防建 筑模型可视化方法，以使能够三维展示消防状态。

为了解决上述技术问题，本发明实施例提出了一种基于WebGL三维消防建 筑模型可视化方法，包括：

步骤1：利用WebGL技术构建一个用于模型布置的布局空间；

步骤2：根据消防建筑组织结构和设计图设计消防建筑模型，并计算在布局 空间的消防建筑模型坐标，通过消防建筑模型坐标计算消防信息卡片坐标；

步骤3：创建一个相机并设置相机在布局空间的观测范围的参数；

步骤4：添加几何模型，并选择模型的材料及颜色，生成几何方块，采用若 干个几何方块创建消防建筑模型；

步骤5：根据消防信息卡片坐标创建消防建筑每层的消防状态信息卡片；

步骤6：根据真实场景选择性增加装饰，并在布局空间中添加光源和阴影， 美化布局空间；

步骤7：引入消防数据源，实时获取消防数据，根据消防数据调整消防建筑 模型样式和消防状态信息卡片内容；

步骤8：创建一个渲染器，设置渲染空间的尺寸，并设置将渲染结果展示到 页面上；

步骤9：通过所述渲染器对相机在布局空间所观察到的内容进行实时渲染。

进一步地，所述步骤9之后还包括自动巡展步骤：

使相机围绕建筑群自动循环展示，并采用以下算法计算出相机角度，并调 出建筑的消防状态信息卡片：

首先，使相机围绕建筑体做椭圆轨迹周期运动，通过以下公式计算相机在 每一时刻的位置：

x＝a×cos(time)；

y＝b×sin(time)；

z＝c；

其中，x、y、z为相机的3轴坐标值，a、b是相机轨迹的椭圆方程系数，c 为相机高度，time表示时间；

并设置相机焦点坐标：

x′＝a′×cos(time)；

y′＝b′×sin(time)；

z′＝0；

其中，x′、y′、z′为相机焦点的3轴坐标值，a′、b′是相机焦点轨迹的椭圆 方程系数；

并通过以下公式计算出相机在XY平面的角度：

对处在相机主焦点的消防建筑使用渲染技术突出该消防建筑，并调出建筑 的消防状态信息卡片，同时通过以下公式计算出消防状态信息卡片需要朝向的 角度：

然后调整卡片角度，使卡片跟随相机视角变化。

进一步地，所述步骤9之后还包括人机交互步骤：根据用户鼠标的拖动与 缩放，分别调整相机的观察的位置与远近。

进一步地，所述步骤3中所述参数包括视角角度、拍摄面比例、近裁剪面 值及远裁剪面值中的一种或多种。

进一步地，所述步骤1之前：检测终端是否为移动端，若是，则在步骤3 中，将远裁剪面值设置为原本值的1/4，在步骤8中，将渲染空间的尺寸中的宽 度和高度设置为原本宽度和原本高度的一半。

进一步地，步骤4中直接选择导入预设的专业建模软件涉及的消防建筑模 型。

本发明实施例的有益效果为：本发明公开的自动巡展模式，能有效着重视 觉中心的消防建筑，并展示焦点消防建筑消防状态，适用于消防监控中心中的 大屏显示；本发明对于存在报警的问题楼层能够突出显示问题楼层，同时使用 的消防状态信息卡片，能结合所属的消防建筑展示楼层的消防状态信息，能使 消防管理者直观了解当前情况；本发明能部署于互联网上还能识别移动端用户， 并针对移动设备进行优化，保证可视化的流畅性。

附图说明

图1是本发明实施例的基于WebGL三维消防建筑模型可视化方法的流程示 意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征 可以相互结合，下面结合附图和具体实施例对本发明作进一步详细说明。

本发明实施例中若有方向性指示(诸如上、下、左、右、前、后……)仅 用于解释在某一特定姿态(如附图所示)下各部件之间的相对位置关系、运动 情况等，如果该特定姿态发生改变时，则该方向性指示也相应地随之改变。

另外，在本发明中若涉及“第一”、“第二”等的描述仅用于描述目的，而 不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。 由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特 征。

请参照图1，本发明实施例的基于WebGL三维消防建筑模型可视化方法包 括步骤1～步骤9，

步骤1：利用WebGL技术构建一个用于模型布置的布局空间。该布局空间 是模型布置的场所，是承载着所有模型的容器。

步骤2：根据消防建筑组织结构和设计图设计消防建筑模型，并计算在布局 空间的消防建筑模型坐标，通过消防建筑模型坐标计算消防信息卡片坐标。根 据消防建筑组织结构和设计图，设计建筑模块并计算在布局空间的坐标，通过 消防建筑模型坐标计算消防信息卡片坐标。

步骤3：创建一个相机并设置相机在布局空间的观测范围的参数。相机的设 置会影响在布局空间能观察到的内容。

步骤4：添加几何模型，并选择模型的材料及颜色，生成几何方块，采用若 干个几何方块创建消防建筑模型。

步骤5：根据消防信息卡片坐标创建消防建筑每层的消防状态信息卡片。每 层的消防建筑的消防状态信息卡片，用于展示该层的消防信息状态。

步骤6：根据真实场景选择性增加装饰，并在布局空间中添加光源和阴影， 美化布局空间。

步骤7：引入消防数据源，实时获取消防数据，根据消防数据调整消防建筑 模型样式和消防状态信息卡片内容。使用套接字的方式，与消防数据库建立连 接，并实时获取消防数据，根据数据调整展示消防建筑模型样式和消防状态信 息卡片内容。

步骤8：创建一个渲染器，设置渲染空间的尺寸，并设置将渲染结果展示到 页面上。

步骤9：通过所述渲染器对相机在布局空间所观察到的内容进行实时渲染。

完成以上步骤后选择模型使用方法。消防建筑模型的可视化方法提供人机 交互模式和自动巡展模式两种方法，以适应不同的场景。

在人机交互模式下，通过鼠标的拖动与缩放，能调整相机的观察的位置与 远近。通过这种方式，消防管理者能够快速定位重点消防建筑，了解消防情况。

在自动巡展的模式下，相机将围绕建筑群自动循环展示。

作为一种实施方式，所述步骤9之后还包括自动巡展步骤：

使相机围绕建筑群自动循环展示，并采用以下算法计算出相机角度，并调 出建筑的消防状态信息卡片：

首先，使相机围绕建筑体做椭圆轨迹周期运动，通过以下公式计算相机在 每一时刻的位置：

x＝a×cos(time)；

y＝b×sin(time)；

z＝c；

其中，x、y、z为相机的3轴坐标值，a、b是相机轨迹的椭圆方程系数，c 为相机高度(这个相对地面的高度为人为设定)，time表示时间；

并设置相机焦点坐标：

x′＝a′×cos(time)；

y′＝b′×sin(time)；

z′＝0(即0代表地面)；

其中，x′、y′、z′为相机焦点的3轴坐标值，a′、b′是相机焦点轨迹的椭圆 方程系数(相机焦点轨迹的椭圆小于相机轨迹的椭圆)；

并通过以下公式计算出相机在XY平面的角度：

对处在相机主焦点的消防建筑使用渲染技术突出该消防建筑，并调出建筑 的消防状态信息卡片，同时通过以下公式计算出消防状态信息卡片需要朝向的 角度：

然后调整卡片角度，使卡片跟随相机视角变化。

作为一种实施方式，所述步骤9之后还包括人机交互步骤：根据用户鼠标 的拖动与缩放，分别调整相机的观察的位置与远近。

作为一种实施方式，所述步骤3中所述参数包括视角角度、拍摄面比例、 近裁剪面值及远裁剪面值中的一种或多种。

作为一种实施方式，所述步骤1之前：检测终端是否为移动端，若是，则 在步骤3中，将远裁剪面值设置为原本值的1/4，在步骤8中，将渲染空间的尺 寸中的宽度和高度设置为原本宽度和原本高度的一半。

作为一种实施方式，步骤4中直接选择导入预设的专业建模软件涉及的消 防建筑模型。

示例：下面使用threejs作为框架开发校园场景下的消防建筑模型帮助说明 本发明的基于WebGL三维消防建筑模型可视化方法实施。其具体步骤如下：

(1)设计校园的消防建筑模型及消防信息卡片。根据消防建筑组织结构和 设计图，设计建筑模块并计算在布局空间的坐标。通过消防建筑模型坐标计算 消防信息卡片坐标。

(2)构建一个布局空间Scene，该布局空间是是模型布置的场所，是承载 着所有模型的容器。

(3)创建一个透视相机Perspective Camera，设置相机位置x和y坐标，视 角角度field of view、拍摄面比例aspect ratio，近裁剪面near clipping plane和远 裁剪面far clipping plane。这些参数的决定了相机在布局空间能观察到的内容， 对于视野以外的内容不进行渲染。

(4)创建消防建筑模型。添加几何模型Box Geometry，并选择模型的材料 MeshBasic Material及颜色，通过Mesh函数，生成一个几何方块。然后需要将 生成的方块添加到场景之中，消防建筑模型由若干个几何方块搭建而成。同时 将引入消防数据源，对存在报警的楼层，用红色渲染该楼层。

(5)创建校园楼的每层消防建筑消防状态信息卡片，用于展示该层的消防 信息状态。引入消防数据源，实时展示消防状态信息。消防状态信息包括建筑 楼层信息，消防设备报警状态。

(6)美化布局空间。根据真实场景选择性增加装饰，并在布局空间中添加 光源和阴影。添加完装饰后，首先添加的是环境光Ambient Light，该光源作为 基础光线，照亮布局空间。然后添加平行光Directional Light，并通过设置物体 的cast Shadow属性为true来计算每个物体的阴影，使物体能产生阴影效果。

(7)创建一个渲染器WebGL Renderer，通过setsize方法设置渲染空间的 尺寸，并设置将渲染结果展示到页面上。

(8)使用render函数渲染布局控件，并结合requestAnimationFrame函数保 证对相机在布局控件观察到的内容进行实时渲染。

完成以上步骤后选择模型使用方法。消防建筑模型的可视化方法提供人机 交互模式和自动巡展模式两种方法，以适应不同的场景。

在人机交互模式下，通过鼠标的拖动与缩放，能调整相机的观察的位置与 远近。通过这种方式，消防管理者能够快速定位重点消防建筑，了解消防情况。

在自动巡展的模式下，相机将围绕建筑群自动循环展示，并通过算法计算 出相机角度，并调出建筑的消防状态信息卡片，其具体步骤是：

相机将围绕消防建筑做椭圆轨迹周期运动，其坐标计算方法如下：

camera.position.x＝a*Math.cos(time)；

camera.position.y＝b*Math.sin(time)；

camera.position.x和camera.position.y分别为相机X轴和Y轴坐标位置。

然后调整相机焦点：

camera.lookAt(c*Math.cos(time),0,d*Math.sin(time))；

并计算在XY平面上的相机角度：

viewAngleXY＝Math.atan2(b*Math.sin(time),a*Math.cos(time))；

计算出相机角度后，对处在特定角度方位内的消防建筑，使用渲染技术突 出该消防建筑。

另外，使用了数学算法，通过实时计算，保证用户调整相机视角后，卡片 跟随相机视角变化。其步骤是首先计算在XY、XZ平面上的相机角度：

viewAngleXY＝Math.atan2(b*Math.sin(time),a*Math.cos(time))

viewAngleXZ＝Math.atan2(z,a*Math.cos(time))；

然后以此平面的计算出的角度旋转卡片朝向：

item.rotation.y＝viewAngleXY；

item.rotation.z＝viewAngleXZ；

通过以上步骤，保证了用户调整相机视角后，卡片能跟随相机视角变化。

在初始化模型前，会检测终端是否为移动端。若使用的移动端，将调整初 始化过程中的部分参数，提高可视化方法在移动端的流畅性与稳定性。其中优 化的方法

在步骤(3)创建相机时，调整远裁剪面far clipping plane，将其设置为原本 值的1/4；

在步骤(7)创建渲染器时，将setsize设置的原本宽度和原本高度为原来的 一半。

可选的，在步骤(4)创建消防建筑模型时，可以选择导入模型。其步骤如 下：

使用3D Max、Blender、Unity3D等专业建模软件设计消防建筑模块；

导入消防建筑模块。其中，导入方法可以使用threejs框架自带的MTLoader、OBJLoader及其他模块导入模型。消防建筑模块用于搭建消防建筑模型。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言， 可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变 化、修改、替换和变型，本发明的范围由所附权利要求及其等同范围限定。

Claims (6)

1.一种基于WebGL三维消防建筑模型可视化方法，其特征在于，包括：

步骤1：利用WebGL技术构建一个用于模型布置的布局空间；

步骤2：根据消防建筑组织结构和设计图设计消防建筑模型，并计算在布局空间的消防建筑模型坐标，通过消防建筑模型坐标计算消防信息卡片坐标；

步骤3：创建一个相机并设置相机在布局空间的观测范围的参数；

步骤4：添加几何模型，并选择模型的材料及颜色，生成几何方块，采用若干个几何方块创建消防建筑模型；

步骤5：根据消防信息卡片坐标创建消防建筑每层的消防状态信息卡片；

步骤6：根据真实场景选择性增加装饰，并在布局空间中添加光源和阴影，美化布局空间；

步骤7：引入消防数据源，实时获取消防数据，根据消防数据调整消防建筑模型样式和消防状态信息卡片内容；

步骤8：创建一个渲染器，设置渲染空间的尺寸，并设置将渲染结果展示到页面上；

步骤9：通过所述渲染器对相机在布局空间所观察到的内容进行实时渲染。

2.如权利要求1所述的基于WebGL三维消防建筑模型可视化方法，其特征在于，所述步骤9之后还包括自动巡展步骤：

使相机围绕建筑群自动循环展示，并采用以下算法计算出相机角度，并调出建筑的消防状态信息卡片：

首先，使相机围绕建筑体做椭圆轨迹周期运动，通过以下公式计算相机在每一时刻的位置：

x＝a×cos(time)；

y＝b×sin(time)；

z＝c；

其中，x、y、z为相机的3轴坐标值，a、b是相机轨迹的椭圆方程系数，c为相机高度，time表示时间；

并设置相机焦点坐标：

x′＝a′×cos(time)；

y′＝b′×sin(time)；

z′＝0；

其中，x′、y′、z′为相机焦点的3轴坐标值，a′、b′是相机焦点轨迹的椭圆方程系数；

并通过以下公式计算出相机在XY平面的角度：

对处在相机主焦点的消防建筑使用渲染技术突出该消防建筑，并调出建筑的消防状态信息卡片，同时通过以下公式计算出消防状态信息卡片需要朝向的角度：

其中，angelXY为卡片的在XY平面的朝向角度，与相机在XY平面的角度相同；angelXZ为卡片的在XZ平面的朝向角度；

然后调整卡片角度，使卡片跟随相机视角变化。

3.如权利要求1所述的基于WebGL三维消防建筑模型可视化方法，其特征在于，所述步骤9之后还包括人机交互步骤：根据用户鼠标的拖动与缩放，分别调整相机的观察的位置与远近。

4.如权利要求1所述的基于WebGL三维消防建筑模型可视化方法，其特征在于，所述步骤3中所述参数包括视角角度、拍摄面比例、近裁剪面值及远裁剪面值中的一种或多种。

5.如权利要求4所述的基于WebGL三维消防建筑模型可视化方法，其特征在于，所述步骤1之前：检测终端是否为移动端，若是，则在步骤3中，将远裁剪面值设置为原本值的1/4，在步骤8中，将渲染空间的尺寸中的宽度和高度设置为原本宽度和原本高度的一半。

6.如权利要求1所述的基于WebGL三维消防建筑模型可视化方法，其特征在于，步骤4中直接选择导入预设的专业建模软件涉及的消防建筑模型。