三维可视化 ##3D 开发
- WebGL 3D 技术框架 -ThingJS
- 三维管线根底数据收集
- 三维管线模型分类创立
- 三维管线可视化零碎开发
基于 ThingJS 的通用架构设计随着社会经济的一直倒退，城市中的各类公开管线数量一直减少，逐步形成了结构复杂的公开管网。
传统二维立体管线管理系统，对于公开管线应急事件的处理从来是一个痛点。进步应急处理现场的可视性，更直观地反映公开管网的空间散布状况，三维可视化技术可能很好解决这一问题。近年来，公开管线管理系统逐渐由传统 C / S 架构向 B / S 架构过渡，现阶段的监控治理对于简单场景的轻量化展现是一个次要趋势。
WebGL 3D 框架 -ThingJS
WebGL 是基于 OpenGL（凋谢图形库）协定在 Web 浏览器中进行 3D 渲染的 API，是一个基于纯 B / S 架构开发的技术。ThingJS 是基于 WebGL 的 3D 框架，【官网注册地址】用于制作基于场景的轻量化三维可视化对象；将公开管线场景在 Web 环境中进行重构渲染、着色化，通过 ThingJS 技术引擎开发三维动画和交互性能，实现了公开管线的漫游及模型的交互管制。
本文梳理了 ThingJS 的公开管线可视化利用构建办法，简略阐明这一实现过程。
三维管线可视化工作次要分为 根底数据收集、三维模型建设和三维管线零碎建设 三大部分。
1. 三维管线根底数据收集
三维建模根底数据次要包含矢量数据、影像数据及管线数据等相干数据。
1) 矢量数据：次要应用地形图及部分修测的带状地形图，确定各自的比例。
2) 影像数据：采纳了黑白卫星影像图，抉择最近的更新版本，其分辨率为 0.8m。
3) 管线数据：管线图及管线信息调查表。
本我的项目将城市公开管线分为给 水、排水、燃气、热力、工业、电力和电信管线 7 大类。各大类还能够细分，如给水管线包含工业给水、生存给水和消防给水管线；排水管线包含污水和雨水管线。管线的根本几何数据可演绎为管线端点、结合点、变径点与从属设施特色点，尔后统称为管点数据。
管线形态多为树枝状、环状或辐射状，每一条管线能够依据交叉点和变径点分解成若干条管线段，交叉点处模仿现实情况，以三通、四通、阀门或变径接头等从属设施相连接。管线段由相应管点数据连贯，组成一条不间断的管线段。因而，每一条管线能够形象为由管线段和从属设施组成。
2. 三维管线模型分类创立
联合具体城市地形，咱们将三维模型分为地形模型、路线模型和管线模型三大类。
1) 地形模型
地形模型次要是指示意地表起伏状态的三维模型。通过 3DSMAX 能够构建不规则三角格网(TIN)，并将等高线生成三维模型，最初与一一对应的正射影像数据叠加生成分块的地形模型。留神将三维模型细分成若干块，能够应答后期制作范畴不断扩大、数据不断更新的问题。
2) 路线模型
路线模型是指制作区域内所有等级公路及主次干道的模型。因为最终要将路线模型与管线模型进行叠加故对路线模型的精度要求较高。先按属性码筛选出等级公路及主次干道，并对同一路线进行关闭面解决，而后将数据导入 CityBuilder 间接进行转为面的操作，造成路线面的立体模型；再利用高程点对立体模型进行高度管制，造成路线的三维模型。
3) 管线模型
3DSMAX 中导入相应的管线 DWG 文件利用管道建模命令间接生成带管径的各类管线模型，最初按各类管线色彩要求创立的贴图，别离赋予不同类型的管线模型；而对于管点模型因为重覆度较高，且每一个独立的模型面数较多，咱们采纳了利用数据库的建模办法，这样既缩小了数据量，又在很大水平上进步了工作效率。
本我的项目建设了公开管线数据库，设计了管点、管段、官网层等数据结构。
3. 三维管线可视化开发案例
基于 B / S 架构设计公开管线三维管理系统，利用 ThingJS 搭建浏览器端的三维场景，在场景中加载三维管线模型，搭建渲染管线模型、地形模型、双向选择、鼠标拾取等根底性能；同时实现了用户的交互操作，包含模型加载、管线编辑、管线的查问与剖析、管线定位等交互性能。技术路线图如下：
当初还原一个小区水，电，天然气管线可视化，【官网注册地址】，在线查看 demo：
3D 演示 – 三维公开管线的可视化利用 ThingJS
第一步，利用 CampusBuilder 搭建模仿场景。CampusBuilder 的模型库有各种各样的模型，使咱们搭建出的场景更真切。应用 CampusBuilde 创立层级，之后再给层级加外立面就呈现了以后的成果。
第二步，初始化摄像机地位，增加四个按钮，并创立四个办法。
第三步，创立管线，水管线、电线、燃气管线同理。这里简略说一下 PolygonLine，它继承 THING.LineBase，同样有贴图属性，能够本人从本地上传图片至页面资源后应用。
这里用到了两个办法：
1）buildingOpacity(num)；
这个办法的次要作用就是为了将场景虚化，更好的展现咱们的管线。
2）renderOrder();
这个办法先在代码中正文掉了，看一下“糊了的”成果：
如果没有设置 renderOrder(); 属性的，管线的渲染层级没有 building 高，就会导致有被 building 遮蔽的 PolygonLine 无奈失常显示，设置 renderOrder(); 属性后，渲染成果失常。
所以这才是“正确显示”的成果：
最初一步，创立出电线以及燃气线，成果如下：
公开管网的管理水平是体现一个城市的倒退水平和现代化治理的重要标记之一。三维管线可视化零碎的建设便于相干职能部门精确地把握城市公开管线现状，有助于防止市政建设中路线的屡次开挖，大大降低了施工中公开设施的矛盾与事故隐患。
ThingJS 是一种轻量级前端利用 3D 框架，通过 WebGL 技术 API 接口，可实现跨终端跨平台的拜访，使得管理中心与内部挪动端可能交互合作，促成公开管线管理手段疾速倒退。