打造最美HTML5 3D機房（第三季新增資產管理、動環監控）

本來覺得此次的機房資產管理項目告一段落，能夠歇一歇，哥仍是太天真了。咱們偉大的甲方又拿下了第二期的項目，誓把哥的才華發揮到極致啊。國慶長假也沒正經休息幾天，硬是給人折騰出了個demo，加上了容量管理、電源走線、告警巡航這些實用功能，以及溫溼度、風向、門禁、視頻監控效果。哥這就給你們秀一下成果，收收膝蓋，找找存在感。

想看視頻的童鞋能夠直接點這裏：
http://v.youku.com/v_show/id_XMTM3MDgxNTQ4NA==.html

對了，第一次來看哥的童鞋，這裏有前兩篇的連接：

第一季：如何從零開始搭建基於HTML5和WebGL的3D機房場景
第二季：場景和功能的豐富，包括機櫃、設備、走線、路徑規劃等功能

甲方虐歸虐，思路仍是比較清晰的，第一期重點放在三維呈現和靜態的資產管理上，第二期着重動環監控，這樣基本上一個比較完整的數據中心監控系統就出來了。廢話很少說了，這就開始給你們介（嘚）紹（瑟）。

界面美化

此次先是作了一些界面的美化工做，最近跟設計師mm配合得不錯，果真界面檔次也有所提升。

右鍵菜單調整

隨着demo上堆砌的功能愈來愈多，右鍵的按鈕也不夠使了，加之有朋友反映右鍵菜單有點隱蔽不容易找到，我把全部的功能效果都改成從工具欄按鈕進入，直接縱向顯示放在了左側，效果還不錯：

動態客戶信息

上次在機櫃頂部顯示資產編碼的方式獲得了客戶的確定，此次又嘗試在機櫃組地板上動態生成客戶的信息，這就是3D的好處啊，哪兒有空我貼哪裏。

其它裝飾性細節

上次隨手找的CCTV主播電視畫面果斷被吐槽了，看來你們仍是很嚴肅地在探討問題，因此此次我也把電視畫面改爲了統計圖表，另外新增了特別合時宜的海報，給哥點個贊？

資產管理功能

以上都是一些界面上的小改動，下面給你們上幾個硬菜。

機架可用空間

當服務器陸續上架後，會對機櫃的空間產生佔用和分隔。及時瞭解整個機房中每一個機架的佔用狀況和空閒空間的大小狀況，是很是重要的平常工做。經過3d來呈現就再適合不過了：咱們把有服務器佔用的空間用白色塊填充，有空閒的空間根據大小不一樣用不一樣的色塊填充，就有了下方的效果：

圖上的顏色不光是爲了好看，上面1-2U的空間用紅色、5U如下的用紫色，經過不一樣顏色來表示連續剩餘空間的數量，白色表示已經佔用的空間，這樣對於機房管理人員來講，能夠迅速掌握整個機房的佔用狀況。當機房要上架一個5U的設備，咱們能夠一眼看到哪裏有紫色的色塊，並快速定出在哪裏上架。

實現這一效果很簡單，簡單說一下思路：切換空間視圖後，首先把原來的機櫃隱藏，而後在一樣的地方根據空間和設備狀況建立多個不一樣的立方體進行羅列。立方體的顏色根據立方體的高度進行調整。爲了增長視覺效果，能夠留意立方塊不要徹底緊挨一塊兒，能夠留一點空隙增長立體感；空閒的方塊設置必定的透明度，以和乳白色的佔用空間造成必定的差別；設置必定的反光度，增長色塊的質感。以下圖：

機櫃利用率

項目還有個需求是顯示機櫃的整個空間使用率狀況。使用率不用顯示具體哪裏佔用哪裏空閒，只要顯示一個總體使用比例便可，相對簡單一點。先用一個線框把機櫃位置顯示出來，再把一個高度符合使用比例的立方塊顯示出來就好了，相似一個柱狀圖。設置一下顏色、光照等屬性，讓它看上去更真實：

純3d的「動畫」冒出來的柱狀圖，還能綁定真實數據，也算是個很棒的應用了。GIF錄得不咋滴，想看高清大動畫的朋友，仍是直接看源程序吧。

告警巡航

