基于Three.js的地下管线三维建模可视化研究
测绘与空间地理信息
GEOMATICS&SPATIALINFORMATIONTECHNOLOGY
Vol.41ꎬNo.8Aug.ꎬ2018
基于Three.js的地下管线三维建模可视化研究
陈 林
(武汉大学测绘学院ꎬ湖北武汉430079)
摘要:围绕地下管线的三维建模可视化技术进行分析探讨ꎬ针对其跨平台性的不足提出一种基于Three.js的三
维管线建模可视化方法ꎮ其主要思想是:将地下管线抽象成圆柱体ꎬ使用WebGL开源框架Three.js针对从后台获取到的二维管线矢量数据进行批量建模可视化ꎮ通过实验对研究方法进行了验证ꎬ在普通的浏览器渲染三维地下管线ꎬ摆脱了插件和本地应用程序的制约ꎬ实现了二维图形窗口与三维图形窗口在同一页面中的整合与交互ꎮ
关键词:Three.jsꎻ地下管线ꎻ建模可视化ꎻArcGISAPI
中图分类号:P209 文献标识码:A 文章编号:1672-5867(2018)08-0093-04
ResearchonVisualizationof3DModelingofUnderground
PipelinesBasedonThree.js
(SchoolofGeodesyandGeomaticsꎬWuhanUniversityꎬWuhan430079ꎬChina)
Abstract:The3dautomaticmodelingvisualizationofundergroundpipelineisanalyzedanddiscussedꎬandtoavoidshortagesofcross ̄ingplatformthispaperproposesathree-dimensionautomatedmodelingmethodofundergroundpipelinebasedonThree.js.Themaini ̄experiment.Renderingthree-dimensionalundergroundpipelineintheordinarybrowserꎬwhichcangetridoftheplug-inandlocalap ̄interactiveinthesamepage.
Keywords:Three.jsꎻundergroundpipelineꎻautomatedmodelingꎻArcGISAPI
deais:TheundergroundpipesareabstractedintocylindersꎬusingWebGLopensourceframeworkThree.jstoexecuteautomatedbatchmodelingvisualizationfortwo-dimensionalpipelinevectordataobtainedfromthebackground.Theresearchmethodwasvalidatedbyplicationconstraints.Theexperimentenablestwo-dimensionalgraphicwindowandthree-dimensionalgraphicwindowtointegrateand
CHENLin
0 引 言
城市地下管网由错综复杂的燃气、给水、热力、通信等类型管线组成ꎬ是城市基础设施的重要组成部分ꎬ被称为城市的“生命线”[1]ꎮ城市地下管网三维建模技术是利用GIS技术对城市地下管网进行有效管理的基础ꎬ也是构建城市地下管网三维GIS的基础ꎬ具有重要的实际作用ꎮ
国内学者关于三维管线建模的技术研究多借助于目前流行的组件式开发技术ꎬ将建模所需的数学算法封装到函数库中ꎬ并设计对应的接口ꎬ建模时调用相关接口就可以方便地实现复杂的三维建模过程ꎮ如利用CityMak ̄er[2]、Skyline[3]、EV-Globe[4]等三维空间信息平台ꎮ
收稿日期:2017-07-11
基金项目:清华大学合肥公共安全研究院开放基金(201506)资助
采用平台组件所建三维管线模型三维直观性强ꎬ但其不足之处在于以插件的方式与浏览器进行集成ꎬ难以进行跨平台的应用ꎮWebGL(WebGraphicsLibrary)这一开放的跨平台Web3D图形绘制标准允许把JavaScript和OpenGLES2.0结合在一起ꎬ可以为HTML5Canvas提供硬件3D加速渲染ꎬ这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型ꎮ采用JavaScript开发一组3D工具包可以体现WebGL的优计算机图形应用程序的WebGL开源框架ꎮ它用简单、直观的方法封装了WebGL常用的三维对象ꎬ由于采用了JavaScript语言ꎬThree.js能很容易地与其他浏览器组件进势[5]ꎬThree.js是一个轻量级的用于在浏览器中创建3D
作者简介:陈 林(1992-)ꎬ女ꎬ江苏盐城人ꎬ硕士ꎬ2018年毕业于武汉大学大地测量学与测量工程专业ꎬ主要从事三维WebGIS开发
工作ꎮ
94
行交互[6]ꎮ
测绘与空间地理信息
2018年
1.2 管线建模参数计算
根据以上管线建模原理ꎬ建模时首先需要确定建模时所必须的参数ꎮ根据已知的二维管线图层ꎬ可以批量提取图层中每条管线的起始点ꎬ并提取属性信息中的深度属性值ꎬ得到建模时所需要的三维点坐标ꎮ除此之外ꎬ还需要确定建模时所需的管径大小、管线段位置坐标以及管线的长度值ꎬ具体的计算方法如下:
1)三维管线起点、终点位置
每条二维管线都包含起点坐标(x1ꎬy1)和终点坐标
因此本文决定在传统WebGIS的基础上ꎬ借助于
WebGL开源框架Three.jsꎬ创建城市地下管线三维场景ꎬ实现二维图形窗口与三维图形窗口在同一页面中的整合与交互ꎮ用户可以能够脱离插件和本地应用程序ꎬ通过网页流畅地查看地下管线的三维空间分布ꎮ
1 三维管线建模方法
1.1 管线建模原理
本文采用Three.js提供的THREE.CylinderGeometry()对象建立地下管线三维模型ꎬ该方法是将三维管线简化为圆柱体来处理ꎮ具体方法为:将直管抽象为正圆柱体ꎬ管线中心线抽象为正圆柱体的中轴线ꎬ管线中心线起止点抽象为正圆柱体上下底面圆圆心ꎬ圆柱体半径为管径ꎮ具体模型如图1所示ꎮ
(x2ꎬy2)信息ꎬ在此基础上将管线图层中的“起点管线埋深”和“终点管线埋深”属性值分别作为起始点和终止点的深度值ꎬ然后借助Three.js中THREE.Vector3()对象创建三维管线的起点p1和终点p2ꎮ需要注意的是ꎬ由于Three.js中的坐标系是右手笛卡儿坐标系ꎬ因此在确定三维点坐标时ꎬ把获取的深度值属性作为三维点的y坐标值ꎮ
2)管径、管线段位置
管线的管径值按照与实际管线的缩放比例来确定ꎮ
管线段在三维场景中的相对位置是由二维管线的起点P1用步骤1)确定的三维点坐标进行运算ꎬ求得中点坐标ꎮ
和终点P2求得的中点P0来确定ꎬ如图2所示ꎬ计算时使
图1 直管三维建模构造图
Fig.1 Structuremapofmodeling3Dstraightpipeline
基于以上的建模原理ꎬ利用Three.js提供的THREE.CylinderGeometry()对象对地下管线进行批量建模ꎮ利用THREE.CylinderGeometry()对象进行圆柱体建模时可接收多个参数ꎬ而在实际建模过程中主要用到三个参数ꎬ分别是:顶面半径(radiusTop)、底面半径(radiusBottom)以及圆柱体的高度(height)ꎬ分别对应三维管线的半径以及管线长度ꎮ生成管线模型的几何对象之后ꎬ还需使用THREE.Material为其贴上合适的纹理ꎬ通过THREE.Mesh(geometryꎬmaterial)生成完整的管线段模型ꎮ
Length=
图2 三维管线空间位置关系图Fig.2 Spatialpositiondiagramof3Dpipeline
3)管线长度
管线长度即起点和终点之间的空间距离ꎬ如图2所
示ꎬ具体计算公式如下ꎮ式中ꎬ每个位置点的X属性表示该点的X坐标值ꎻY属性表示该点的Y坐标值ꎻDepth属性表示该点的深度值ꎮ
(1)
以上计算得到的建模参数与利用Three.js建模时涉及到的参数对应关系如图3所示ꎮ
(P2.X-P1.X)2+(P2.Y-P1.Y)2+(P2.Depth-P1.Depth)22 三维管线可视化
2.1 管线建模数据结构
本文使用的实验数据为昆明市某小区排水雨水地下管线数据ꎬ包括管点层数据和管线层数据ꎮ管线层按照数据类型、系统自编号、起点编码、起点坐标、起点埋深、终点编码、终点坐标、终点埋深、管径来标识其三维管线实体自动生成的基本条件ꎮ断面尺寸标识管线是方形管
图3 建模参数关系图
Fig.3 Relationdiagramofmodelingparameter
还是圆形管ꎮ各类管线层的物理结构统一ꎬ具体结构见表1ꎮ按照上一节提到的参数计算方法分别提取二维管
第8期
陈 林:基于Three.js的地下管线三维建模可视化研究
95
线图层中每条管线的起点和终点坐标信息之后ꎬ附加深度属性信息即可得到三维点坐标ꎮ再将得到的三维点坐标进行计算ꎬ得到三维建模所需要的坐标信息ꎮ
表1 管线层结构
Tab.1 Structureofpipelinelayer
字段名字段含义字段类型ObjectIDShape
数据类型
Geometry
S_EXP系统自编号S_X起点编码OBJECTIDTEXTS_DEEPS_Y起点坐标起点坐标X值DOUBLEE_EXP起点管线埋深Y值DOUBLEE_X终点编码DOUBLEDOUBLETEXTE_DEEPE_Y
终点坐标终点坐标XY值值DOUBLEPSIZE
管径或断面尺寸终点管线埋深
ꎬ单位m
DOUBLETEXT管点层存储管线的全部特征点、普通点、物探点及附属物等ꎮ利用管点类型字段来标识具体的类别ꎬ例如三通、四通、多通、转折点、弯头、变深、变径、井边点、预留口、阀门、进出房点等ꎮ其具体结构见表2ꎮ为了三维显示的精细化ꎬ管点层使用了附加精细化的3dsMax建模软件制作的三维模型ꎬ经格式转换之后得到.obj格式的模型文件ꎬ利用Three.js框架中THREE.OBJLoader()加载器将外部模型加载到网页中ꎬ并贴上相应纹理ꎮ
表2 管点层结构
Tab.2 Structureofpipepointlayer
字段名字段含义字段类型ObjectIDShape
系统自编号数据类型
Geometry
EXP_NO
X管点编号OBJECTIDTEXTHIGH
YXY坐标坐标ꎬꎬ单位单位m地面高程ꎬ单位mDOUBLEmDOUBLEDOUBLE2.2 管线建模流程
本文具体建模可视化思路是结合开源框架Three.js技术与ArcGISAPIforJavaScript技术进行三维管线建模可视化维管线数据经由1)ꎬ数据获取主要步骤如下:
JavaScriptArcGISꎮ将在ServerArcMap发布中已经处理编辑好的二
ꎬ通过ArcGISAPIfor
添加动态地图图层组件进行ꎮWebGIS与此同时将三维场景进行初始化开发ꎮ初始化二维地图容器、ꎬ添加三维场景中所必需的光线light、相机camera等对象以及渲染图形所必需的渲染器域之2)后ꎬ选择范围利用ArcGISꎮ在浏览器中框选要创建三维管网的区
WebGLRenderer对象ꎮ
APIforJavaScript空间查询接口
IdentifyTaskIdentifyTask目标来查询其对应的图形和属性信息实现图形查询属性获取二维管线空ꎬ通过在屏幕上选取地物间属性信息ꎮ使用ꎻIdentifyParameters
对象固定了用于查询的一些参数ꎬ其中ꎬgeometry属性指定了用哪个几何对象进行空间关系分析ꎻlayerIds属性规定了对哪些图层进行空间查询ꎻtolerence属性指定了空间关系分析时的冗余回IdentifyResult3)空间查询数组ꎮꎮ
IdentifyTaskꎮ其中IdentifyResult执行空间查询完毕后类的featureꎬ返属性表示查询得到的地理特征ꎬ其类型是Graphicꎬ即图形对象ꎮ该对象包含了geometry和attributes两个属性ꎬ即几何和属性信息ꎮ从几何信息中提取三维管线建模所需的坐标信息ꎬ从属性信息中提取建模所需的埋深以及管径信息ꎮ
利用4)Three.js建模可视化框架的ꎮTHREE.CylinderGeometry()提取管线的空间和属性信息之后对象对地
ꎬ
下管线进行参数化建模绘制()ꎬ三维管线的位置为管线的起止点确定的中点位置决定一起构成网格曲面THREE.与材质元素Mesh(geometryꎬmaterial)ꎮTHREE.Material
ꎮ在已经初始化的地下管线三维场景中加入管线模型器和5)requestAnimationFrame(三维渲染ꎮ利用THREE.)方法进行循环渲染三维管WebGLRenderer()ꎮ
渲染
线和管点模型ꎮ
以上建模步骤的具体流程如图4所示ꎮ
图4 三维管线可视化流程图Fig.4 3Dpipelinevisualizationflowchart
2.3 管线建模可视化
在初始化二维场景之后ꎬ在浏览器中的二维管线管点图如图5(a)所示ꎮ点击绘制按钮在左侧二维地图中框选要创建三维管网的区域ꎬ右侧的三维容器中就会显示出当前框选管网的三维地下管线模型ꎬ如图5(b)所示ꎮ
图5 三维管线自动生成图
Fig.5 Automaticgenerationof3Dpipelines
96
测绘与空间地理信息
2018年
图5(a)为框选的二维管网范围ꎬ图5(b)图是生成的相应范围的三维管网ꎬ其中管线的纹理用的是THREE.LambertMaterial()类型(该材质平坦的磨光效果可以用于砖或混凝土表面)ꎮ观察图5(b)管网的三维模型ꎬ图中管点模型仅添加了阀门这一类型的管件ꎬ其他类型管点以及连接件有待后续利用第三方专业建模软件精细化建模ꎮ
固定三维场景的观察视角ꎬ通过旋转控制器转换三维场景观察视角ꎬ如图6所示ꎮ可以更为直观地看清地下管线的空间位置关系ꎬ对于地下管线的埋设布局具有更加直观的认识ꎮ
关系明确等优势ꎮ本文重点研究了在传统网页中嵌入三维GIS模块ꎬ在网页中对地下管网中管点和管线进行三维建模可视化ꎮ采用WebGL开源框架Three.js创建三维管网场景ꎬ直接使用显卡的计算资源来创建三维计算机图形ꎬ实现了在浏览器端根据二维管线数据实时构建三维管网模型ꎬ脱离了插件和本地应用程序ꎬ并且三维体验流畅ꎬ为构建三维WebGIS提供了技术支撑ꎮ
参考文献:
[1] 丁鹏辉ꎬ李志刚ꎬ董绍环ꎬ等.城市地下管线信息系统关[2] 李浩.基于CityMaker的三维地下管线地理信息系统建[3] 周艳.基于Skyline的三维地下管网的研究[D].淮南:安[4] 唐超ꎬ李珂.基于三维GIS的石油管线管理信息系统[J].[5] 王敏ꎬ张昆.基于THREE.JS和GoogleMapAPI的网页交
互可视化技术———以等角航线为例[J].测绘与空间地理信息ꎬ2015ꎬ38(7):158-161.京:机械工业出版社ꎬ2015.
测绘与空间地理信息ꎬ2016ꎬ39(10):18-21.徽理工大学ꎬ2015.
设[J].城市勘测ꎬ2014(2):51-54.
键技术研究[J].测绘通报ꎬ2015(11):92-95.
图6 三维管网视角变换图
Fig.6 Three-dimensionalnetworkview
transformationmap
[6] [美]JosDirksen.Three.js开发指南[M].李鹏程ꎬ译.北[7] 毕天平ꎬ孙立双ꎬ钱施光.城市地下管网三维整体自动建
模方法[J].地下空间与工程学报ꎬ2013(9):1473-1476.
3 结束语
三维可视化表达方式具有表现力强、效果逼真、空间
[编辑:任亚茹]
(上接第92页)
算研究区地表覆盖度ꎬ详细分析了1995—2016年攀枝花煤矿集中区地表覆被变化及其环境影响ꎬ主要结论如下:(1)整体上ꎬ攀枝花煤矿集中区地表覆被度逐渐增高ꎬ地表覆被情况越来越好ꎻ研究时段内各年份植被NDVI均值呈波动上升趋势ꎬ多年平均NDVI值为0.40ꎮ这与攀枝花市近年来重视矿山生态环境恢复和大力打造绿色旅游密切相关ꎮ(2)近20年攀枝花煤矿集中区南部及西部地区46.87%ꎮ多年NDVI的值域范围在-0.35—0.80之间ꎬ研究区南部及西南部山区NDVI值高ꎬ北部及中部地区NDVI值偏低ꎮ近20年地表覆盖度和多年NDVI均值空间分布特征具有较高一致性ꎬ表明人类强烈的开采活动和区域地势共同影响该区地表覆被及NDVI值ꎮ(3)1995—2016年攀枝花煤矿集中区NDVI总体趋势变化范围在的区域在研究西北部和东北部地区ꎬ中部地区由于煤矿开采而形成的裸地区域和北部金沙江及其沿岸地带的NDVI趋势变化最小ꎬ海拔相对较高的西北部和南部山区由于地表多植被覆盖其NDVI趋势变化不明显ꎮ整体上ꎬ攀枝花煤矿集中区生态环境逐年好转ꎬ研究区环境整治和经济转型发展取得较好成果ꎮ
-0.24—0.20之间ꎬ平均趋势变化为0.053ꎮ趋势变化显著地表覆盖度高ꎬ北部地表覆盖度低ꎬ多年地表覆被均值为
参考文献:
[1] 侯莉琴ꎬ张锦.基于TVDI的沁水煤田地表土壤水分时
空演变分析[J].水土保持研究ꎬ2017ꎬ24(3):177-182.
[2] 马丽ꎬ李宇ꎬ金凤君.我国主要煤炭基地的生态脆弱性
评价与类型分析[J].能源环境保护ꎬ2009ꎬ23(4):56-60.
[3] 廖雪琴ꎬ李巍ꎬ侯锦湘.生态脆弱性评价在矿区规划环
评中的应用研究———以阜新矿区为例[J].中国环境科学ꎬ2013ꎬ33(10):1891-1896.
[4] 李凯ꎬ孙悦迪ꎬ江宝骅ꎬ等.基于像元二分法的白龙江
流域植被覆盖度与滑坡时空格局分析[J].兰州大学学报(自科版)ꎬ2014ꎬ50(3):376-382.
[5] 陆彦俊ꎬ陈亮ꎬ尚慧.遥感技术在惠农采煤沉陷区矿山
生态环境监测中的应用[J].宁夏农林科技ꎬ2012ꎬ53(12):212-215.
[6] 佟斯琴ꎬ包玉海ꎬ张巧凤ꎬ等.基于像元二分法和强度
分析方法的内蒙古植被覆盖度时空变化规律分析[J].生态环境学报ꎬ2016ꎬ25(5):737-743.
[7] 刘英ꎬ侯恩科ꎬ岳辉.基于MODIS的神东矿区植被动
态监测与趋势分析[J].国土资源遥感ꎬ2017ꎬ29(2):132-137.
(下转第107页)
因篇幅问题不能全部显示,请点此查看更多更全内容