CN114896644B - 一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法 - Google Patents

Abstract

本发明涉三维显示领域，具体涉及一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法。主旨在于通过网络获取施工现场的塔吊运行状态的数据，3D模型获取数据，展示现场的塔吊状态，主要方案包括，S1：塔吊名称申明，S2：传感器名称申明，S3：边缘设备名称声明，S4：边缘设备配置，S5：边缘设备统一解析数据格式，S6：云服务端配置，S7：边缘设备场景展示，S8：云服务端场景展示。该塔吊展示系统是基于云计算与边缘计算的来进行搭建的，结合云计算与边缘计算的优点。该塔吊展示系统是基于ThreeJS的3D引擎框架，在网页端进行3D塔吊的施工现场展示。

Description

一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法

技术领域

本发明涉三维显示领域，具体涉及一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法。

背景技术

传统技术

目前的设计主要是以固定的塔吊模型的形式来展示塔吊，以文字的形式在界面中展示塔吊的状态；而在虚拟网络中实时展示塔吊运行状态目前还没有出现。

技术发展

随着科技不断发展，新兴技术不断出现，在建筑方面不断发展，高层塔吊建筑带来的危险问题也不断出现，而基于数字孪生技术的 3D塔吊施工场景展示系统成为解决该问题的一种途径。

技术实现的需求

为了满足在塔吊运行时，通过在虚拟网络上实时展示塔吊当前的运动及其状态来解决一些施工场地无法发现的安全隐患。传统的方式弊端逐渐显现出来，虽然提供更多的传感器设备来获取更多的数据，但是这些数据只是以文字的形式显示在页面当中，无法直接体现看到塔吊的运行状态。因此，一种能够展示塔吊实时状态以及一种模拟现场塔吊施工场景的技术方案亟待出现。

发明内容

本发明提出了一种基于ThreeJS的3D塔吊施工场景展示系统设计的方法，其解决技术问题是3D施工场景展示的技术问题，为了满足现场实时性和场景整体性的要求，本发明提供边缘计算与云计算相结合的一种解决方案，在前端场景展示方面引入了ThreeJS的开源渲染框架进行构建系统的3D塔吊展示。本发明要解决的问题是：通过网络获取施工现场的塔吊运行状态的数据，3D模型获取数据，展示现场的塔吊状态，施工者操作过程中。本发明所提出的技术问题是这样解决的：提供一种基于ThreeJS的3D塔吊施工场景展示系统设计的方法。

为了达到上述目的，本发明采用如下技术方案：

本发明提供了一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法，包括以下步骤：

S1：塔吊名称申明：

定义每一个塔吊的唯一别名，得到每一座塔吊的别名，为后续边缘设备调度配置塔吊通过申明化的别名进行视图的展现提供依赖；

S2：传感器名称申明：

定义各个传感器唯一别名以及其数据解析方法，得到每一个传感器的别名和解析方法，为后续边缘设备处理数据通过申明化的别名进行统一的数据格式提供依赖；

S3：边缘设备名称声明：

定义每一个边缘设备的唯一别名，得到每一个边缘设备的别名，为后续云服务端调度配置通过申明化的别名进行统一的视图展现提供依赖；

S4：边缘设备配置：

对步骤S1中申明的塔吊唯一别名设定绑定的边缘设备，得到塔吊与边缘设备的对应关系；

S5：边缘设备统一解析数据格式：

对步骤S2中申明的传感器唯一别名设定对应的解析方式，得到统一的数据格式的数据；

S6：云服务端配置：

对步骤S3中申明的边缘设备唯一别名设定对应施工场景塔吊位置以及数据传输格式，得到边缘设备传输的数据。

S7：边缘设备场景展示：

对步骤S5中的统一数据格式来实现塔吊的各结构运动提供依赖，实现塔吊的整体运动；

S8：云服务端场景展示：

对步骤S6中边缘设备传输的数据进行接收，实现场景中对应的塔吊的运动。

上述技术方案中：所述步骤S1包括以下步骤：

步骤1：新建类，得到塔吊申明对象；

步骤2：在塔吊申明对象中，申明塔吊别名；

上述技术方案中：所述步骤S2包括以下步骤：

步骤1：新建类，得到传感器申明对象；

步骤2：在申明的传感器对象中，申明传感器别名、不同传输协议的传感器解析方法；

上述技术方案中：所述步骤S3包括以下步骤：

步骤1：新建类，得到边缘设备申明对象；

步骤2：在申明的边缘设备对象中，申明边缘设备别名；