上一篇裏，已經介紹了設備告警的用法，這裏進一步增長了告警巡航的功能，即當一個告警發生後，自動將鏡頭推向故障點，並顯示故障信息，這是告警巡航的做用。下面的圖顯示了當一個告警發生後，鏡頭會在場景中自動進行漫遊，尋找機房門，進入，推向故障機櫃，打開機櫃門，拉出故障設備、板卡，並顯示故障詳細信息。

動力環境監控

動力環境監控的對象主要是機房動力和環境設備等設備，像配電、UPS、空調、溫溼度、漏水、門禁、安防、消防、防雷等等，這些一般會有獨立的採集和監控系統，我須要作的是把動環的效果用3D呈現，而且和系統的真實數據進行對接。

溫度監控

溫度監控是機房中動力環境監控的重要內容。機房裏面大量的設備運行產生大量熱量，須要及時監控溫度的熱點，避免溫度太高致使設備故障。在咱們的項目中，每一個機櫃都有溫度採集器，每一個機櫃的縱向也有多個溫度傳感器，能夠經過後臺接口採集到。有了這些數據，就能夠作溫度的呈現了。通常傳統的方法是顯示溫度數字，這樣並不太直觀。新潮一點的玩法是顯示溫度雲圖。也就是根據溫度採樣點動態生成一個漸變的溫度場雲圖，再將圖貼在地板上，這樣能更直觀的觀察到溫度在空間的變化。

溫度雲圖模擬了熱衰減的過程，並在地板上留下痕跡。一樣，縱向的設備上也經過溫度數值來生成色差不一樣的溫度圖貼在機架上，這樣一眼就能看到整個機櫃的熱點在哪裏，以便及時查看故障或調整空調氣流。

對於沒有機櫃的位置，能夠經過增長一個縱向空間切片來顯示溫度雲圖：

上圖在機櫃旁邊縱向虛擬切片，並對這一切面上進行溫度採集、渲染。能夠觀察出溫度隨着氣流、空間的變化而產生的變化，從而知道整個空間的熱點分佈。能夠根據須要增長更多切片，不過過多切片也會相互遮蓋，影響視覺效果。

生成溫度場的代碼以下。須要傳入機架和機架上的溫度採集點信息：

createSideTemperatureImage: function(rack, count){
    var width=2;
    var height=rack.getHeight();
    var step=height/count;
    var board = new TemperatureBoard(width,height,'v', height/count);        

    for(var i=0;i<count;i++){        
        var value=0.3+Math.random()*0.2;
        if(value<4){
            value=Math.random()*0.9;
        }
        board.addPoint(width/2,step*i,value);
    };

    return board.getImage();
}

以上溫度值是隨機產生，項目中可接入實際數值。

空調風向

機房中的空調冷風流向也是一個須要監控的業務。通常冷風從地板下方吹出、穿過機櫃從上方流走。若是有通道的狀況，冷風的冷卻效效率會更好。下圖展現了冷風是如何流動的。其中箭頭會用流動的動畫效果展現。

經過顏色的變化能夠看到空氣隨着流動的變化而產生的溫度變化。（下面是一張動圖，好像要戳開纔會動次大次）

要作這一效果，先建立一個曲面的對象，而後在上面添加箭頭的貼圖。而後啓用一個動畫，來控制貼圖的位移，就能夠實現動畫流動的效果了：

toggleAirView: function(network){
    network.airView=!network.airView;

    if(!network.getDataBox().airPlanes){
        network.getDataBox().airPlanes=demo.createAirPlanes();
    }

    for(var i=0;i<network.getDataBox().airPlanes.length;i++){
        var plane=network.getDataBox().airPlanes[i];
        if(network.airView){
            network.getDataBox().add(plane);
            plane.airAnimation.play();
        }else{
            network.getDataBox().remove(plane);
            plane.airAnimation.stop();
        }
    }        
}

煙霧監控

如今的建築中通常都有煙霧監控傳感器，當有煙霧發生時會發生報警。下圖模擬了當發生煙霧的狀況，咱們在着火點用一團煙霧來渲染，增長場景的逼真度。同時經過動畫，來模擬煙霧的冒出狀況。

同時把場景中的滅火器的位置高亮並用箭頭動畫示意，提示滅火器材位置，及時施救。

然而，這個功能可能並沒什麼卵用。一旦機房失火，產生的後果將是災難性的，不是幾個滅火器可以解決的。最好仍是作好防災預案和平常維護。

