天天看點

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

3D管線、智慧樓宇、物聯網3D、物業3D監控、物業基礎設施可視化運維、三維智慧燈杆、3D燈杆、3D定位、三維室内定位、3d建築,3d消防,消防演習模拟,3d庫房,webGL,threejs,3d機房,bim管理系統

寫在前面的話:

        說點啥好呢?就講講前兩天的小故事吧,讓我确實好好檢討了一下。

  前兩天跟朋友一次技術對話,對方問了一下Geometry與BufferGeometry的具體不同,我一下子腦袋短路,沒點到重點定義,被朋友嘲笑一番,虧還搞了three.js 這麼久,這麼簡單的基礎知識盡然不能對答如流,原來都是假把式。着實尴尬至極,尴尬至極....

  朋友間的調侃,本是玩笑,但認真思考,不無道理。正所謂溫故而知新,也是我們程式員的必須課程,不僅僅是學習利用新技術,對自己常用的老技術也要時長翻看一下,加強記憶,加深了解。

  後來我還真好好的整理總結了一下Geometry與BufferGeometry,查漏補缺,也算為時未晚也。

  一句話,這兩個對象的主要差別:主要在資料結構上,BufferGeometry非常高效,主要是因為資料直接放在一個連續的GPU記憶體空間中,有效減少向 GPU 傳輸上述資料所需的開銷,而three.js後期版本中的geometry最終都轉化為bufferGeometry,但始終是比bufferGeomerty多了一步,而且還是從CPU的geometry對象傳輸到GPU的bufferGeometry對象的一個誇硬體傳遞過程,是以後期也不建議用geometry了。

序:

在三維機房管理系統中,我們已經可以看到很多實作3d機房的可視化管理方案,常見的功能有動力環境管理、安防監控、資産管理與運維,包括我的前面的文章也有過正常3D機房方案的介紹,可以看我前面的文章(使用webgl(three.js)建立科技版3D機房,3D機房微子產品詳細介紹(更新版三)—— 1)。

再很多3D機房方案中,管線管理.一直是無法切實解決的痛點。主要原因有如下幾個:

1、種類繁雜,機房管線線路繁雜,光是線路類型就包括了強電,弱電走線、光纖網線、消防管線、甚至包括國防線(政策上是規避展示的)

2、施工圖紙整理繁雜,涉及到各種類型的線路,施工圖都來源一大堆,着實無法入手

3、模組化工作量大,線路的模組化,是最繁雜的,除了線路多,走勢還錯綜複雜

那麼針對上面的痛點,我們又該如何解決。

首先是素材來源問題,記得高中學過,唯物主義辨證方法論的思想,牽牛我們要牽牛鼻子,既然線路繁雜,何不挑重點先解決,資料中心這個行業,管線最關心的還是光纖網絡線路,而且是隻正對資料伺服器的網絡線路,其它什麼強電弱電,甚至是機房内部的動環系統傳感器走線,都不是那麼重要。是以我們先提出主要沖突。重點解決機房資料業務的網絡走線即可。

然後是技術實作方面:

有三種方案選擇:

  1、全程模組化,通過模組化的方式實作走線展示,這雖然準确,但哪有那麼多的人力物力去模組化,還有模組化過程中,也不能確定沒有遺漏與錯搭。

  2、資料節點驅動:隻儲存每條線路的關鍵節點,使用代碼生成的線路方式。這很大程度上減少了工作量,但是整理的工作量也不小。

  3、邏輯線路:隻記住起點與經過的裝置節點以及終點,自動智能化生成線路。線路不按照實際走向,隻記錄描述線路上裝置的邏輯點位。

我們的解決方案是采用後面兩種,虛實結合。

好了 閑話少叙,歸入正題:

技術交流 [email protected]

交流微信:

    

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

如果你有什麼要交流的心得 可郵件我

一、定義:

管道:顧名思義,就知道是指放線纜的固定建築,有時候是鐵管道,有時候是水泥管道

井:每隔一段管道就會有一個便于施勞工員維護的井出現

線纜:通常情況下,是放在管道裡面的粗黑粗黑的電纜。

電路:是指線上纜裡面的一根一根的電線,通常一根電纜裡面有幾根或者十幾根電路

光纖:在電路裡面的光纖

二、效果與代碼實作:

 1、整體園區效果,我們還是采用深色科技藍風格(科技的主流風)。模型我們還是采用代碼建立的方式,樓宇标号采用精靈模型。這裡的井蓋采用黃色标亮,便于識别。

 全場景實作主要代碼如下:

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課
如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

View Code

2、顯示地下所有管道,實作方式也比較簡單,隻需要隐藏上方的建築與園區地面,把管道顯現出來即可。這裡可以看到一個園區漸變隐藏的效果。

代碼實作:

3、井下走線方式展現,可以檢視井下每條線路的資訊,便于運維人員運維檢視管理

主要代碼邏輯:

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課
如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

 4、輕按兩下管線,檢視管線内部光纖資訊,快速掌握光纖走向與狀态。

 5、展現所有線纜資訊,标注線纜,以及點選檢視線纜資訊。

這裡主要用精靈模型,精靈貼圖的方式。

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課
如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

6、輕按兩下線纜,檢視線纜内的光纖資料資訊。

 7、标注井深與管深。便于施工與土建規避。知道深度,能有效輔助運維人員下井準備,而且再土建施工時,能有效規避風險,不會有挖斷線纜情況發生。

 8、線纜檢索。能夠根據線纜屬性,快熟定位檢視線纜走勢與資訊。

 9、裝置檢索,端口檢索,能快速定位到具體裝置。檢視裝置資訊狀态,位置資訊等。

主要思路:

 10、電路檢索,線纜中包含很多電路,支援電路檢索,能快速定位相應的電路。

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

主要代碼:

由于篇幅過長,我們下節課較長的描述樓層内部以及機房内部的線路方案。

如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題(機房更新版)-第九課(一) 使用webgl(three.js)搭建3D智慧園區、3D大屏,3D樓宇,智慧燈杆三維展示,3D燈杆,web版3D,bim管理系統——第六課

其它相關文章:

使用webgl(three.js)建立3D機房,3D機房微子產品詳細介紹(更新版二)

如何用webgl(three.js)搭建一個3D庫房-第一課

如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課

使用webgl(three.js)搭建一個3D建築,3D消防模拟——第三課

使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課

如何用webgl(three.js)搭建不規則建築模型,客流量熱力圖模拟

 使用webgl(three.js)搭建一個3D智慧園區、3D建築,3D消防模拟,web版3D,bim管理系統——第四課(炫酷版一)

繼續閱讀