上述技术方案中：所述步骤S4包括以下步骤：

步骤1：通过继承Bind绑定配置类的方式，得到绑定配置对象；

步骤2：对绑定配置对象，实现Bind绑定对象申明的抽象配置方法，得到绑定配置方法；

步骤3：对绑定配置方法，将边缘设备别名申明对象以及塔吊别名申明对象为参数传入到该方法中；

步骤4：对绑定配置方法，将两者绑定关系，写入云端数据库中以及在本地生成配置文件，方便进行统一管理。

上述技术方案中：所述步骤S5包括以下步骤：

步骤1：通过继承Parse解析数据类的方式，得到解析数据类的对象；

步骤2：对解析数据类的对象，实现Parse解析数据对象申明的抽象解析方法，得到数据解析方法；

步骤3：对数据解析方法，设定不同传感器传输协议的解析方式，将传感器别名申明对象传入该方法中；

步骤4：对数据解析方法，调用.switch()语句，根据传感器别名进行不同方式的数据解析，得到统一的数据格式的数据。

上述技术方案中：所述步骤S6包括以下步骤：

步骤1：通过继承Position位置配置类的方式，得到位置配置对象；

步骤2：对位置配置对象，实现Position位置对象申明抽象配置方法，得到位置配置方法；

步骤3：对位置配置方法，将边缘设备名为参数以及塔吊基本参数传入到该方法中；

步骤4：对位置配置方法，通过边缘设备名查找云端数据库，获取绑定塔吊对应信息；

步骤5：对位置配置方法，将塔吊基本信息写入云端数据库中；

上述技术方案中：所述步骤S7包括以下步骤：

步骤1：通过继承THREE.Scene()场景配置类的方式，得到场景配置对象；

步骤2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤3：对视角配置对象，调用.position()方法，将(x，y，z)位置参数传入到该方法中；(相机在三维坐标中的位置)

步骤4：对视角配置对象，调用.rotation()方法，将(x，y，z)旋转参数传入到该方法中；(相机在三维坐标中的旋转角度)

步骤5：对视角配置对象，调用.look()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时指向的中心点)

步骤6：对视角配置对象，调用.up()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时相机头顶的方向)

步骤7：通过继承THREE.AmbientLight()环境光照配置类的方式，得到环境光照配置对象；

步骤8：对环境光照配置对象，将颜色参数配置到该对象中；

步骤8：环境光照配置对象配置完成后，调用场景配置对象中的.add()方法，将环境光照配置对象加入到场景之中；

步骤9：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤10：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤11：通过继承THREE.Mesh()网格配置类的方式，得到网格配置对象；

步骤12：对网格配置对象，将几何类型及大小和几何材质配置到该对象中；

步骤13：通过继承THREE.STLLoader()模型加载配置类的方式，得到模型加载配置对象；

步骤14：对模型加载配置对象，调用.load()方法，将STL模型地址以及重复步骤11和12，获得配置加载模型；

步骤15：重复步骤13和步骤14加载塔吊模型各个部分，通过配置组装获得完整的塔吊模型；

步骤16：对场景配置对象，调用.add()方法，将上述产生对象加载到Scene场景之中，获得塔吊场景；

步骤17：获取塔吊工作状态，查看塔吊是否上线工作，否结束，是继续执行；

步骤18：接收塔吊数据，调用方法animate()，将接收数据传入方法之中，使得塔吊各部分运动起来；

步骤19：实时刷新页面，调用requestAnimationFrame()方法，将方法animate()传入到该方法中，实现塔吊的运动。

上述技术方案中：所述步骤S8包括以下步骤：

步骤1：通过继承THREE.Scene场景配置类的方式，得到场景配置对象；

步骤2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤3：对视角配置对象，调用.position()方法，将(x，y，z)位置参数传入到该方法中；(相机在三维坐标中的位置)

步骤4：对视角配置对象，调用.rotation()方法，将(x，y，z)旋转参数传入到该方法中；(相机在三维坐标中的旋转角度)

步骤5：对视角配置对象，调用.look()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时指向的中心点)

步骤6：对视角配置对象，调用.up()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时相机头顶的方向)

步骤7：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤8：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤9：通过继承InitScene场景初始化类的方式，得到场景初始化对象；

步骤10：对于场景初始化对象，调用.Light()方法，将场景配置对象作为参数传入到该方法中，获得光照效果；

步骤11：对于场景初始化对象，调用.Sky()方法，将场景配置对象作为参数传入到该方法中，获得天空效果；

