如何基于three.js(webgl)引擎架構(gòu)，研發(fā)一套通過配置就能自動生成的3D機房系統(tǒng)

自動化3D機房、微模塊、3D機房、3D數(shù)據(jù)中心、科技感數(shù)據(jù)中心、三維機房、3d建筑,3d消防,消防演習(xí)模擬,3d庫房,3d檔案室,3d密集架,webGL,threejs,3d機房,bim管理系統(tǒng)

序：

　　這幾年觀察下來，大部分做物聯(lián)網(wǎng)三維可視化解決方案的企業(yè)或個人，基本都繞不開3D機房。包括前面也講過這樣的案例《使用webgl(three.js)創(chuàng)建自動化抽象化3D機房，3D機房模塊詳細(xì)介紹(抽象版一)》《使用webgl(three.js)創(chuàng)建科技版3D機房，3D機房微模塊詳細(xì)介紹(升級版三)—— 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)

　　我們還是閑話少敘，切入正題。

前言：

　　首先，我們要確定目標(biāo)與需求。

　　目標(biāo)：低代碼生成三維機房系統(tǒng)。

　　　　　全套完備的三維數(shù)據(jù)中心系統(tǒng)，目標(biāo)任務(wù)過于繁重，所以先得將目標(biāo)切割，先完成低代碼模式下的單個機房或者是微模塊的前端三維方案。這就符合了自我效能理論，分割事務(wù)，及時得到正向反饋，不斷完成小目標(biāo)，看到成效，最終才能做出結(jié)果。

　　需求：通過上面的目標(biāo)分割，我們可以簡單概述出需求。簡單一句話，通過配置，快速生成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è)備的機房模型

根據(jù)數(shù)據(jù)自動生成機柜內(nèi)部設(shè)備

1.2、json配置

　　分析行業(yè)需求，提煉配置信息

　　房間建筑：長寬高屬性，以及門窗屬性。這里必須且必要省掉墻的皮膚屬性、不規(guī)則房間特性等等

　　設(shè)備：類型、位置，尺寸、關(guān)聯(lián)數(shù)據(jù)id、這里要放棄設(shè)備細(xì)節(jié)。考慮的越多，越不容易完成目標(biāo)

　　通過上面分析，我們可以基本得出一個簡單的配置信息

　　1.2.1、建筑房間配置：

  {
        "type": "wall",
        "name": "wall_4", //名稱
        "size": {
          "x": 8000, //墻長度
          "z": 100, //墻厚度
          "y": 1000 //墻體高度
        }, //墻的起始點位置
        "startPosition": { //墻體的起始位置 默認(rèn)是墻體的左下角
          "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", //冷通道門對準(zhǔn)的方向 X 表示坐標(biāo)系x軸方向 Z表示坐標(biāo)系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;
}
.......