打造最美HTML5 3D機房（MONO哥強勢歸來，第四季驚豔發佈）

##前言

初次見面的朋友們你們好，簡單自我介紹一下：我是Mono哥，性別男，愛好。。。編程，自從一年多前入了HTML5和WebGL的坑，就再也沒有爬出來過，目前正在鑽研3D機房以及相關的3D應用。這篇文章是「打造最美3D機房」系列的第四季，感興趣的朋友能夠閱讀本系列的相關文章，如下是正確的閱讀順序：

無插件純Web 3D機房，HTML5+WebGL傾力打造

HTML5+WebGL打造的無插件純Web 3D機房（第二季）

HTML5 + WebGL打造的無插件純web 3D機房（第三季）

想看視頻的同窗，能夠直接戳優酷連接： http://v.youku.com/v_show/id_XMTY0MzA3NDc5Ng==.html

下面，進入正題。

##鷹眼

上次的小機房功能已經基本完成了，客戶對演示效果也很是滿意。因爲客戶使用過咱們以前作的2D系統，看到過鷹眼功能（也就是縮略圖），因此此次堅決果斷也要求3D機房監控界面增長鷹眼功能。這個把哥難了一陣子。

爲了尋找思路，哥首先打開了咱們以前作過的2D的拓撲圖，尋找靈感。鷹眼看上去是這樣子的：

上面的界面是同事給客戶作的虛擬機開通、配置的編輯界面，右下角的這塊試圖就是鷹眼縮略圖。諮詢同事，他說鷹眼在2D實現的時候，能夠考慮把2D大圖作一個內存縮略圖更新到鷹眼視圖，或在大圖發生任何屬性變化時候進行監聽，而後動態生成縮略圖更新鷹眼視圖。不過在3D裏面會有所不一樣：弄一個小尺寸的webgl的canvas實時刷新，應該負載也不大。因此決定再new一個network放在右下角試試：

var overview = new mono.Overview3D(network);
overview.adjustBounds(200,200);
var rootView = overview.getRootView();
network3d.getRootView().appendChild(rootView);

同時，還要把鏡頭固定到頭頂上方垂直向下看，並去掉鼠標的交互機制。通過一番折騰，終於把一個鷹眼畫布放在大的場景畫布的右下方，看看效果：

##設備編輯器

此次項目中聽說有200多種不一樣的設備，每一個設備面板都不同，要給每個設備建模，這不是純體力活嗎？就算丟給美工組作，也得耗費好多我的天呢，並且模型的複用性也不高。考慮再三，項目組緊急開發了設備面板的編輯器，很好地解決了這個問題。我試了一下，以作一個標準的機架設備爲例，仍是很快的：

編輯器裏面把常見的端口和麪板都作好了，拖拖拽拽、對齊吸附，放上logo，很快一個像模像樣的交換機就出來了，真是個良心產品！點擊按鈕導出json，能夠直接在項目裏面用了。固然，我這邊的用法是把設備繼續往機櫃上放。機架編輯器是我這裏開發的，效果差很少，能夠直接把設計好的設備拖放到機櫃的位置上：

接下來，再把機櫃往房間裏面拖，房間的形狀也要編輯的：

直接點擊3D按鈕能夠預覽一下：

對了，這裏要注意的是一排機櫃通常都會配置一個列頭櫃，專門控制電路等信息的，雙擊它會彈出一個電路配置界面：

聽說這個界面也有編輯器能夠直接拖拽生成，這樣就更方便了。

##更多場景

其實對於機櫃場景的編輯，模型稍做變化，就能夠應付其餘行業的應用。

###3D倉庫

例如把機櫃變成貨架，把服務器變成貨物，簡單拖拽，會是什麼場景呢？能夠想象一下。

###3D工廠

繼續想象，若是把機櫃變成生產加工車間的機牀，簡單拖拽、添加告警信息，又是怎麼樣一番景象呢？

###3D變電站

再好比，把場景裏面的模型換爲變電站裏面的變壓器、樓房、龍門架等，加上告警和交互，不就是一個戶外變電站監控的應用嗎？

###3D加油站

若是把模型換爲加油站，就是一個加油站SCADA和監控的應用：

###3D工控應用