步骤12：对于场景初始化对象，调用.Generate()方法，将场景配置对象作为参数传入到该方法中，生成施工现场建筑物图；

步骤13：通过后端接口API获取数据库信息，获得塔吊静态数据；

步骤14：前端解析塔吊数据，在场景中生成塔吊，判断塔吊是否加载完成，直到加载完成；

步骤15：通过后端接口API获取数据库信息，获得塔吊动态数据；

步骤16：前端解析塔吊动态数据，判断对应塔吊，将对应数据传入到对应塔吊对象中；

步骤17：对塔吊对象，调用movement()方法，将动态数据传入该方法中；

步骤18：调用.anima()方法，在requestAnimationFrame(animate) 方法实时刷新塔吊状态；

因为本发明采用上述技术方案，因此具备以下有益效果：

一、该塔吊展示系统是基于云计算与边缘计算的来进行搭建的，结合云计算与边缘计算的优点。

二、该塔吊展示系统是基于ThreeJS的3D引擎框架，在网页端进行3D塔吊的施工现场展示。

三、运用数字孪生技术，通过网络空间和物理空间之间的近实时同步来实现塔吊的运动状态。

附图说明

图1为塔吊别名申明流程示意图；

图2为传感器别名申明流程示意图；

图3为边缘服务器别名申明流程示意图；

图4为塔吊与边缘设备绑定流程示意图；

图5为边缘设备解析传感器数据流程示意图；

图6为塔吊位置配置流程示意图；

图7边缘设备塔吊展示流程示意图；

图8服务端施工现场塔吊展示流程示意图。

具体实施方式

下面结合附图和实施例，对本发明的具体实施方式做进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

本申请是针对在“3D展示”下通过本方案提供的架构，通过3D 展示流程，数据解析，通过物联网数据传输来实现，基于数字孪生技术，结合云计算与边缘计算的优点来展示3D塔吊的运动。

本提案主要首先通过结合边缘计算与边缘计算结合的方式，对于单个塔吊进行边缘展示，而对于整个施工现场的场景，通过边缘设备运用云端设计的API传输塔吊运动数据到服务端进行塔吊施工场景的整体展示。

本提案申请主要包含塔吊名称申明、传感器名称申明、边缘设备名称声明、边缘设备配置、边缘设备统一解析数据格式、云服务端配置、边缘设备场景展示、云服务端场景展示总共八大模块，其中：

塔吊名称申明，主要是定义每一个塔吊的唯一别名，得到每一座塔吊的别名，为后续边缘设备调度配置塔吊通过申明化的别名进行视图的展现提供依赖；

传感器名称申明，主要是定义各个传感器唯一别名以及其数据解析方法，得到每一个传感器的别名和解析方法，为后续边缘设备处理数据通过申明化的别名进行统一的数据格式提供依赖；

边缘设备名称声明，主要是定义每一个边缘设备的唯一别名，得到每一个边缘设备的别名，为后续云服务端调度配置通过申明化的别名进行统一的视图展现提供依赖；

边缘设备配置，主要对申明的塔吊唯一别名设定绑定的边缘设备，得到塔吊与边缘设备的对应关系，为后续云服务端解析数据对应各自塔吊数据，从而实现塔吊的运动提供依赖；

边缘设备统一解析数据格式，主要是对申明的传感器唯一别名设定对应的解析方式，得到统一的数据格式的数据，为边缘设备展示 3D塔吊场景提供依赖；

云服务端配置，主要是对申明的边缘设备唯一别名设定对应施工场景塔吊位置以及数据传输格式，得到边缘设备传输的数据，为云服务端展示3D塔吊施工现场提供依赖；

边缘设备场景展示，主要是对统一数据格式来实现塔吊的各结构运动提供依赖，实现塔吊的整体运动；

云服务端场景展示，主要是对边缘设备传输的数据进行接收，实现场景中对应的塔吊的运动。

3D塔吊展示，是该申请提案的核心，通过绑定边缘设备，解析传感数据，设计API传输数据到前端，初始化场景，加载模型，配置塔吊模型并生成配置文件，初始化模型，通过API获取塔吊动态数据，在前端渲染生成塔吊模型。

塔吊名称申明：

步骤1：新建类，得到塔吊申明对象；

步骤2：在塔吊申明对象中，申明塔吊别名；

传感器名称申明：

步骤1：新建类，得到传感器申明对象；

步骤2：在申明的传感器对象中，申明传感器别名、不同传输协议的传感器解析方法；

