CN109979002A

CN109979002A - 基于WebGL三维可视化的场景构建系统及方法

Info

Publication number: CN109979002A
Application number: CN201910150624.4A
Authority: CN
Inventors: 李红轩
Original assignee: Southern China Machinery Manufacturing Co Ltd
Current assignee: Southern China Machinery Manufacturing Co Ltd
Priority date: 2019-02-28
Filing date: 2019-02-28
Publication date: 2019-07-05

Abstract

本发明实施例提供的基于WebGL三维可视化的场景构建系统，获取的第一目标的三维数据、obj文件以及mtl文件，通过Three采用的多种接口设计将obj文件和mtl文件传入解析在网页上构建3D模型，并基于WebGL根据obj文件和mtl文件对所述第一目标进行三维可视化显示，提高了场景构建的效率，能够更加直观的展示矿山场景的地形地貌以及分布情况。

Description

基于WebGL三维可视化的场景构建系统及方法

技术领域

本发明涉及计算机三维可视化技术领域，尤其涉及基于WebGL三维可视化的场景构建系统。

背景技术

现有矿山建设工程主要为通过人工手持全站仪或标尺获取地形数据，然后将测量数据使用CAD等矢量辅助设计软件进行人工绘制二维地形图，并使用等高线高程标注方式表示地形特点，最后由设计人员在二维地形图上绘制矿山设备布设要素。

由于采用人工绘制二维地形图只能反映地形高程数据，对绘图专业技能要求高，在获取大面积地形环境时数据收集效率低，且无法精准还原与反映矿山土层以上植被和地面物体情况，其次人工绘制矿山设备布设要素，无法直观展示设备布设高度落差问题。

所以，目前需要一种能够在网上构建矿山场景并进行浏览的系统，能够快速的构建矿山场景，并且能够进行三维可视化的显示。

发明内容

本发明实施例的目的是提供一种基于WebGL三维可视化的场景构建系统，提高了场景构建的效率，能够更加直观的展示矿山场景的地形地貌以及分布情况。

为实现上述目的，本发明实施例提供了基于WebGL三维可视化的场景构建系统，包括：数据获取模块、模型构建模块以及显示模块；

所述数据获取模块，用于获取第一目标的三维数据、obj文件以及mtl文件；

所述模型构建模块，用于根据所述obj文件和所述mtl文件，构建3D模型；

所述显示模块，用于基于WebGL根据所述obj文件和所述mtl文件对所述第一目标进行三维可视化显示。

进一步的，所述模型处理模块包括创建单元和处理单元；

所述创建单元，用于创建场景、相机以及光源；

所述处理单元，用于通过Three将所述obj文件和mtl文件传入解析在网页上，并构建3D模型。

进一步的，所述基于WebGL三维可视化的场景构建系统，还包括：测量和计算模块；

所述测量和计算模块，用于测量所述3D模型的距离、面积以及体积数据，并将所述3D模型的距离、面积以及体积数据发送至所述显示模块。

进一步的，所述基于WebGL三维可视化的场景构建系统，还包括：渲染模块；

所述渲染模块，用于对所述3D模型进行渲染处理。

优选的，本发明还提供了基于WebGL三维可视化的场景构建方法，包括以下步骤：

获取第一目标的三维数据、obj文件以及mtl文件；

根据所述obj文件和所述mtl文件，构建3D模型；

基于WebGL根据所述obj文件和所述mtl文件对所述第一目标进行三维可视化显示。

进一步的，所述采用Three并根据所述obj文件和mtl文件，构建3D模型，具体为：

创建场景、相机以及光源；

通过Three将所述obj文件和mtl文件传入解析在网页上，并构建3D模型。

进一步的，在所述通过Three并根据所述obj文件和mtl文件，构建3D模型之后，还包括：

对所述3D模型进行测量，得到所述3D模型的长度和面积数据，并显示所述3D模型的长度和面积数据。

对所述3D模型进行渲染处理。

与现有技术相比，具有如下有益效果：

