打造最美HTML5 3D机房（MONO哥强势归来，第四季惊艳发布）
2019獨角獸企業重金招聘Python工程師標準>>>
##前言
初次見面的朋友們大家好，簡單自我介紹一下：我是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，索取程序代碼，依然真誠歡迎大家各抒已見，共同進步~
轉載于:https://my.oschina.net/monolog/blog/789090
總結
以上是生活随笔為你收集整理的打造最美HTML5 3D机房（MONO哥强势归来，第四季惊艳发布）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谈谈一些有趣的CSS题目（十）-- 结构
- 下一篇： 复杂多边形光栅化算法