一种基于opensfm和three.js的裂缝位置快速定位显示方法

摘要

本发明公开了一种基于opensfm和three.js的裂缝位置快速定位显示方法，包括：步骤一、通过无人机拍摄目标建筑物二维图片，对图片进行三维重建得到建筑物点云ply文件；步骤二、将ply文件转换成json文件，编写实现快速显示功能的html文件；步骤三、用浏览器打开步骤二的html文件，再将点云json文件和opensfm自动生成的json文件导入浏览器，使得浏览器可以显示建筑物模型、定位裂缝位置、显示裂缝图片和裂缝信息、提供鼠标点击裂缝图片自动偏转模型准确且清晰地显示裂缝位置的功能。本发明可以提供裂缝三维位置信息、不用手动建模、无需下载任何软件和插件，具有成本低、便于用户交互、效率高、时间花费少的特点。

权利要求

1.一种基于opensfm和three.js的裂缝位置快速定位显示方法，其特征在于，具体包括如下步骤：

(1)选取具有裂缝的目标建筑物，围绕建筑物全方位地拍摄目标建筑物的图片；找到建筑物上有裂缝的位置，每处裂缝需要拍摄多张图片，并在多张图片中选择一张清晰的能显示该处完整裂缝的图片来代表此处裂缝，称为代表性图片；

(2)将获取的图片导入opensfm库中进行三维重建，得到目标建筑物的稠密点云ply格式文件和opensfm自动生成的reconstruction.meshed.json文件；

(3)将步骤(2)中得到的稠密点云ply格式文件转为稠密点云json格式文件；

(4)改写opensfm自带的html文件，利用three.js实现三维渲染，包括如下子步骤：(4.1)在opensfm自带的html文件中添加步骤(3)得到的稠密点云json格式文件的输入框代码，并添加显示该点云的代码；

(4.2)在html文件的body模块中编写裂缝个数数量的切换图片按钮代码，将步骤(1)中的代表性图片与按钮一一关联，实现点击按钮，浏览器上只显示与按钮关联的裂缝的代表性图片的功能；

(4.3)在html文件的script模块中根据重建目标建筑物的模型大小设置浏览器视角初始参数；

(4.4)在html文件的script模块中添加鼠标点击按钮实现切换裂缝图片的代码，并与body模块中的切换图片按钮代码进行关联；

(4.5)在html文件的script模块中编写点击图片实现浏览器自动偏转模型，呈现裂缝位置，并高亮该处相机点功能的代码，同时代码通过three.js在浏览器中渲染；

(5)用浏览器打开步骤(4)改写后的html文件，选取步骤(3)得到的稠密点云json格式文件和步骤(2)中的reconstruction.meshed.json文件进行导入，实现基于opensfm和three.js的裂缝位置快速定位。

2.根据权利要求1所述的一种基于opensfm和three.js的裂缝位置快速定位显示方法，其特征在于，步骤(4.2)中，所有按钮在网页左上角全部显示。

3.根据权利要求1所述的一种基于opensfm和three.js的裂缝位置快速定位显示方法，其特征在于，步骤(4.2)中，在html文件的style模块中添加显示在浏览器上的裂缝图片样式、按钮样式和字体样式。

4.根据权利要求1所述的一种基于opensfm和three.js的裂缝位置快速定位显示方法，其特征在于，步骤(4)中，在html文件的script模块中编写鼠标悬停在裂缝图片上显示裂缝信息的代码，并在代码中输入每张裂缝图片的裂缝类别、裂缝测得时间。

5.根据权利要求1所述的一种基于opensfm和three.js的裂缝位置快速定位显示方法，其特征在于，步骤(4)中，在html文件的script模块中编写加载步骤(3)中稠密点云json格式文件的代码，使得稠密点云json格式文件可以在浏览器上清晰显示建筑物模型，并编写代码使得鼠标可以控制模型的显示大小、移动以及旋转，同时代码能通过three.js在浏览器中成功渲染。

说明书

一种基于opensfm和three.js的裂缝位置快速定位显示方法

技术领域

[0001] 本发明涉及结构监测领域和计算机前端开发领域，尤其涉及一种基于opensfm和three.js的裂缝位置快速定位显示方法。

背景技术