附图说明

图1是本发明提供的基于WebGL三维可视化的场景构建系统的一个实施例的结构示意图；

图2是本发明提供的基于WebGL三维可视化的场景构建方法的一个实施例的流程示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参见图1，图1是本发明提供的基于WebGL三维可视化的场景构建系统的一个实施例的结构示意图；本发明实施例提供一种基于WebGL三维可视化的场景构建系统，包括数据获取模块、模型构建模块以及显示模块；

其中，所述数据获取模块，用于获取第一目标的三维数据、obj文件以及mtl文件；所述模型构建模块，用于根据所述obj文件和所述mtl文件，构建3D模型；所述显示模块，用于基于WebGL根据所述obj文件和所述mtl文件对所述第一目标进行三维可视化显示。

需要说明的是，WebGL是一种3D绘图标准，该标准解决了现有网络三维最大的问题：插件问题。这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以利用底层图形硬件加速功能为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航，提高了数据视觉化。

Three.js是一款运行在浏览器中的3D引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，并且Three采用多种接口设计可以将obj文件和mtl文件传入解析在网页上构建3D图形。

其中，obj文件存储了模型的顶点坐标、节点层次、相机、场景等参数内容，是整个模型的核心；mtl文件为二进制文件(.tml),用来存储模型的图形数据，如：材质、灯光、纹理、索引以及动画等数据内容。

采用Three构建三维场景主要有以下几点优势：(1)合理的数据压缩，使用占用空间小的二进制文件存储模型数据；(2)面向Web的3D模型格式，采用适合Web传输且方便JS解析的格式来直接传入数据构建三维场景。同时仅使用JS支持的图片格式作为纹理数据(JPG、PNG等)；(3)渲染优化，Three中包含可以被GL接口直接应用的着色器，同时使用二进制文件存储图形数据，方便快速创建数据缓冲区；(4)与GL接口的良好对接，模型的属性参数可以方便地解析传入GL接口的函数及函数参数。

在本实施例中，模型处理模块包括创建单元和处理单元；

其中，创建单元用于创建场景、相机以及光源；处理单元用于采用Three将obj文件和mtl文件传入解析在网页上，并构建3D模型。

需要说明的是，“场景”：是一个三维空间，所有物品的容器。可以把场景想象成一个空房间，接下来我们会往房间里面放要呈现的物体、相机、光源。“相机”：Three.js必须要有往场景中添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向、角度。想象一下，在房间里放了一个摄像机，你不在房间里面，但可以远程控制相机移动，摄像机传给远程电脑上展示出来的画面，就是Three.js在屏幕上呈现的画面。“光”：假如没有光，摄像机看不到任何东西，因此需要往场景中添加光源。为了跟真实世界更加接近，Three.js支持模拟不同光源，展现不同光照效果，有点光源、平行光、聚光灯、环境光等。

进一步的，还可以在所创建的场景内添加物体，“物体”：有了场景、相机、光，就可以往场景中放物体了，在Three.js中，物体由形状和材质两部分组成，形状决定物品的轮廓，材质则是物体的材料和质感。

其中，具体的实现过程如下：

new THREE.Scene()//创建场景，场景用来存放模型

new THREE.PerspectiveCanera()；//创建相机确定观察位置、方向、角度相机看到的就相当于我们看到的。

new THREE.AmbientLight()

Scene.add()//创建光源，没有光源摄像机看不到任何东西，因此需要往场景中添加光源

},)；//有了场景和光只要将三维模型文件按传入就可以了，three会将传入数据解析在场景构建3d模型。并通过传入的mtl文件来绘制场景中的模型图像。同时three还可让浏览器自行根据当前cpu负载情况决定何时重绘，达到最佳帧率。

优选的，基于WebGL三维可视化的场景构建系统，还包括：测量和计算模块，用于测量3D模型的长度和面积数据，并将3D模型的长度和面积数据发送至显示模块。

