前言

初次見面的朋友們大家好，這篇文章是“無插件純web 3D機房”系列的第四季，感興趣的朋友可從頭開始觀看，以下是正確的閱讀順序：

無插件純web 3D機房（第一季：從零開始搭建Web 3D機房）
無插件純web 3D機房（第二季：機櫃和設備）
無插件純web 3D機房（第三季：資產管理和動環監控）

答一些讀者問

闊別了半年多，哥其實沒閑著，在憋大招來著。期間陸續收到朋友的留言和來信，提了不少特別棒的意見和想法，項目也有了很大的進展，在接下來的文章里，哥會無私和大家分享。

不扯了，進入正題。首先，想說一個最近一直在和大家探討的問題：HTML5好還是插件好？

無論是在學習還是在做項目的一些朋友都提到了這個問題。儘管web3d技術風起雲涌，大體還是分為兩大流派：插件派和HTML5派。插件派的技術路線是，在瀏覽器中安裝一個企業自己做的插件，然後在這個插件上提供3D的開發能力。典型代表例如Flash插件、Unity3D插件（簡稱U3D）。另外一派就是無插件的HTML5路線，它使用H5的WEBGL標準和Canvas技術來實現瀏覽器中的3D/2D技術，而無需安裝插件。

插件的好處是可以適配各種老型號的瀏覽器（例如老版本的IE），效率應該也會好一點。缺點是，需要安裝插件，跨手機平板也麻煩，語言上要使用插件要求的語言。HTML5的好處是不安裝插件，效率也很不錯，語言簡單統一，都是javascript，而且是目前最火的技術方向。

本人相信 “插件必死”的發展趨勢。要是不服，就看看Flash，和那些被坑在Flex技術上現在還爬不出來眼看著別人學HTML5拿高薪恨得吐血的程式猿們吧。誰又能保證Unity3D不會有一天變成另外一個Flash呢？看看現在日新月異每天大量涌現的HTML5技術和應用，我們有時間爭論插件好還是H5好這樣的無聊問題，還不如實實在在地幹起來。達成共識後，我們來開始看此次的一大波更新。

鷹眼

上次的小機房功能已經基本完成了，客戶對演示效果也非常滿意。由於客戶使用過我們之前做的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機房真容的同學，可以發郵件到[email protected]，索取程式代碼，依然真誠歡迎大家各抒已見，共同進步~