在H5使用3D技術門檻比較低了，它的基礎是WebGL(ThreeJS)，一個OpenGL的瀏覽器子集，支持大部分主要3D功能接口。目前主流的瀏覽器都有較好的支持，IE需要11。最近web 3D機房研發告一段落，有時間整理這段時間的一些成果。主要涉及使用H5、js、WebGL技術。
機房3D效果圖
機房線纜和走線架
線纜的連接走向和連接關係是管理員關注的焦點。機架中的網絡設備或服務器設備會通過端口和線纜進行連接，組成一定結構的網絡。而線纜的走向在物理上通過肉眼是很難看清晰的。更多線纜會從機櫃連出，延伸到屋頂上方或地板下方的隱蔽工程中（例如走線架）固定和佈線，用肉眼更無法觀察。此刻，需要3D機房界面能清晰的顯示電纜從端口到走線架再到端口的“端到端”的物理走線，方便管理員瞭解網絡走線情況和管理。
機櫃利用率
項目還有個需求是顯示機櫃的整個空間使用率情況。使用率不用顯示具體哪裏佔用哪裏空閒，只要顯示一個整體使用比例即可，相對簡單一點。先用一個線框把機櫃位置顯示出來，再把一個高度符合使用比例的立方塊顯示出來就行了，類似一個柱狀圖。設置一下顏色、光照等屬性，讓它看上去更真實：
空調風向
機房中的空調冷風流向也是一個需要監控的業務。一般冷風從地板下方吹出、穿過機櫃從上方流走。如果有通道的情況，冷風的冷卻效效率會更好。下圖展示了冷風是如何流動的。其中箭頭會用流動的動畫效果展示。
防盜監測
機房會嚴格限制人員的進入。對於敏感區域，可以放置防盜紅外或激光探頭，當有人員通過，會立刻發起警報，起到防止進入和防盜的效果。報警激光對射防盜在各種場景中已經屢見不鮮了：
機架可用空間
服務器陸續上架後，會對機櫃的空間產生佔用和分隔。及時瞭解整個機房中每個機架的佔用情況和空閒空間的大小情況，是非常重要的日常工作。通過3D來呈現就再適合不過了：我們把有服務器佔用的空間用白色塊填充，有空閒的空間根據大小不同用不同的色塊填充，就有了下方的效果：
煙霧監控
現在的建築中一般都有煙霧監控傳感器，當有煙霧發生時會發生報警。下圖模擬了當發生煙霧的情況，我們在着火點用一團煙霧來渲染，增加場景的逼真度。同時通過動畫，來模擬煙霧的冒出情況。
電源走線
連線管理可以包括強弱電、音視頻的佈線走線顯示。每一個機櫃的供電線佈局走線，可以通過不同的顏色和走向進行顯示。這樣會比傳統的表格或2d圖形顯示更加直觀。
資產管理功能
查看機房硬件、軟件資源信息和實時數據。機房管理員可以快速查看設備運行狀況，包括設計基本信息（IP地址、U數、運行軟件信息等）和實時數據（CPU、硬盤、內存利用率、上下行帶寬利用率、流速等），對設備進行上架下架。
動力環境監控
動力環境監控的對象主要是機房動力和環境設備等設備，像配電、UPS、空調、溫溼度、漏水、門禁、安防、消防、防雷等等，這些通常會有獨立的採集和監控系統，我需要做的是把動環的效果用3D呈現，並且和系統的真實數據進行對接。
溫度雲圖模擬了熱衰減的過程，並在地板上留下痕跡。同樣，縱向的設備上也通過溫度數值來生成色差不同的溫度圖貼在機架上。
安防監控
對機房的攝像頭監控畫面實時查看，設備報警變紅提示，巡檢路徑三維場景導航等功能，直觀可視化操控設備，攝像頭等。提升監控效率。
設備報警
巡更路徑
Web 3D機房，智能數字機房HTML5+Threejs(WebGL) 項目實戰
【課程介紹】
針對webgl的庫threejs框架的Web 3D智能數字機房項目實戰詳細的講解，隨着IT信息技術和移動端的發展，Html5+3D(Webgl)技術已經悄然崛起，3D機房數據中心可視化應用越來越廣泛，主要包括3D機房搭建，機櫃、服務器、數據實時監控、機房線纜和走線架、機櫃利用率、機架可用空間、機櫃開關門、服務器信息查看，溫溼度雲圖，防盜監測、空調風向、告警展示。
章節目錄
大家可以點擊【騰訊課堂】查看我的課程
更多案例
Web 3D智慧可視化工廠--HTML5+WebGL(ThreeJS)綜合案例
Web 3D焦化廠-智慧數字焦化廠HTML5+WebGL(Threejs)案例實戰
更多細節和功能改進後續贅述，感興趣的可以留言或發郵件[email protected]，歡迎一起探討！如果大家想看到什麼更多的效果也可以給我留言。時間有限，很多細節沒辦法寫的很詳細，請大家包涵。