#三維可視化##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. 三維管線基礎數據收集

三維建模基礎數據主要包括矢量數據、影像數據及管線數據等相關數據。

矢量數據：主要使用地形圖及局部修測的帶狀地形圖，確定各自的比例。

影像數據：采用了彩色衛星影像圖，選擇最近的更新版本，其分辨率為0.8m。

管線數據：管線圖及管線信息調查表。

本項目將城市地下管線分為給水、排水、燃氣、熱力、工業、電力和電信管線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接口，可實現跨終端跨平臺的訪問，使得管理中心與外部移動端能夠交互協作，促進地下管線管理手段快速發展。

總結

以上是生活随笔為你收集整理的地下管线监控系统中互联网WebGL三维可视化构建技术 ThingJS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。