边缘设备名称声明：

步骤1：新建类，得到边缘设备申明对象；

步骤2：在申明的边缘设备对象中，申明边缘设备别名；

边缘设备配置：

步骤1：通过继承Bind绑定配置类的方式，得到绑定配置对象；

步骤2：对绑定配置对象，实现Bind绑定对象申明的抽象配置方法，得到绑定配置方法；

步骤3：对绑定配置方法，将边缘设备别名申明对象以及塔吊别名申明对象为参数传入到该方法中；

步骤4：对绑定配置方法，将两者绑定关系，写入云端数据库中以及在本地生成配置文件，方便进行统一管理。

边缘设备统一解析数据格式：

步骤1：通过继承Parse解析数据类的方式，得到解析数据类的对象；

步骤2：对解析数据类的对象，实现Parse解析数据对象申明的抽象解析方法，得到数据解析方法；

步骤3：对数据解析方法，设定不同传感器传输协议的解析方式，将传感器别名申明对象传入该方法中；

步骤4：对数据解析方法，调用.switch()语句，根据传感器别名进行不同方式的数据解析，得到统一的数据格式的数据。

云服务端配置：

步骤1：通过继承Position位置配置类的方式，得到位置配置对象；

步骤2：对位置配置对象，实现Position位置对象申明抽象配置方法，得到位置配置方法；

步骤3：对位置配置方法，将边缘设备名为参数以及塔吊基本参数传入到该方法中；

步骤4：对位置配置方法，通过边缘设备名查找云端数据库，获取绑定塔吊对应信息；

步骤5：对位置配置方法，将塔吊基本信息写入云端数据库中；

边缘设备场景展示：

步骤1：通过继承THREE.Scene()场景配置类的方式，得到场景配置对象；

步骤2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤3：对视角配置对象，调用.position()方法，将(x，y，z)位置参数传入到该方法中；(相机在三维坐标中的位置)

步骤4：对视角配置对象，调用.rotation()方法，将(x，y，z)旋转参数传入到该方法中；(相机在三维坐标中的旋转角度)

步骤5：对视角配置对象，调用.look()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时指向的中心点)

步骤6：对视角配置对象，调用.up()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时相机头顶的方向)

步骤7：通过继承THREE.AmbientLight()环境光照配置类的方式，得到环境光照配置对象；

步骤8：对环境光照配置对象，将颜色参数配置到该对象中；

步骤9：环境光照配置对象配置完成后，调用场景配置对象中的.add()方法，将环境光照配置对象加入到场景之中；

步骤10：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤11：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤12：通过继承THREE.Mesh()网格配置类的方式，得到网格配置对象；

步骤13：对网格配置对象，将几何类型及大小和几何材质配置到该对象中；

步骤14：通过继承THREE.STLLoader()模型加载配置类的方式，得到模型加载配置对象；

步骤15：对模型加载配置对象，调用.load()方法，将STL模型地址以及重复步骤12和13，获得配置加载模型；

步骤16：重复步骤14和步骤15加载塔吊模型各个部分，通过配置组装获得完整的塔吊模型；

步骤17：对场景配置对象，调用.add()方法，将上述产生对象加载到Scene场景之中，获得塔吊场景；

步骤18：获取塔吊工作状态，查看塔吊是否上线工作，否结束，是继续执行；

步骤19：接收塔吊数据，调用方法animate()，将接收数据传入方法之中，使得塔吊各部分运动起来；

步骤20：实时刷新页面，调用requestAnimationFrame()方法，将方法animate()传入到该方法中，实现塔吊的运动。

云服务端场景展示：

步骤1：通过继承THREE.Scene场景配置类的方式，得到场景配置对象；

步骤2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤3：对视角配置对象，调用.position()方法，将(x，y，z)位置参数传入到该方法中；(相机在三维坐标中的位置)

步骤4：对视角配置对象，调用.rotation()方法，将(x，y，z)旋转参数传入到该方法中；(相机在三维坐标中的旋转角度)

步骤5：对视角配置对象，调用.look()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时指向的中心点)

步骤6：对视角配置对象，调用.up()方法，将(x，y，z)位置参数传入到该方法中；(相机拍摄时相机头顶的方向)

步骤7：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤8：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤9：通过继承InitScene场景初始化类的方式，得到场景初始化对象；

步骤10：对于场景初始化对象，调用.Light()方法，将场景配置对象作为参数传入到该方法中，获得光照效果；