漏水監控

機房除了怕火，再就是怕水。機房漏水產生的後果恐怕沒必要火災更小。水會直接致使設備和損壞，應該大力防範。水的產生通常來自管道或設備的漏水，能夠經過地板鋪設漏水繩進行監控。下圖展現了當機房中鋪設多條漏水繩併發生漏水的狀況：

漏水點能夠經過漏水繩精確檢測，咱們在3d場景中進行精肯定位和顯示，並經過一個標籤指示其位置。爲了觀察的更清晰，這裏動態虛化了機櫃和房間等物體，能一目瞭然看清漏水繩的走向和分佈。

防盜監測

機房會嚴格限制人員的進入。對於敏感區域，能夠放置防盜紅外或激光探頭，當有人員經過，會馬上發起警報，起到防止進入和防盜的效果。這種激光防盜在各類電影大片中已經家常便飯了：

彷佛密室逃脫、拓展訓練等遊戲裏面都有了，急速前進裏筷子兄弟過激光陣可把我看得愁死了，下次公司組織活動的時候能夠搞一把：

回到機房，不是拍電影的話通常不用布整天羅地網，比較規整的線就能夠了：

裏面的射線能夠經過line對象建立，設置顏色、透明度、反光度等便可。貌似這個機房要想進去偷點東西還挺有難度的吧。

電源走線

沿着這個思路，利用line對象，能夠建立更多連線管理。例如電源的佈線走線顯示。每個機櫃的供電線佈局走線，能夠經過不一樣的顏色和走向進行顯示。這樣會比傳統的表格或2d圖形顯示更加直觀。

安防監控

安防監控，最傳統的作法是視頻監控，在機房的各個位置放上攝像頭，而後集中對畫面進行監控。

視頻監控

在咱們的3D機房中，則能夠經過json進行配置顯示攝像頭的位置，攝像頭能夠根據不一樣類型進行提早建模，根據json配置進行動態加載。：

雙擊攝像頭，能夠鏈接攝像頭調出實時監控視頻畫面。這裏放了一個假視頻代替了。

門禁監控

安防的另外一個重要部分就是門禁系統，一般門禁設備的廠家會自帶管理系統，咱們只須要把系統數據接進平臺便可。在3D呈現上，咱們能夠把門禁的位置展現出來：

雙擊門禁控制器後，顯示人員的進出信息：

三維拖拽功能

不少拿到程序的朋友留言問如何可以直接在界面上拖拽移動機櫃何設備。經過api移動物體並不複雜，object.setPosition(x,y,z)就好了。不過在界面上若是在3d中直接經過鼠標拖拽就要考慮如何操做方便。點擊這個按鈕，能夠切換到編輯模式，此時能夠直接在界面上移動機櫃位置。

編輯模式下，鼠標點擊能夠選中一個機櫃。同時機櫃會出現3個扇形和3個箭頭。點中任意扇形拖拽，能夠在所在的平面上平移；點擊任意箭頭拖拽，能夠在這個軸向上平移。同時爲了能看清座標數值，在鼠標的tip中顯示了當前x、y、z的數值，以及旋轉、縮放比例的數值。以下圖：

固然在這裏，機櫃只能容許在水平面平移，縱向平移沒有什麼實際意義，這均可以經過代碼進行控制。下面的代碼能夠控制是否容許拖拽、是否容許縮放、旋轉等操做：

var editInteraction = new mono.EditInteraction(network);
    editInteraction.setShowHelpers(true);
    editInteraction.setScaleable(false);
    editInteraction.setRotateable(false);
    editInteraction.setTranslateable(true);

這樣，咱們就能夠很任性的對機房進行自定義佈局了，不少家裝設計的工具也是這樣的原理。

其餘

以上是此次大更新的主要內容，根據項目的需求，程序還作了其餘不少小改進，具體你們能夠本身看看。包括連線顯示實時流量信息（以下圖：）

動畫顯示機櫃設備的加載過程：

更多細節改進就再也不贅述，感興趣的同窗能夠留言或發郵件到tw-service@servasoft.com，歡迎一塊兒探討！若是你們想看到什麼更多的效果也能夠給我留言。時間有限，不少細節沒辦法寫的很詳細，請你們包涵。俺繼續幹活去了！