three.js,webGL講解機房微子產品的三維實作,3D庫房,3D機房，普通3D機房搭建，機櫃、伺服器、端口實時監控 資料關聯展示，機櫃動态添加、伺服器上下架，動力環境資料可視化展示（溫濕度雲圖，防盜門禁，配店，管線控制）、告警展示
序：
上節課已經較長的描述了普通機房的實作過程，文章位址（https://www.cnblogs.com/yeyunfei/p/10473021.html）
緊接着上節課的内容 我們這節可來詳細講解機房微子產品的三維實作
技術交流 [email protected]
交流微信：
如果你有什麼要交流的心得 可郵件我
首先我們先看一下整體的效果圖：
這是單個微子產品的模拟最後的系統效果
下面我們進入正文，詳細講解建立過程（機房的以及其它動力環境的建立 前面的課程已經講訴 這裡不在累贅描述）
一、建立元件
正所謂造車得現有輪子，那麼搭建整個機房得先建立一個個小的元件，最後組合成大的子產品。我們的步驟是由内而外。
1.1、先建立伺服器，大量的json參數 利于控制伺服器的所有屬性
1.2、伺服器端口
var postParam=webApi.getPortsFromServerByServerid(serverid);//擷取服務端口參數
2.1機櫃模型實作
由于機櫃的模型是可以運動分解的模型 這樣模型的代碼要稍微多一點 這樣才能做到控制機櫃的每一個有意義的零件
機櫃模型代碼如下：
機櫃效果如下
2.2，接着我們的建立一個虛拟的機框模型，為了達到美工妹妹的效果 我們的虛拟機框還得放光發亮
知識點：這裡用到了發光體 和 管道渲染的技術
var boderModel=THREE.commonFunc.borderLight(serverid);//這裡就是建立機櫃發光的邊的模型 其實這是和機櫃本身模型分開的 隻是使用了機櫃的參數
3.1組合成微子產品 這樣一個微子產品就實作了
在這裡我們預先微子產品都是兩行多列的 而且中間的距離是機櫃厚度的2.5倍 是以我們隻需要一個機櫃的位置參數就可以了
/*
*擷取機櫃在子產品總的位置
*position:[{1,1,uuid-xxxx-xxxx-xxxxx-xx},{1,2,uuid-xxxx-xxxx-xxxxx-xx},{1,3,uuid-xxxx-xxxx-xxxxx-xx}]...
這是一個數組，存儲的是行和列 以及id
*/
var microModel=THREE.commonFunc.createMicroModule(serverid);
這樣 微子產品的雛形就建立完成啦，接着就是交給美工妹妹去優化配色方案 再修改
二、搭建組合資料中心
首先是環境模型
用json去建立機房環境
View Code
最後是 整個資料中心的效果：
也可建立綜合類機房 有普通機櫃 有微子產品
效果如下：
三、邏輯功能實作
1、選擇檢視單個機櫃，檢視機櫃詳情，了解該機櫃内的伺服器排布情況
代碼實作：
2、綜合檢視微子產品的熱力雲圖，空間使用情況，電力情況，制冷，承重等等。
3、伺服器下架操作
4、伺服器上架操作
5、伺服器計劃上架 計劃下架操作
實作方式：
下節預告：
下節課主要講解微子產品的實作與功能
下級預告：
下節課還是講解3D機房相關的知識，出一些不一樣的展示效果。關注點在機櫃伺服器上 而外部的動力環境不做渲染
其它相關文章：
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建築，3D消防模拟——第三課
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模拟，web版3D,bim管理系統——第四課
如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模拟
使用webgl(three.js)建立3D機房(更新版)-普通機房