[0002] 在生活中，许多建筑物都是由钢筋混凝土这种材料构成。钢筋混凝土材料在施工或者使用的过程中经常会出现裂缝，裂缝的存在一来影响美观，二来可能会影响结构的承
载能力。加上住宅建筑的商品化概念的日益深入，人们对建筑行业有了更高的要求，在有裂
缝的房间生活或者工作，会引起人们的强烈不适；随着钢筋混凝土建筑服役时间的增加，许
多构件会老化呈现裂缝，甚至出现影响结构承载能力的裂缝；在施工过程中出现裂缝，也需
要对其进行妥善地处理。所以说，对裂缝进行判别及修复是具有社会意义和工程意义的一
项技术。在裂缝修复领域，国内和国际已有相对成熟的技术，但在裂缝检测后如何高效传递
裂缝信息依然是一项空白。越快地对裂缝进行修复，造成的损失就会尽可能地减少，所以如
何提高专家判断裂缝和修复裂缝效率就显得尤为重要。同时，现在存储裂缝信息的方式往
往通过书面或者建模的方式进行存储和传递，这显然不够便捷，而且效率低下。针对这种情
况，本发明提出一种基于opensfm和three.js的裂缝位置快速定位显示方法。该方法可以方
便用户通过浏览器知晓裂缝信息、快速定位裂缝位置，同时不需要下载任何软件和其他插
件，也能为下一次实地考察裂缝节约时间。本发明的裂缝位置快速显示方法具有不用手动
建模、无需下载任何软件和插件、成本低、便于用户交互、效率高、时间花费少的特点。

发明内容

[0003] 针对现有技术存在的问题，本发明提供了一种基于opensfm和three.js的裂缝位置快速定位显示方法。

[0004] 本发明的目的是通过以下技术方案来实现的：一种基于opensfm和three.js的裂缝位置快速定位显示方法，具体包括如下步骤：

[0005] (1)选取具有裂缝的目标建筑物，围绕建筑物全方位地拍摄目标建筑物的图片；找到建筑物上有裂缝的位置，每处裂缝需要拍摄多张图片，并在多张图片中选择一张清晰的
能显示该处完整裂缝的图片来代表此处裂缝，称为代表性图片；

[0006] (2)将获取的图片导入opensfm库中进行三维重建，得到目标建筑物的稠密点云ply格式文件和opensfm自动生成的reconstruction.meshed.json文件；

[0007] (3)将步骤(2)中得到的稠密点云ply格式文件转为稠密点云json格式文件；

[0008] (4)改写opensfm自带的html文件，利用three.js实现三维渲染，包括如下子步骤：

[0009] (4.1)在opensfm自带的html文件中添加步骤(3)得到的稠密点云json格式文件的输入框代码，并添加显示该点云的代码；

[0010] (4.2)在html文件的body模块中编写裂缝个数数量的切换图片按钮代码，将步骤(1)中的代表性图片与按钮一一关联，实现点击按钮，浏览器上只显示与按钮关联的裂缝的
代表性图片的功能；

[0011] (4.3)在html文件的script模块中根据重建目标建筑物的模型大小设置浏览器视角初始参数；

[0012] (4.4)在html文件的script模块中添加鼠标点击按钮实现切换裂缝图片的代码，并与body模块中的切换图片按钮代码进行关联；

[0013] (4.5)在html文件的script模块中编写点击图片实现浏览器自动偏转模型，呈现裂缝位置，并高亮该处相机点功能的代码，同时代码通过three.js在浏览器中渲染；

[0014] (5)用浏览器打开步骤(4)改写后的html文件，选取步骤(3)得到的稠密点云json格式文件和步骤(2)中的reconstruction.meshed.json文件进行导入，实现基于opensfm和
three.js的裂缝位置快速定位。

[0015] 进一步地，步骤(4.2)中，所有按钮在网页左上角全部显示。

[0016] 进一步地，步骤(4.2)中，在html文件的style模块中添加显示在浏览器上的裂缝图片样式、按钮样式和字体样式。

[0017] 进一步地，步骤(4)中，在html文件的script模块中编写鼠标悬停在裂缝图片上显示裂缝信息的代码，并在代码中输入每张裂缝图片的裂缝类别、裂缝测得时间。

[0018] 进一步地，步骤(4)中，在html文件的script模块中编写加载步骤(3)中稠密点云json格式文件的代码，使得稠密点云json格式文件可以在浏览器上清晰显示建筑物模型，
并编写代码使得鼠标可以控制模型的显示大小、移动以及旋转，同时代码能通过three.js
在浏览器中成功渲染。

[0019] 与现有技术相比，本发明具有如下有益效果：

[0020] 第一，该方法仅需目标建筑物及其裂缝的二维图片，就可以实现计算机自动建模，用户可以看到目标建筑物清楚的点云模型；

[0021] 第二，本发明能清楚地显示裂缝信息、裂缝图片和相机位置，同时还让用户可以身临其境地浏览目标建筑物；