将测量模型得到的长度和面积数据显示在显示模块中，能够在观察第一目标的场景的过程中，还可以了解到所述第一目标的长度和面积，使得用户对所述第一目标的具体情况更加地了如指掌。

需要说明的是，该测量步骤具体为：获取模型对象，首先判断测距工具是否打开，关闭的话则返回。当点击3D模型时，获取鼠标点击的点并判断是否有效，绑定当前的坐标点，获取点数最后一个元素，转换为pixel点，并将当前的点转换尾pixel点，利用空间三角函数公式计算当前两个点的距离。并保存当前坐标数据，将当前坐标数据存入数组，然后对三维场景空间范围内进行计算获取被测物体长度和面积数据。

在本实施例中，首先要判断点是否在线的外包矩形内，如果在则做进一步判断，否则返回，而判断点q是否在线段上的依据是：设点为q，线段为p1p2，(q-p1)乘以(p2-p1)等于0，且q在以p1，p2为对角顶点的矩形内；即首先判断点是否在curpt和nextpt之间，其次判断该点是否在线段的外包矩形内，如果等于0则返回。计算两点之间的距离，两点的坐标必须为经纬度，并计算得到距离与面积。

其中，测量的具体实现过程如下：

检查数据：

计算两点距离：

优选的，基于WebGL三维可视化的场景构建系统，还包括：渲染模块，用于对3D模型进行渲染处理，并发送至显示模块。

请参见图2，图2是本发明提供的基于WebGL三维可视化的场景构建方法的一个实施例的流程示意图；本发明实施例提供一种基于WebGL三维可视化的场景构建方法，包括步骤S1-S3；

S1，获取第一目标的三维数据、obj文件以及mtl文件。

S2，根据所述obj文件和所述mtl文件，构建3D模型。

S3，基于WebGL根据所述obj文件和所述mtl文件对所述第一目标进行三维可视化显示。

在本实施例中，步骤S3具体为：创建场景、相机以及光源；采用Three将obj文件和mtl文件传入解析在网页上，并构建3D模型。

优选的，在步骤S2之后还包括：对3D模型进行渲染处理，并发送至显示模块。

综上所述，本发明实施例提供的基于WebGL三维可视化的场景构建系统及方法，获取的第一目标的三维数据、obj文件以及mtl文件，通过Three采用的多种接口设计将obj文件和mtl文件传入解析在网页上构建3D模型，并基于WebGL根据obj文件和mtl文件对所述第一目标进行三维可视化显示，提高了场景构建的效率，能够更加直观的展示矿山场景的地形地貌以及分布情况。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

Claims

1.基于WebGL三维可视化的场景构建系统，其特征在于，包括：数据获取模块、模型构建模块以及显示模块；

2.如权利要求1所述的基于WebGL三维可视化的场景构建系统，其特征在于，所述模型处理模块包括创建单元和处理单元；

所述创建单元，用于创建场景、相机以及光源；

3.如权利要求1所述的基于WebGL三维可视化的场景构建系统，其特征在于，还包括：测量和计算模块；

4.如权利要求1所述的基于WebGL三维可视化的场景构建系统，其特征在于，还包括：渲染模块；

所述渲染模块，用于对所述3D模型进行渲染处理。

5.基于WebGL三维可视化的场景构建方法，其特征在于，包括以下步骤：

获取第一目标的三维数据、obj文件以及mtl文件；

根据所述obj文件和所述mtl文件，构建3D模型；

6.如权利要求4所述的基于WebGL三维可视化的场景构建方法，其特征在于，所述采用Three并根据所述obj文件和mtl文件，构建3D模型，具体为：

创建场景、相机以及光源；

7.如权利要求4所述的基于WebGL三维可视化的场景构建方法，其特征在于，在所述根据所述obj文件和所述mtl文件，构建3D模型之后，还包括：

8.如权利要求4所述的基于WebGL三维可视化的场景构建方法，其特征在于，在所述通过Three并根据所述obj文件和mtl文件，构建3D模型之后，还包括：

对所述3D模型进行渲染处理。