步骤11：对于场景初始化对象，调用.Sky()方法，将场景配置对象作为参数传入到该方法中，获得天空效果；

步骤12：对于场景初始化对象，调用.Generate()方法，将场景配置对象作为参数传入到该方法中，生成施工现场建筑物图；

步骤13：通过后端接口API获取数据库信息，获得塔吊静态数据；

步骤14：前端解析塔吊数据，在场景中生成塔吊，判断塔吊是否加载完成，直到加载完成；

步骤15：通过后端接口API获取数据库信息，获得塔吊动态数据：

步骤16：前端解析塔吊动态数据，判断对应塔吊，将对应数据传入到对应塔吊对象中；

步骤17：对塔吊对象，调用movement()方法，将动态数据传入该方法中；

步骤18：调用.anima()方法，在requestAnimationFrame(animate) 方法实时刷新塔吊状态。

Claims (5)

1.一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法,其特征在于，包括以下步骤：

S1：塔吊名称申明：

定义每一个塔吊的唯一别名， 得到每一座塔吊的别名，为后续边缘设备调度配置塔吊通过申明化的别名进行视图的展现提供依赖；

S2: 传感器名称申明：

定义各个传感器唯一别名以及其数据解析方法，得到每一个传感器的别名和解析方法，为后续边缘设备处理数据通过申明化的别名进行统一的数据格式提供依赖；

S3: 边缘设备名称声明：

定义每一个边缘设备的唯一别名，得到每一个边缘设备的别名，为后续云服务端调度配置通过申明化的别名进行统一的视图展现提供依赖；

S4: 边缘设备配置：

对步骤S1中申明的塔吊唯一别名设定绑定的边缘设备，得到塔吊与边缘设备的对应关系；

S5: 边缘设备统一解析数据格式：

对步骤S2中申明的传感器唯一别名设定对应的解析方式，得到统一的数据格式的数据；

S6：云服务端配置：

对步骤S3中申明的边缘设备唯一别名设定对应施工场景塔吊位置以及数据传输格式，得到边缘设备传输的数据;

S7: 边缘设备场景展示：

对步骤S5中的统一数据格式来实现塔吊的各结构运动提供依赖，实现塔吊的整体运动；

S8：云服务端场景展示：

对步骤S6中边缘设备传输的数据进行接收，实现场景中对应的塔吊的运动;

所述步骤S6包括以下步骤：

步骤6.1：通过继承Position位置配置类的方式，得到位置配置对象；

步骤6.2：对位置配置对象，实现Position位置对象申明抽象配置方法，得到位置配置方法；

步骤6.3： 对位置配置方法，将边缘设备名为参数以及塔吊基本参数传入到该方法中；

步骤6.4：对位置配置方法，通过边缘设备名查找云端数据库，获取绑定塔吊对应信息；

步骤6.5：对位置配置方法，将塔吊基本信息写入云端数据库中；

所述步骤S4包括以下步骤：

步骤4.1： 通过继承Bind绑定配置类的方式，得到绑定配置对象；

步骤4.2： 对绑定配置对象，实现Bind绑定对象申明的抽象配置方法，得到绑定配置方法；

步骤4.3： 对绑定配置方法，将边缘设备别名申明对象以及塔吊别名申明对象为参数传入到该方法中；

步骤4.4： 对绑定配置方法，将两者绑定关系，写入云端数据库中以及在本地生成配置文件；

所述步骤S5包括以下步骤：

步骤5.1：通过继承Parse解析数据类的方式，得到解析数据类的对象；

步骤5.2：对解析数据类的对象，实现Parse解析数据对象申明的抽象解析方法，得到数据解析方法；

步骤5.3：对数据解析方法，设定不同传感器传输协议的解析方式，将传感器别名申明对象传入该方法中；

步骤5.4：对数据解析方法，调用.switch()语句，根据传感器别名进行不同方式的数据解析，得到统一的数据格式的数据；

所述步骤S8包括以下步骤：

步骤8.1：通过继承THREE.Scene场景配置类的方式，得到场景配置对象；

步骤8.2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤8.3:对视角配置对象，调用.position()方法，将相机在三维坐标中的位置参数传入到该方法中； 步骤8.4: 对视角配置对象，调用.rotation()方法，将相机在三维坐标中的旋转参数传入到该方法中； 步骤8.5：对视角配置对象，调用.look()方法，将相机拍摄时指向的中心点位置参数传入到该方法中；