[0022] 第三，用户鼠标点击裂缝图片便可以让模型自动偏转，直接呈现给用户裂缝在模型上的大致位置，不需要人为拖动鼠标进行低效率地查找，同时在浏览器上高亮拍摄裂缝
的相机位置；

[0023] 第四，本发明实现上述功能的文件只需要一个浏览器就能运行，不需要下载其他软件和插件。

[0024] 本发明方法可以极大地提高裂缝维护整个过程中建模、定位裂缝、存储裂缝信息的效率，便捷且美观，也能为下一次实地考察裂缝节约时间。本发明的裂缝位置快速显示方
法具有不用手动建模、无需下载任何软件和插件、成本低、便于用户交互、效率高、时间花费
少的特点。

附图说明

[0025] 图1是本发明提供的基于opensfm和three.js的裂缝位置快速定位显示方法流程图；

[0026] 图2是本发明提供的图1中改写并添加代码得到新的html文件这一步的详细流程图；

[0027] 图3是本发明提供的点击裂缝图片按钮实现模型自动偏转并高亮相机的代码内容；

[0028] 图4是本发明提供的浏览器大致显示界面。

具体实施方式

[0029] 为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。

[0030] 如图1为本发明基于opensfm和three.js的裂缝位置快速定位显示方法流程图，具体包括如下步骤：

[0031] (1)选取具有明显裂缝的目标建筑物，通过无人机在其各方向、高度、角度拍摄清晰的图片，同时拍摄建筑物上的裂缝图片，然后人工挑选未失真的图片并选择特征点明显
的图片，去除背景杂物过多的图片；

[0032] (2)将步骤(1)得到的图片放入同一个文件夹中，并重命名为images；编辑opensfm自带的config.yaml文件，在yaml文件中设置合适的特征匹配方式(opensfm自带AKAZE、
SURF、SIFT、HAHOG、ORB特征匹配方式)、相机路径相关参数和线程数等；再将images文件夹
和设置好的yaml文件再归入到一个文件中，运行opensfm自带的程序，得到稠密点云文件
merged.ply和稀疏点云数据文件reconstruction.meshed.json；

[0033] (3)用python编写ply格式转json格式的程序，将步骤(2)中得到的merged.ply格式文件导入该程序，得到稠密点云文件merged.json；

[0034] (4)如图2为改写html文件这一步的详细流程图，html文件由head模块和body模块构成，head模块包含title和style，其中tilte用于为网页取名，style用于设置图片、按钮
和字体的样式；body模块包含网页上显示的内容和script模块，script里编写实现复杂操
作的函数；通过改写opensfm自带的html文件，再用three.js实现三维渲染，包括如下子步
骤：

[0035] (4.1)在html文件的body模块中编写导入稠密点云merged.json文件按钮的代码，添加悬停图片显示裂缝信息列表的代码，添加切换裂缝图片按钮的代码，并在style模块中
添加浏览器上显示的裂缝图片样式、按钮样式和字体样式；

[0036] (4.2)在html文件的script模块中根据重建目标建筑物模型大小设置适宜的浏览器视角参数、鼠标控制移动速率和其他重要的初始参数；

[0037] (4.3)在html文件的script模块中添加鼠标点击按钮实现切换裂缝图片的代码，并与body模块中的切换裂缝图片按钮代码进行关联；

[0038] (4.4)如图3所示，在html文件的script模块中添加点击裂缝图片按钮实现模型自动偏转并高亮相机的代码，代码中包含setMovingMode函数、setImagePlaneCamera函数、
navigateToShot函数、两个setTimeout函数，其中setMovingMode函数、
setImagePlaneCamera函数和navigateToShot函数是opensfm库里html文件自带的函数；
setMovingMode函数将视角转换到walk模式，setImagePlaneCamera函数和navigateToShot
函数将视角锁定到裂缝位置，第一个setTimeout函数将视角拉远，第二个setTimeout函数
退出walk模式进入orbit模式，在拉远视角的同时高亮裂缝对应的白色相机框，setTimeout
函数可以设置该函数何时运行的时间；代码再与body模块中的裂缝图片定位按钮代码进行
关联，同时编写的代码能通过three.js在浏览器中成功渲染；

[0039] 其中，walk模式是opensfm中html自带的浏览模式；orbit模式是opensfm中html自带的远景模式；

[0040] (5)用浏览器打开步骤(4)的html文件，浏览器界面显示出上下两个按钮，点击上面按钮选择步骤(3)得到的稠密点云merged.json文件，实现该json文件的导入；点击下面
按钮选择步骤(2)中得到的reconstruction.meshed.json文件即呈现如图4所示的界面，基
于opensfm和three.js的裂缝位置快速定位显示方法也成功实现。

