序：
這幾年觀察下來，大部分做物聯(lián)網(wǎng)三維可視化解決方案的企業(yè)或個人， 基本都繞不開3D機房。包括前面也講過這樣的案例《使用webgl(three.js)創(chuàng)建自動化抽象化3D機房，3D機房模塊詳細介紹(抽象版一)》? 《?使用webgl(three.js)創(chuàng)建科技版3D機房，3D機房微模塊詳細介紹(升級版三)—— 1》
隨著技術(shù)的快速發(fā)展，機房的數(shù)量和規(guī)模也在不斷擴大。然而，傳統(tǒng)的數(shù)據(jù)中心管理方式已經(jīng)無法滿足現(xiàn)代社會的需求。在這種情況下，3D機房數(shù)據(jù)中心應(yīng)運而生。
顧名思義，三維機房數(shù)據(jù)中心是指利用三維仿真技術(shù)，將數(shù)據(jù)中心的空間信息、設(shè)備信息、人員流動信息等各類信息集成在三維模型中，實現(xiàn)數(shù)據(jù)中心的全面可視化。這種新型的數(shù)據(jù)中心管理方式，能夠提高管理效率，降低運營成本，提升數(shù)據(jù)中心的可靠性。
但是，三維機房解決方案已經(jīng)發(fā)展了好多年，逃不開建模，數(shù)據(jù)連接，個性化定制。一個機房項目，開發(fā)周期長，研發(fā)成本高。不說如何顛覆一下這部分行業(yè)應(yīng)用，也得想想如何提升一下效率。
綜述，低代碼模式的三維機房解決方案呼之欲出。當(dāng)然還是基于three.js（webgl）引擎架構(gòu)
我們還是閑話少敘，切入正題。
前言：
首先，我們要確定目標與需求。
目標：低代碼生成三維機房系統(tǒng)。
全套完備的三維數(shù)據(jù)中心系統(tǒng)，目標任務(wù)過于繁重，所以先得將目標切割，先完成低代碼模式下的單個機房或者是微模塊的前端三維方案。這就符合了自我效能理論，分割事務(wù)，及時得到正向反饋，不斷完成小目標，看到成效，最終才能做出結(jié)果。
需求：通過上面的目標分割，我們可以簡單概述出需求。簡單一句話，通過配置，快速生成3D機房，包括其常用的業(yè)務(wù)邏輯。
這里我們明確了包含常用業(yè)務(wù)邏輯，而個性化特殊化的業(yè)務(wù)需求我們可以在完成這部分后，基于現(xiàn)有系統(tǒng)做疊加與拓展。為了方便拓展，先用簡易系統(tǒng)要考慮到合理性與延續(xù)性。
? 綜上所述，我們要做一個通過簡單配置即可自動生成一個3D機房前端系統(tǒng)。后續(xù)我們再通過做一個工具，通過工具拖拉拽來代替寫配置這一步。
技術(shù)交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可郵件我
一、效果展示
1.1、機房效果
通過簡單配置生成一個帶有微模塊、單排柜以及動環(huán)設(shè)備的機房模型
?文章來源地址http://www.zghlxwxcb.cn/news/detail-710669.html
?
根據(jù)數(shù)據(jù)自動生成機柜內(nèi)部設(shè)備
?
?
1.2、json配置
分析行業(yè)需求，提煉配置信息
房間建筑：長寬高屬性，以及門窗屬性。這里必須且必要省掉墻的皮膚屬性、不規(guī)則房間特性等等
設(shè)備：類型、位置，尺寸、關(guān)聯(lián)數(shù)據(jù)id、這里要放棄設(shè)備細節(jié)?？紤]的越多，越不容易完成目標
通過上面分析，我們可以基本得出一個簡單的配置信息
1.2.1、建筑房間配置：
?
?
?
{ "type": "wall", "name": "wall_4", //名稱 "size": { "x": 8000, //墻長度 "z": 100, //墻厚度 "y": 1000 //墻體高度 }, //墻的起始點位置 "startPosition": { //墻體的起始位置 默認是墻體的左下角 "x": -4000, "y": 0, "z": 2700 }, "doorHoles": [ //門 { "id": "door_001",//門禁設(shè)備id "type": 2, //0 x方向單門 1 x反方向單門 2 雙門 3表示窗戶洞 "start": 400, //相對于尺寸參數(shù)的x 離0多長 比如400 表示門洞離x 0點400 "width": 600, //門洞寬 "height": 700, //門洞高 "thickness": 40 //門厚度 }, { "type": 3, "start": 2600, "width": 2000, "height": 700, "rideHeight": 100, //窗戶離墻的底邊高度 "thickness": 10 //窗的厚度 } ], },
1.2.2、機柜配置
a、冷通道配置
?
{ "id": "101", //冷通道id 唯一 "type": "minRoom", //冷通道類型 "dataId": "101", //數(shù)據(jù)id 唯一 "position": { //冷通道位置 是指冷通道中心點在場景中的位置 "x": -2000, "y": 0, "z": 0 }, "rotationDir": "Z", //冷通道門對準的方向 X 表示坐標系x軸方向 Z表示坐標系z方向 "rackLength": 9, //冷通道單邊機柜的個數(shù) "children": [//冷通道內(nèi)設(shè)備 { "id": "1_1", //設(shè)備id "type": "ljkt", //設(shè)備類型 取值范圍：ljkt ltg rack 分別表示列間空調(diào) 列頭柜 機柜 "dataId": "1_1", //數(shù)據(jù)id "row": "1", //表示在冷通道哪一排 取值1或者2 在第一排 或者第二排 "col": "1", //表示在某排第幾個 "width": 0.5//占用寬度比例 }, ] .......... },
b、單排柜配置
?
{ "id": "1_1", //機柜id 自定義 唯一性 建議跟數(shù)據(jù)庫資產(chǎn)id保持一致 "type": "rack", //類型 "name": "rack_1_1", //機柜模型名稱 唯一性 "dataId": "1_1", //機柜數(shù)據(jù)id 這里是指數(shù)據(jù)庫存儲的機柜資產(chǎn)id "position": { //機柜位置 是指機柜中心點在場景中的位置 "x": -2550, "y": 450, "z": 1315 }, }
1.2.3、設(shè)備配置
?
?
?
{ //溫濕度傳感器
"type": "wdcgq",//設(shè)備類型
"id": "2",//id 保持全局唯一
"dataId": "wd1",//數(shù)據(jù)id
"position": {//模型中心點在場景中的位置
"x": 0,
"y": 1200,
"z": 0
},"scale": {//縮放 所有值不可為0
"x": 1,
"y": 1,
"z": 1
}
}
1.3、業(yè)務(wù)邏輯
上面的配置，機房模型已經(jīng)生成，接下來就是基于模型與數(shù)據(jù)，生成功能邏輯
例如、利用率、溫度云圖、承重、告警等等
?
?溫度云圖
?承重、功耗
?
二、代碼解析
2.1、合理封裝
?封裝分為兩部分
第一部分是模型封裝，更加不同類型 以及屬性生成模型/
例如：
* 創(chuàng)建普通地板 * @param {any} name 名稱 floor * @param {any} size 尺寸 {x:8000,z:5000,y:100} 長 寬 厚 * @param {any} CenterPosition 中心點位置 {x:0,z:-60,y:0} * @param {any} rotation 旋轉(zhuǎn) {x:0,y:0,z:0} 角度用 */ function createFloor(name, size, CenterPosition, rotation) { ...... return model; } /** * 創(chuàng)建機房空氣地板 * @param {any} name 名稱 floor * @param {any} size 尺寸 {x:8000,z:5000,y:100} 長 寬 厚 * @param {any} CenterPosition 中心點位置 {x:0,z:-60,y:0} * @param {any} rotation 旋轉(zhuǎn) {x:0,y:0,z:0} 角度用 */ function createDataCenterFloor(name, size, CenterPosition, rotation) { ...... return model; } /** * 創(chuàng)建墻體 * @param {any} name 名稱 wall_4 * @param {any} size 尺寸{x:8000,z:100,y:1000} 長 厚 高 * @param {any} startPosition 起始點位置 { "x": -4858.313, "y": 0, "z": 1264.35 } * @param {any} doorHoles 門洞 [ { type:2 ,//0 x方向單門 1 x反方向單門 2 雙門 3窗戶 start: 400,//相對于尺寸參數(shù)的x 離0多長 比如400 表示門洞離x 0點400 width:600,//門洞寬 height:700,//門洞高 thickness:40,//門洞厚度 rideHeight:100//離地高度 } ] * @param {any} rotation 旋轉(zhuǎn) {x:0,y:0,z:0} */ function createWall(name,type, size, startPosition, doorHoles, rotation) { ...... return buildwall; }
第二部分是封裝業(yè)務(wù)邏輯
將每部分業(yè)務(wù)邏輯單獨封裝到方法類中
例如：溫度云圖
//=======================================================溫度======================================================= function Tempture() { } Tempture.prototype.temptureSpaceState = 0; //溫度顯示 Tempture.prototype.showTemptureMap = function (callBack) { var _this = this; if (_this.temptureSpaceState == 0) { $("#backBtn").fadeIn(); layer.closeAll(); $("#toolbar").fadeOut(); _this.temptureSpaceState = 1; _this.createHeatMapModels("temptureObj", callBack); _this.hideAllMsg(); } else { _this.temptureSpaceState = 0; _this.hideAllTemptureMapObjs(); } } Tempture.prototype.hideAllTemptureMapObjs = function () { WT3DObj.destoryObj("temptureObj"); for (var i = 0; i < 20; i++) { WT3DObj.destoryObj("temptureObj_" + i); } } //創(chuàng)建熱力圖 Tempture.prototype.createHeatMapModels = function (name, callBack) { var _this = this; var scaleRate = 1; if (roomConfig.buildData.baseConfig && roomConfig.buildData.baseConfig.normRackSize) { scaleRate = roomConfig.buildData.baseConfig.normRackSize.width / 350; } _this.getHeatMapDataValue(function (_data) { var modeljson = ...; WT3DObj.InitAddObject(modeljson); for (var i = 0; i < 10; i++) { modeljson.position.y += (roomConfig.maxheight / 10) / scaleRate; modeljson.name = name + "_" + i; modeljson.values = _data.data; WT3DObj.InitAddObject(modeljson); } }, callBack); }; Tempture.prototype.getHeatMapDataValue = function (suc, callBack) { webapi.getTemptureValue(function (result) { var heatMapData = {}; $.each(result, function (_reindex, _reobj) { heatMapData["d_" + _reobj.id] = _reobj; }); ... var rdata = { max: 100, data: datas }; if (suc) { suc(rdata); } if (callBack) { callBack(mtemp); } }); }
?
?
2.2、業(yè)務(wù)隔離
switch (id) { case "div_btn_1"://異常設(shè)備 { clearInterval(_this.alarmSetintervalIndex); $("#btn_1").fadeTo(100, 1); if ($("#btn_1").attr("title") == "告警監(jiān)控") { $("#btn_1").attr("title", "關(guān)閉告警閃動"); $("#btn_1").attr("src", "../img/pageimg2/ycsbclose.png"); modelBussiness.closeAlarm(); } else { _this.flashAlarmBtn(); modelBussiness.startAlarm(); $("#btn_1").attr("src", "../img/pageimg2/ycsb.png"); $("#btn_1").attr("title", "告警監(jiān)控"); } } break; case "div_btn_2"://空間 { modelBussiness.currentState = 22; modelBussiness.showSpaceRate(); } break; case "div_btn_3"://U位 { modelBussiness.currentState = 23; modelBussiness.showUsageMap(); } break; case "div_btn_4": { modelBussiness.currentState = 24; modelBussiness.showTemptureMap(); }//溫度 break; case "div_btn_5"://承重 { modelBussiness.currentState = 25; modelBussiness.showBearing(); } break; case "div_btn_6"://功率 { modelBussiness.currentState = 26; modelBussiness.showEnergyRate(); } break; } });
?
三、主要難點
3.1、如何封裝模型、提煉參數(shù)
- 選擇關(guān)鍵參數(shù)：在模型中可能有很多參數(shù)，需要選擇出一些關(guān)鍵的參數(shù)。例如，一些對模型性能影響較大的參數(shù)，或者一些表示模型復(fù)雜度的參數(shù)等。
- 定義計算方法：對于每個關(guān)鍵參數(shù)，需要定義一個計算方法。
- 提取參數(shù)：在模型預(yù)測時，需要提取出這些關(guān)鍵參數(shù)的值。
- 可視化參數(shù)：對于一些關(guān)鍵參數(shù)，可能還需要進行可視化，以便于理解和優(yōu)化模型。
3.2、如何在生成的不同房間模型下，還能展現(xiàn)業(yè)務(wù)功能
- 定義業(yè)務(wù)功能：首先需要明確每個房間所需展現(xiàn)的業(yè)務(wù)功能
- 集成業(yè)務(wù)功能：將所定義的各項業(yè)務(wù)功能集成到三維房間模型中
- 交互式展示：將三維房間模型與業(yè)務(wù)功能進行交互式展示。
- 場景模擬：根據(jù)實際使用場景，模擬不同場景下的業(yè)務(wù)功能展示。
3.3、如何做數(shù)據(jù)分離
? 統(tǒng)一webapi數(shù)據(jù)文件，這里主要處理獲取數(shù)據(jù)，數(shù)據(jù)過濾
/* 數(shù)據(jù)接口 */ function WebAPI() { this.serverHead = "";//idc/ this.roomid = getQueryString("room") ? getQueryString("room") : "1"; this.CabInfosCache = null;//機柜數(shù)據(jù)緩存 this.OtherDevsCache = null;//所有設(shè)備緩存 this.ServerDevsCache = {};//所有設(shè)備緩存 this.AllDevsCache = null;//所有設(shè)備緩存 this.alarmCache = [];//告警緩存 this.modelAlarmCache = {};//模型對應(yīng)告警緩存 this.wsSocket = null; //告警閃動對應(yīng)的顏色 this.alarmColors = { "L1": 0xff0000, "L2": 0xff6600, "L3": 0xffff00, "L4": 0x0096ff, } this.urls = { enables: "/dataDemo/enable.json",//功能開啟關(guān)閉接口 buildData: "/dataDemo/buildData.json",//創(chuàng)建模型接口 racks: "/dataDemo/racks.json",//機柜信息 useRates:"/dataDemo/useRates.json",//機柜利用率 temperatures: "/dataDemo/tempTureData.json",//溫度數(shù)據(jù) bearing: "/dataDemo/beringRate.json",//承重 euRate: "/dataDemo/euRate.json",//功耗 uvInfos: "/dataDemo/uDetail.json",//u位信息 otherDevs: "/dataDemo/otherDev.json",//其它動環(huán)設(shè)備 DevData: "/dataDemo/otherDevValue.json",//動環(huán)設(shè)備實時數(shù)據(jù) queryInfos: "/dataDemo/search.json",//查詢接口 alarms: "/dataDemo/alarm.json",//告警 wsurl: "xxxx",//websocket地址 } } WebAPI.prototype.getEnables = function () { var _this = this; var url = this.serverHead + this.urls.enables + "?roomId=" + this.roomid; url += "&r=" + Math.random(); var enables = null; httpGetSyn(url, function (response) { if (response && response.data) { enables = response.data; } }, function (err) { console.log(err); }); return enables; } .......
?
?由于篇幅原因，我們本節(jié)課先到這里，后面我們更新如何創(chuàng)建一個可編輯工具完成配置
?
技術(shù)交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可郵件我
其它相關(guān)文章：
如何使用webgl(three.js)實現(xiàn)煤礦隧道、井下人員定位、掘進面、縱采面可視化解決方案——第十九課（一）
如何使用webgl(three.js)實現(xiàn)3D消防、3D建筑消防大樓、消防數(shù)字孿生、消防可視化解決方案——第十八課（一）
webgl(three.js)3D光伏,3D太陽能能源,3D智慧光伏、光伏發(fā)電、清潔能源三維可視化解決方案——第十六課
如何用webgl(three.js)搭建一個3D庫房,3D倉庫3D碼頭,3D集裝箱,車輛定位,叉車定位可視化孿生系統(tǒng)——第十五課
webgl(three.js)實現(xiàn)室內(nèi)三維定位,3D定位,3D樓宇bim、實時定位三維可視化解決方案——第十四課（定位升級版）
使用three.js(webgl)搭建智慧樓宇、設(shè)備檢測、數(shù)字孿生——第十三課
如何用three.js(webgl)搭建3D糧倉、3D倉庫、3D物聯(lián)網(wǎng)設(shè)備監(jiān)控-第十二課
如何用webgl(three.js)搭建處理3D隧道、3D橋梁、3D物聯(lián)網(wǎng)設(shè)備、3D高速公路、三維隧道橋梁設(shè)備監(jiān)控-第十一課
如何用three.js實現(xiàn)數(shù)字孿生、3D工廠、3D工業(yè)園區(qū)、智慧制造、智慧工業(yè)、智慧工廠-第十課
使用webgl(three.js)創(chuàng)建3D機房，3D機房微模塊詳細介紹(升級版二)
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建筑，3D消防模擬——第三課
使用webgl(three.js)搭建一個3D智慧園區(qū)、3D建筑，3D消防模擬，web版3D,bim管理系統(tǒng)——第四課
如何用webgl(three.js)搭建不規(guī)則建筑模型，客流量熱力圖模擬
?使用webgl(three.js)搭建一個3D智慧園區(qū)、3D建筑，3D消防模擬，web版3D,bim管理系統(tǒng)——第四課（炫酷版一）
使用webgl(three.js)搭建3D智慧園區(qū)、3D大屏，3D樓宇，智慧燈桿三維展示，3D燈桿，web版3D,bim管理系統(tǒng)——第六課
如何用webgl(three.js)搭建處理3D園區(qū)、3D樓層、3D機房管線問題（機房升級版）-第九課（一）文章來源：http://www.zghlxwxcb.cn/news/detail-710669.html
?
到了這里，關(guān)于如何基于three.js(webgl)引擎架構(gòu)，研發(fā)一套通過配置就能自動生成的3D機房系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