步骤8.6：对视角配置对象，调用.up()方法，将相机拍摄时相机头顶的方向位置参数传入到该方法中；步骤8.7：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤8.8：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤8.9：通过继承InitScene场景初始化类的方式，得到场景初始化对象；

步骤8.10：对于场景初始化对象，调用.Light()方法，将场景配置对象作为参数传入到该方法中，获得光照效果；

步骤8.11：对于场景初始化对象，调用.Sky()方法，将场景配置对象作为参数传入到该方法中，获得天空效果；

步骤8.12：对于场景初始化对象，调用.Generate()方法，将场景配置对象作为参数传入到该方法中，生成施工现场建筑物图；

步骤8.13：通过后端接口API获取数据库信息，获得塔吊静态数据；

步骤8.14：前端解析塔吊数据，在场景中生成塔吊，判断塔吊是否加载完成，直到加载完成；

步骤8.15：通过后端接口API获取数据库信息，获得塔吊动态数据；

步骤8.16：前端解析塔吊动态数据，判断对应塔吊，将对应数据传入到对应塔吊对象中；

步骤8.17：对塔吊对象，调用movement（）方法，将动态数据传入该方法中；

步骤8.18：调用.anima()方法，在requestAnimationFrame(animate)方法实时刷新塔吊状态。

2.根据权利要求1所述的一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法,其特征在于，所述步骤S7包括以下步骤：

步骤7.1：通过继承THREE.Scene()场景配置类的方式，得到场景配置对象；

步骤7.2：通过继承THREE.PerspectiveCamera()视角配置类的方式，得到视角配置对象；

步骤7.3:对视角配置对象，调用.position()方法，将相机在三维坐标中的位置参数传入到该方法中；

步骤7.4: 对视角配置对象，调用.rotation()方法，将相机在三维坐标中的旋转参数传入到该方法中； 步骤7.5：对视角配置对象，调用.look()方法，将相机拍摄时指向的中心点位置参数传入到该方法中；

步骤7.6：对视角配置对象，调用.up()方法，将相机拍摄时相机头顶的方向位置参数传入到该方法中；

步骤7.7：通过继承THREE.AmbientLight()环境光照配置类的方式，得到环境光照配置对象；

步骤7.8：对环境光照配置对象，将颜色参数配置到该对象中；

步骤7.9：环境光照配置对象配置完成后，调用场景配置对象中的.add()方法，将环境光照配置对象加入到场景之中；

步骤7.10：通过继承THREE.WebGLRenderer()渲染配置类的方式，得到渲染配置对象；

步骤7.11：对渲染配置对象，将是否开启动画、是否保存绘图缓冲、是否使用模板字体或图案、是否设置像素深度、是否设置背景色透明、着色精度选择、最大灯光数配置到该对象中；

步骤7.12：通过继承THREE.Mesh()网格配置类的方式，得到网格配置对象；

步骤7.13：对网格配置对象，将几何类型及大小和几何材质配置到该对象中；

步骤7.14：通过继承THREE.STLLoader()模型加载配置类的方式，得到模型加载配置对象；

步骤7.15：对模型加载配置对象，调用.load()方法，将STL模型地址以及重复步骤7.12和7.13，获得配置加载模型；

步骤7.16：重复步骤7.14和步骤7.15加载塔吊模型各个部分，通过配置组装获得完整的塔吊模型；

步骤7.17：对场景配置对象，调用.add()方法加载到Scene场景之中，获得塔吊场景；

步骤7.18：获取塔吊工作状态，查看塔吊是否上线工作，否结束，是继续执行；

步骤7.19：接收塔吊数据，调用方法animate()，将接收数据传入方法之中，使得塔吊各部分运动起来；

步骤7.20：实时刷新页面，调用requestAnimationFrame()方法，将方法animate()传入到该方法中，实现塔吊的运动。

3.根据权利要求1所述的一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法,其特征在于，所述步骤S1包括以下步骤：

步骤1.1：新建类，得到塔吊申明对象；

步骤1.2：在塔吊申明对象中，申明塔吊别名。

4.根据权利要求1所述的一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法,其特征在于，所述步骤S2包括以下步骤：

步骤2.1：新建类，得到传感器申明对象；

步骤2.2：在申明的传感器对象中，申明传感器别名、不同传输协议的传感器解析方法。

5.根据权利要求1所述的一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法,其特征在于，所述步骤S3包括以下步骤：

步骤3.1：新建类，得到边缘设备申明对象；

步骤3.2：在申明的边缘设备对象中，申明边缘设备别名。

Images