[0041] 实施例

[0042] (1)选取浙江大学紫金港校区的月牙楼作为目标建筑物，选用大疆公司的MRTK300型号作为拍摄工具；在目标建筑物多个方向、高度、角度拍摄清晰的图片，并保证相邻图片
间具有70％以上的重叠率；月牙楼正面的水泥板上存在不影响结构承载能力的裂缝，选取
10条明显的裂缝由远及近地进行拍摄；人工挑选未失真的图片并选择特征点明显的图片，
去除背景杂物过多和重叠率过高的图片，最终得到360张有效图片；

[0043] (2)将步骤(1)得到的图片放入同一个文件夹中，并重命名为images；创建config.yaml文件，在yaml文件中设置HAHOG特征匹配方式、特征处理尺寸为1024和线程数
为8等；再将images文件夹和设置好的yaml文件再归入到一个文件中，运行opensfm自带的
程序，得到稠密点云文件merged.ply和稀疏点云数据文件reconstruction.meshed.json；

[0044] (3)用python编写ply格式转json格式的代码，将步骤(2)中得到的merged.ply格式文件导入代码中，得到稠密点云文件merged.json；

[0045] (4)改写html文件，再用three.js实现三维渲染，包括如下子步骤：

[0046] (4.1)在html文件的body模块中编写导入稠密点云merged.json文件按钮的代码，添加悬停图片显示裂缝信息列表的代码；裂缝信息需要人工提前写入，裂缝1信息写入“弯
曲裂缝”和“该裂缝在2020年10月1日测得，属于无危害裂缝”，裂缝2信息写入“剪切裂缝”和
“该裂缝在2020年12月1日测得，属于危害裂缝”，裂缝i信息写入对应的文字。添加切换裂缝
图片按钮的代码，并在style模块中添加浏览器上显示的裂缝图片样式、按钮样式和字体样
式；

[0047] 其中，i表示第几处裂缝；

[0048] (4.2)在html文件的script模块中根据重建建筑物模型大小设置适宜的浏览器视角参数、鼠标控制移动速率和其他重要的初始参数，浏览器相机位置的x,y,z坐标设置为
15；

[0049] (4.3)在html文件的script模块中添加鼠标点击按钮实现切换裂缝图片功能的代码，并与body模块中的切换图片按钮代码进行关联，实现点击crack1按钮可以得到裂缝1的
图片，点击crack2按钮可以得到裂缝2的图片，点击crackn按钮可以得到裂缝n的图片；

[0050] (4.4)在html文件的script模块中添加点击裂缝图片按钮实现模型自动偏转并高亮相机的代码,代码中主要包含setMovingMode函数、setImagePlaneCamera函数、
navigateToShot函数、两个setTimeout函数；在第一个setTimeout中设置时间为3秒，在第
二个setTimeout中设置时间为6s，并与body模块中的裂缝图片定位按钮代码进行关联；

[0051] (5)用浏览器打开步骤(4)的html文件，浏览器界面显示出上下两个输入文件框，点击上面输入框选择步骤(3)得到的稠密点云merged.json文件，实现该json文件的导入；
点击下面输入框选择步骤(2)中得到的reconstruction.meshed.json文件，实现该json文
件的导入；浏览器呈现实现功能的界面；点击左侧第二列的按钮，可以显示相应的裂缝图
片，点击左侧第一列的按钮可以自动改变模型方向，将浏览器视角聚焦到点云模型有裂缝
的位置，同时进入walk模式；经过3秒后，界面会自动缩放，使得用户可以看到裂缝在模型的
大致位置，再经过3秒后，界面会进入orbit模式，再次缩放并高亮裂缝对应的相机框，使得
用户可以看到裂缝在模型上的精确位置。

[0052] 将本发明的方法与现有技术中的方法进行比较，现有技术已经实现将点云文件放到浏览器中显示或者利用软件实现本发明的存储裂缝信息的功能，但本发明本发明的方法
使得浏览器可以显示建筑物模型、显示裂缝图片和裂缝信息、提供鼠标点击裂缝图片在模
型上自动定位裂缝位置的功能。本发明的拍摄、建模加修改代码只用了4个半小时，可以极
大提高时间效率。与之前的技术相比增添了新的功能，而且本发明不用手动建模、无需下载
任何软件和插件，具有成本低、便于用户交互、效率高、时间花费少的特点。

[0053] 以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所做的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。