固然若是跟硬件連上，就能夠作工業上各類檢測和控制了：

固然自動控制應用須要數據採集存儲轉發雲平臺組態系統等內容，等之後有機會單獨寫一篇和你們探討。

##管線

機房裏有不少物理的或邏輯的鏈路信息，例如網線、光纖，一些業務上的鏈接關係等。這些管線要顯示在機房中，就須要對管線進行建模、存儲、顯示。顯示的部分，我這裏作了簡單的空間自動路徑，尋找最合適的路線走向，並將A端和Z端設備以外的物體虛化，能夠把管線顯示的更清晰：

對於跨樓層的鏈路，也能夠清晰的呈現：

##會議室

根據客戶要求，會議室場景也應該建模。通過同事現場拍照考察，會議室結構並不複雜，因而依舊讓美工妹妹操刀，很快作完了會議室模型：

固然，這裏面的場景並非固定不變的，例如雙擊投影儀可讓他在投影幕布上播放視頻；雙擊門能夠打開，等等。這是由於咱們對這裏面的模型進行了分拆、動做定義。

例以下面牆上的電視屏幕，雙擊能夠顯示機房的統計信息圖。

繼續雙擊屏幕上的統計圖，能夠把2D的統計圖程序界面直接顯示出來，進行交互。

這也是使用HTML5的2D和3D技術的混合優點。

##園區

客戶要求機房所在的園區也要加到場景中，想想也合理。項目大了後，機房會分佈在好幾個樓宇的不一樣樓層，要查看必須有一個3D全景場景進去才方便。這個難度卻是不大，找美工妹子幫忙。妹子比開發商還快，用了幾個小時，一個全新樓盤便在3D Max中誕生了。轉obj，導入系統，急忙打開瀏覽器看效果：

這裏的一個經驗是，若是要作到雙擊大樓可以進去，就要把大樓拆成單獨的模型進行加載、監聽事件。

##地球

問題又來了。客戶說北京上海全國各地有多處機房，須要統一顯示和管理。看來園區已經不夠用了，須要一個全國地圖。若是過幾天客戶說美國還有一個機房怎麼辦？乾脆直接整個地球顯示吧，一步到位。等客戶要求火星有機房的時候再說吧。

弄一個地球用3D太簡單方便了，貼圖加光暈，分分鐘出來：

接下來把中國的區域高亮出來，突出我國的地位。這個作法是準備一個透明的中國地圖輪廓，以下圖：

而後把地圖做爲貼圖疊加在地球上，調整位置：

接下來作幾個數據中心的節點。用一個小小的球就能夠吧！

爲了防止看上去枯燥，把數據中心的連線用流動動畫顯示，每一個數據中心用一個發光的圖片動畫作成旋轉發光效果，看上去就生動多了。

固然咱們項目裏最後作成的效果是這樣的：

有沒有瞬間高大上的感受？這還不算完，另一個同事把個人代碼拿過去，又增長了一些亂七八糟的效果，變成了這樣：

主要是增長了一些地理位置的熱點，環繞地球的衛星，以及一些彈道導彈的攻擊動畫效果。聽說某國防單位須要這樣的顯示方法，具體咱就不瞭解啦，總之有點科幻感了。

說到彈道攻擊效果，想起項目中另一個網絡攻擊的顯示界面，也頗有意思，雖然是2D的，可是也有不錯的動畫效果：

這裏面的爆炸效果、彈道效果，都用了HTML5的canvas裏面2D的一些API繪製，例如模糊、漸變等。綜合利用2D+3D來呈現網絡攻擊，仍是很是直觀的。還能夠把網絡攻擊的應對流程經過3D化的泳道圖顯示出來進行分析：

至此，一個「從地球到設備端口」的多層次、大型綜合3D機房系統就構建成了。怎麼樣，HTML5的3D技術不是「小玩具」吧？只要認真打造，徹底能夠支撐各類大型行業應用了。我們程序猿也不要徘徊等待了，抓緊學習HTML5的2D、3D技術吧！

最後老規矩，以爲圖片不過癮，須要一睹3D機房真容的同窗，能夠發郵件到tw-service@servasoft.com，索取程序代碼，依然真誠歡迎你們各抒已見，共同進步~