使用webgl(three.js)创建自动化抽象化3D机房，3D机房模块详细介绍(抽象版一)

目前市面上有两种机房 一种是普通机房 一种是由微模块组成的机房，本文主要介绍普通机房的抽象化体现模式。

抽象机房模式：机房展示过程中，我们需要对机房进行建模，当遇到大量机房需要建模时，这无疑是巨大工作量的，不仅仅拖了交期，还会让研发人员做了大量重复的工作。

　　为满足大量机房三维效果，这种抽象化机房展示形式尤为突出。既满足了机房可视化直观效果，又能快速响应不同机房的要求。

技术交流邮箱:1203193731@qq.com

交流微信：

　　　　

如果你有什么要交流的心得 可邮件我

一、整体视角，根据配置数据，自动生成行列机柜。

创建自动化前，首先要封装自动化代码，然后通过数据驱动生成模型

我们以该文章机房为例 代码实现如下：

function getITCRoomData() {
    //获取列表
    var racks = getWebApiInstance().getRacksByRoomId();
 
    var models = [ ];

    //统计总的行列
    var maxRow = 0;//行
    var maxCol = 0;//列
    $.each(racks.Members, function (_index, _obj) {
        var row = parseInt(_obj.Location.split("-")[0]);
        var col = parseInt(_obj.Location.split("-")[1]);
        if (row >= maxRow) {
            maxRow = row;
        }
        if(col>maxCol){
            maxCol = col;
        }
    });

    $.each(racks.Members, function (_index, _obj) {
        var row = parseInt(_obj.Location.split("-")[0]);
        var col = parseInt(_obj.Location.split("-")[1]);
        var _cab = getCabinetModel(_obj.Id,"ITC_cab_A_" + (_index+1),
            { x: 1, y: 1, z: 1 },
            { "x": (row - 1) * 500, "y": 210, "z": (col-1) * 182 }, [{ "direction": "y", "degree": 0 }]);
        models.push(_cab);
    });
    models.push({
        "show": true, "uuid": "", "name": "ITC_floor", "objType": "cube2", "length": maxRow * 500 + 500, "width": maxCol * 182 + 500, "height": 50,
        "x": ((maxRow-1) * 500)/2,
        "y": -25,
        "z": ((maxCol - 1) * 182) / 2, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 0x8caeed, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/wall/top4.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 10 }, "skin_down": { "skinColor": 12447743, "side": 1, "opacity": 1, "imgurl": "../../img/3dImg/wall/floor5.jpg", "repeatx": true, "width": 20, "repeaty": true, "height": 30 }, "skin_fore": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 11060451, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 11060451, "side": 1, "opacity": 1 } } }, "showSortNub": 1, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
    });
    return models;


    var alarmmarks = [];
    //添加机柜
    for (var i = 1; i <=18; i++){
        var _cab = getCabinetModel("ITC_cab_A_" + i,
            { x: 1, y: 1, z: 1 },
            { "x": 1000, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0}]);
        models.push(_cab);
        if (Math.random() > 0.8) {
            var alarmLeavel=Math.floor(Math.random() * 4) + "0";
            var marks = modelBussiness.addMark("ITC_cab_A_" + i + "Mark", { "x": 1000, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
            alarmmarks.push({ row: 0, col: i, alarmLevel: alarmLeavel });
        models = models.concat(marks);
        }
    }
    for (var i = 1; i <= 18; i++) {
        var _cab = getCabinetModel("ITC_cab_A_" +( i+18),
            { x: 1, y: 1, z: 1 },
            { "x": 500, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
        models.push(_cab);

        if (Math.random() > 0.8) {
            var alarmLeavel = Math.floor(Math.random() * 4) + "0";
            alarmmarks.push({ row: 1, col: i, alarmLevel: alarmLeavel });
            var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 18) + "Mark", { "x": 500, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
            models = models.concat(marks);
        } 
    }
    for (var i = 1; i <= 18; i++) {
        var _cab = getCabinetModel("ITC_cab_A_" + (i + 36),
            { x: 1, y: 1, z: 1 },
            { "x": 0, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
        models.push(_cab);
        if (Math.random() > 0.8) {
            var alarmLeavel = Math.floor(Math.random() * 4) + "0";
            alarmmarks.push({ row: 2, col: i, alarmLevel: alarmLeavel });
            var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 36) + "Mark", { "x": 0, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
            models = models.concat(marks);
        }
    }
    for (var i = 1; i <= 18; i++) {
        var _cab = getCabinetModel("ITC_cab_A_" + (i +54),
            { x: 1, y: 1, z: 1 },
            { "x": -500, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
        models.push(_cab);
        if (Math.random() > 0.8) {
            var alarmLeavel = Math.floor(Math.random() * 4) + "0";
            alarmmarks.push({ row: 3, col: i, alarmLevel: alarmLeavel });
            var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 54) + "Mark", { "x": -500, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
            models = models.concat(marks);
        }
      
    }
    for (var i = 1; i <= 18; i++) {
        var _cab = getCabinetModel("ITC_cab_A_" + (i + 72),
            { x: 1, y: 1, z: 1 },
            { "x": -1000, "y": 210, "z": -1000 + (i - 1) * 182 }, [{ "direction": "y", "degree": 0 }]);
        models.push(_cab);
        if (Math.random() > 0.8) {
            var alarmLeavel = Math.floor(Math.random() * 4) + "0";
            alarmmarks.push({ row: 4, col: i, alarmLevel: alarmLeavel });
            var marks = modelBussiness.addMark("ITC_cab_A_" + (i + 72) + "Mark", { "x": -1000, "y": 450, "z": -1000 + (i - 1) * 182 }, alarmLeavel);
            models = models.concat(marks);
        }
        //var serversGroup = getServerModel3("ITC_cab_A_" + (i + 72) + "_sGroup", Math.floor(Math.random() * 7), { "x": -1000, "y": 210, "z": -1000 + (i - 1) * 182 }, { x: 1, y: 1, z: 1 },0);
        //models.push(serversGroup);
    }
    page.alarmmarks = alarmmarks;
    return models;
}

二、异常设备视角，查看异常机柜，其它机柜隐藏虚化。

 实现虚化比较简单：

直接获取非异常设备的名称列表，然后修改他们的透明度

//异常设备
ModelBussiness.prototype.abnormalDevInfo = function () {
if (modelBussiness.showState != 0) {
return;
}
this.showState = -1;
//清除高亮边框
if (modelBussiness.lightBorderModel) {
modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
}
this.showAlarmLogo();
this.showMessageWindow("异常设备",
function (layerindex) {
setTimeout(function () {
var showHtml = "";
$.each(page.alarmmarks, function (_index, _obj) {
var markStr = "";
var markColor = "";
switch (_obj.alarmLevel) {
case "00":
markStr = "";
markColor = "cornflowerblue";
break;
case "10":
markStr = "2";
markColor = "yellow";
break;
case "20":
markStr = "3";
markColor = "orange";
break;
case "30":
markStr = "4";
markColor = "red";
break;
}
showHtml += "<tr><td class='tdTitile'>0000" + ((_obj.row) * 18 + _obj.col) + "</td><td class='tdTitile'>HX0C0" + (_obj.row + 1) + "-" + (_obj.col + 1) + "</td><td class='tdTitile' style='color:" + markColor+";'>" + markStr + "</td></tr>";
});
}, 500);
$("#iframe_infoContent")[0].contentWindow.$("#unNormalDevs").show();
}, function () {
//modelBussiness.backBtn();
});
console.log(page.alarmmarks);
var nohideNames = ["ITC_floor"];
var nohideNamesStr = "ITC_floor";
var showHtml = "";
$.each(page.alarmmarks, function (_index, _obj) {
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18));
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"Mark");
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) + "Mark_nub");
for (var j = 1; j < 6; j++) {
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"_s_"+j);
}
nohideNames.push("ITC_cab_A_" + (_obj.col + _obj.row * 18) +"_sGroup");
nohideNamesStr += "|ITC_cab_A_" + (_obj.col + _obj.row * 18);
showHtml += "<tr><td class='tdTitile'>001</td><td class='tdTitile'>001</td><td class='tdTitile'>严重告警</td></tr>";
});
//WT3DObj.commonFunc.changeCameraPosition(
// { x: 2165.374975454839, y: 2885.848294015838, z: 382.00211926637746 },
// { x: -237.4468172211899, y: -184.37302270726133, z: 421.1463728664973 }, 1000, function () {
// });
modelBussiness.VAllExceptNames(nohideNames,0.1, function () {
modelBussiness.showState = 1;
});

}
ModelBussiness.prototype.marksObjs = [];
ModelBussiness.prototype.markNames = [];
ModelBussiness.prototype.hideAlarmLogo = function () {
var _this = this;
if (_this.marksObjs.length <= 0) {
if (this.markNames && this.markNames.length > 0) {
var markObjs = WT3DObj.commonFunc.findObjectsByNames(this.markNames);
_this.marksObjs = markObjs;
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = false;
});
}
} else {
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = false;
});
}
}
ModelBussiness.prototype.showAlarmLogo = function () {
var _this = this;
if (_this.marksObjs.length <= 0) {
if (this.markNames && this.markNames.length > 0) {
var markObjs = WT3DObj.commonFunc.findObjectsByNames(this.markNames);
_this.marksObjs = markObjs;
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = true;
});
}
} else {
$.each(_this.marksObjs, function (_index, _obj) {
_obj.visible = true;
});
}
}

//虚化设备
ModelBussiness.prototype.needVobjs = [];
ModelBussiness.prototype.VAllExceptNames = function (exceptNames,value, sucFunc) {
    var _this = this;
    _this.needVobjs = [];
    $.each(WT3DObj.objects, function (_index, _obj) {
        if (exceptNames.indexOf(_obj.name) < 0) {
            if (_obj.name != (exceptNames) && _obj.name.indexOf("OBJCREN") < 0 && _obj.name.indexOf(exceptNames + "_") < 0) {
                _this.needVobjs.push(_obj);
            }
        }
    });
    WT3DObj.commonFunc.changeObjsOpacity(_this.needVobjs, 1, value, 1000, function () {
        if (sucFunc) {
            sucFunc();
        }
    });

}
ModelBussiness.prototype.EAllExceptNames = function (exceptNames, sucFunc) {
    var _this = this;
    WT3DObj.commonFunc.changeObjsOpacity(_this.needVobjs, 0.05,1 ,1000, function () {
        _this.needVobjs = [];
        if (sucFunc) {
            sucFunc();
        }
    });

}

三、机柜空间利用率展示。

 利用率展示，通过不同颜色 不同高度展示不同机柜的利用率情况

代码实现如下“”：

//容量管理
ModelBussiness.prototype.rateSpaceState = 0;
ModelBussiness.prototype.rateSpaceCubes = [];
ModelBussiness.prototype.rateSpaceCubeNames = [];
ModelBussiness.prototype.showSpaceRateHtml ="";
ModelBussiness.prototype.showSpaceRate = function () {
    var _this = this;
    if (modelBussiness.showState < 0) {
        return;
    }
    _this.showState = 2;
    //清除高亮边框
    if (modelBussiness.lightBorderModel) {
        modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
    }

    //WT3DObj.commonFunc.changeCameraPosition(
    //    { x: 1977.2470605104493, y: 2105.8385914626856, z: 3021.913409329815 },
    //    { x: -14.639192973854877, y: -334.87231771902077, z: 391.5306197025099 }, 1000, function () {
    //    });
    
    
    this.showMessageWindow("空间",
        function () {
            $("#iframe_infoContent")[0].contentWindow.$("#spaceDiv").show();
        }, function () {
            //modelBussiness.backBtn();
        });
    if (_this.rateSpaceState == 0)
    {
        _this.rateSpaceState = 1;
        //隐藏所有
        _this.hideAll("aaaa", function () {

            var racks = getWebApiInstance().RacksCache;
            if (_this.rateSpaceCubeNames.length <= 0) {
                var showHtml = "";
                for (var i = 1; i <= racks.length ; i++) {
                    var rateValue = racks[i - 1].Unit.UnitUsed / racks[i - 1].Unit.UnitTotal;

                    var style = {
                        borderColor: 0x6495ed,
                        innerColor: 0x6495ed,
                        innerOprity: 0.7,
                        outColor: 0x204383,
                        outOprity: 0.2
                    };
                    //if (temptureValue[i].value > 90) {
                    //    tempColor = 0xff6f6f;
                    //} else if (temptureValue[i].value > 70) {
                    //    tempColor = 0xff9e5c;
                    //} else if (temptureValue[i].value > 40) {
                    //    tempColor = 0x00dda1;
                    //} else {
                    //    tempColor = 0x00ccff;
                    //} 
                    if (rateValue > 0.90) {
                        style = {
                            borderColor: 0xffffff,
                            innerColor: 0xff6f6f,
                            innerOprity: 0.9,
                            outColor: 0x152c48,
                            outOprity: 0
                        };
                    } else if (rateValue > 0.70) {
                        style = {
                            borderColor: 0xffffff,
                            innerColor: 0xff9e5c,
                            innerOprity: 0.9,
                            outColor: 0x152c48,
                            outOprity: 0
                        };
                    } else if (rateValue > 0.40) {
                        style = {
                            borderColor: 0xffffff,
                            innerColor: 0x00dda1,
                            innerOprity: 0.9,
                            outColor: 0x152c48,
                            outOprity: 0
                        };
                    } else {
                        style = {
                            borderColor: 0xffffff,
                            innerColor: 0x00ccff,
                            innerOprity: 0.9,
                            outColor: 0x152c48,
                            outOprity: 0
                        };
                    }

                    var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
                    if (itcobj) {
                        _this.commonFunc.createRateCube("ITC_cab_A_" + i,
                            { x: 160, y: 380, z: 140 },
                            { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                            { x: 0, y: 0, z: 0 },
                            rateValue,
                            style, { timelong: 1000 });
                        var markColor = "#204383";
                        if (rateValue > 0.90) {
                            markColor = " #ff0000";
                        } else if (rateValue > 0.70) {
                            markColor = " #ffa533";
                        } else if (rateValue > 0.50) {
                            markColor = " #204383";
                        }
                    showHtml += "<tr><td class='tdTitile'>0000" + (i) + "</td><td class='tdTitile'>HX0C0" + parseInt(i / 18) + "-" + parseInt((i % 18)) + "</td><td class='tdTitile' style='color:" + markColor + ";'>" + (rateValue * 100).toFixed(2) + "%</td></tr>";
                    }
                }
                modelBussiness.showSpaceRateHtml = showHtml;
                setTimeout(function () {
                    $('#infoContent').html(modelBussiness.showSpaceRateHtml);
                }, 1000);
            } else {
                var showHtml = "";
                for (var i = 1; i <= racks.length ; i++) {
                    var rateValue = racks[i - 1].Unit.UnitUsed / racks[i - 1].Unit.UnitTotal;
                    var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
                    if (itcobj) {
                    _this.commonFunc.createRateCube("ITC_cab_A_" + i,
                        { x: 160, y: 378, z: 140 },
                        { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                        { x: 0, y: 0, z: 0 },
                        rateValue,
                        style, { timelong: 1000 });
                    var markColor = "#204383";
                    if (rateValue > 0.90) {
                        markColor = " #ff0000";
                    } else if (rateValue > 0.70) {
                        markColor = " #ffa533";
                    } else if (rateValue > 0.50) {
                        markColor = " #ffff00";
                    }
                    showHtml += "<tr><td class='tdTitile'>0000" + (i) + "</td><td class='tdTitile'>HX0C0" + parseInt(i / 18) + "-" + parseInt((i % 18)) + "</td><td class='tdTitile' style='color:" + markColor + ";'>" + (rateValue * 100).toFixed(2) + "%</td></tr>";
                    }
                }
                modelBussiness.showSpaceRateHtml = showHtml;
                setTimeout(function () {
                    $('#infoContent').html(modelBussiness.showSpaceRateHtml);
                }, 1000);
            }

        });
    }
    else
    {
        _this.rateSpaceState = 0;
        _this.hideAll("aaaa", function () {
            if (_this.needHideobjs.length > 0) {
                $.each(_this.needHideobjs, function (_index, _obj) {
                    if (_obj.name.indexOf("_rate_") < 0) {
                        _obj.visible = true;
                    }
                });
                //WT3DObj.commonFunc.changeCameraPosition( { x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {
                //    $.each(_this.needHideobjs, function (_index, _obj) {
                //        if (_obj.name.indexOf("_rate_") < 0) {
                //        _obj.visible = true;
                //        }
                //    });
                //});
            }
        });
    }


}
ModelBussiness.prototype.hideSpaceRate = function () {
    modelBussiness.rateSpaceState = 0;
     if (modelBussiness.rateSpaceCubes && modelBussiness.rateSpaceCubes.length > 0){
        $.each(modelBussiness.rateSpaceCubes, function (_index, _obj) {
            _obj.visible = false;
        });
    }
}

四、温度云图展示

 温度云图代码如下：

//温度
ModelBussiness.prototype.temptureSpaceCubes = [];
ModelBussiness.prototype.temptureSpaceCubeNames = [];
//温度显示
ModelBussiness.prototype.showTemptureMap = function () {
    var _this = this;
    if (modelBussiness.showState < 0) {
        return;
    }
    _this.hideAlarmLogo();
    _this.showState = 3;
    //清除高亮边框
    if (modelBussiness.lightBorderModel) {
        modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
    }
    this.showMessageWindow("温度",
        function () {
            $("#iframe_infoContent")[0].contentWindow.$("#temptureDiv").show();
        }, function () {
           // modelBussiness.backBtn();
        });
    _this.createHeatMapModels("temptureObj", { x: 0, y: 10, z: 1500 }, { x: 9, y: 11, z: 11 });

}
ModelBussiness.prototype.hideAllTemptureMapObjs = function () {
    var _this = this;
    _this.showState = 0;
    if (_this.temptureSpaceCubes.length <= 0) {
        _this.temptureSpaceCubes = WT3DObj.commonFunc.findObjectsByNames(_this.temptureSpaceCubeNames);
    }
    $.each(_this.temptureSpaceCubes, function (_index, _obj) {
        _obj.visible = false;
    });
}

五、机柜功耗情况展示

 这里的功耗情况跟利用率代码技术比较类似，不做累述。

六、u位情况展示

 这里的u位情况。可以通过这种效果，来查看机柜内u位使用情况。空闲u位情况，还可以查看服务器的使用年限。

//年限分布
ModelBussiness.prototype.agesSpaceState = 0;
ModelBussiness.prototype.agesSpaceCubes = [];
ModelBussiness.prototype.agesSpaceCubeNames = [];
//年限显示
ModelBussiness.prototype.showAgesMap = function () {
    var _this = this;
    _this.showState = 5;
    _this.hideAlarmLogo();
    if (modelBussiness.showState < 0) {
        return;
    }
    //清除高亮边框
    if (modelBussiness.lightBorderModel) {
        modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
    }
    this.showMessageWindow("年限",
        function () {
            $("#iframe_infoContent")[0].contentWindow.$("#yearDiv").show();
        }, function () {
            //modelBussiness.backBtn();

        });
    //WT3DObj.commonFunc.changeCameraPosition({ x: 3626.8806598704978, y: 2503.5840662851847, z: 1333.887505251365 }, { x: 115.96408129332937, y: 178.8991280155388, z: 368.1924201030766 },1000, function () { });
    if (_this.agesSpaceState == 0) {
        _this.agesSpaceState = 1;
        //隐藏所有
        _this.hideAll("aaaa", function () {

            if (_this.agesSpaceCubeNames.length <= 0) {
                for (var i = 1; i <= 90; i++) {
                    var rateValue = Math.random();
                    var ageValue = [{
                        value: Math.random() * 62,
                        max: 25,
                        min: 23
                    }];
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 62,
                            max: 3,
                            min: 1
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 62,
                            max: 6,
                            min: 4
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 62,
                            max: 10,
                            min: 8
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 40,
                            max: 16,
                            min: 12
                        });

                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 40,
                            max: 20,
                            min: 17
                        });

                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 40,
                            max: 30,
                            min: 26
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 40,
                            max: 33,
                            min: 31
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value:32,
                            max: 35,
                            min: 34
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 32,
                            max: 37,
                            min: 36
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 32,
                            max: 39,
                            min: 37
                        });
                    if (Math.random() > 0.5)
                        ageValue.push({
                            value: 32,
                            max: 41,
                            min: 40
                        });
                    var style = {
                        borderColor: 0x444444,
                        outColor: 0x0a3d5f,
                        outOprity:1
                    };
                    var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
                    _this.commonFunc.createYearCube("ITC_cab_A_" + i,
                        { x: 160, y: 380, z: 140 },
                        { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                        { x: 0, y: 0, z: 0 },
                        ageValue,
                        style, { timelong: 1000 },i);
                   
                }
            }
            else {
                for (var i = 1; i <= 90; i++) {
                    var itcobj = WT3DObj.commonFunc.findObject("ITC_cab_A_" + i);
                    var ageValue = [{
                        value: Math.random() * 80,
                        max: 3,
                        min: 1
                    }, {
                        value: Math.random() * 80,
                        max: 6,
                        min: 4
                    }, {
                        value: Math.random() * 80,
                        max: 8,
                        min: 7
                    }, {
                        value: Math.random() * 80,
                        max: 10,
                        min: 8
                    }];

                    var style = {
                        borderColor: 0xffffff,
                        outColor: 0xffffff,
                        outOprity: 0.1
                    };
                    _this.commonFunc.createYearCube("ITC_cab_A_" + i,
                        { x: 160, y: 378, z: 140 },
                        { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                        { x: 0, y: 0, z: 0 },
                        ageValue,
                        style, { timelong: 1000 },i);
                }
            }

        });
    } else {
        this.hideYearSpaceRate();
    }
}
ModelBussiness.prototype.hideYearSpaceRate = function () {
    modelBussiness.agesSpaceState = 0;
    modelBussiness.showState = 0;
    if (modelBussiness.agesSpaceCubes && modelBussiness.agesSpaceCubes.length > 0) {
        $.each(modelBussiness.agesSpaceCubes, function (_index, _obj) {
            _obj.visible = false;
        });
    }
}

七、配电情况展示

 

//配电组
ModelBussiness.prototype.distributionUnitState = 0;
ModelBussiness.prototype.distributionUnitCubes = [];
ModelBussiness.prototype.distributionUnitCubeNames = [];
ModelBussiness.prototype.distriShowIndex = 0;
ModelBussiness.prototype.distributionUnitMap = function () {
    var _this = this;
    if (modelBussiness.showState < 0) {
        return;
    }
    _this.hideAlarmLogo();
    _this.showState = 6;
    //清除高亮边框
    if (modelBussiness.lightBorderModel) {
        modelBussiness.commonFunc.removeLightBorder(modelBussiness.lightBorderModel);
    }
    _this.showMessageWindow("配电组",
        function (layerindex) {
            $("#iframe_infoContent")[0].contentWindow.$("#electricDiv").show();
        }, function () {
            modelBussiness.backBtn();
            WT3DObj.destoryObj("mbss_PDG_" + _this.showDistributionUnitIndex); 
            $.each(_this.showDistributionUnitNames, function (_index, _obj) {
                _this.commonFunc.removeLightBorder(_obj);
                var _c_obj = WT3DObj.commonFunc.findObject(_obj);
                _this.BackPosition(_c_obj, 100, function () {
                });
            });
            _this.commonFunc.removeEnergyLightBorder("mbss_PDG_" + _this.showDistributionUnitIndex + "");
        });

    //WT3DObj.commonFunc.changeCameraPosition( { x: 3147.173148817664, y: 4210.16301452083, z: -186.67730752542613 }, { x: -312.79784793637253, y: -169.8337304058292, z: -63.04648622801567 }, 1000, function () {
    //});
    modelBussiness.VAllExceptNames(["ITC_floor"], 0.2, function () {
        _this.showDistributionUnit(1,20);
    });
}
ModelBussiness.prototype.showDistributionUnitNames = [];
ModelBussiness.prototype.showDistributionUnitIndex = 0;
ModelBussiness.prototype.showDistributionUnit = function (unit,value) {
    var _this = this;
    value = value / 80.0;
    if (modelBussiness.showState < 0) {
        return;
    }
    if (_this.showDistributionUnitNames.length>0) {
        WT3DObj.destoryObj("mbss_PDG_" + _this.showDistributionUnitIndex); 
        $.each(_this.showDistributionUnitNames, function (_index, _obj) {
            _this.commonFunc.removeLightBorder(_obj);
            var _c_obj = WT3DObj.commonFunc.findObject(_obj);
            _this.BackPosition(_c_obj,  100, function () {
            });
        });
        _this.commonFunc.removeEnergyLightBorder("mbss_PDG_" + _this.showDistributionUnitIndex + "");
        WT3DObj.commonFunc.changeObjsOpacityByName(_this.showDistributionUnitNames, 1, 0.2, 500, function () {
            $.each(_this.showDistributionUnitNames, function (_index, _obj) {
                _this.commonFunc.removeLightBorder(_obj);
            });
        });
    }
    var showNames = [];
    var sideCabName = "";
    var add = 1;
    if (unit % 2 == 1) {
        add = -1;
        sideCabName = "ITC_cab_A_" + (1 + (unit - 1) * 9);
    } else {
        sideCabName = "ITC_cab_A_" + (unit * 9);
    }
    for (var i = 1 + (unit - 1) * 9; i <= unit * 9; i++){
        showNames.push("ITC_cab_A_" + i); 
    }
    var cab = WT3DObj.commonFunc.findObject(sideCabName);
    var showPosition = { x: cab.position.x, y: cab.position.y, z: cab.position.z };
    showPosition.z += add * 200;
    _this.showDistributionUnitNames = showNames;
    _this.showDistributionUnitIndex = unit;
    _this.addPDG("mbss_PDG_" + _this.showDistributionUnitIndex,showPosition);
    WT3DObj.commonFunc.changeObjsOpacityByName(showNames, 0.2, 1, 500, function () {
        $.each(showNames, function (_index,_obj) {
            var obj = WT3DObj.commonFunc.findObject(_obj);
            _this.commonFunc.addLightBoder(obj, 0x00ffff, 0.6, true);
        });
        var mn_obj = WT3DObj.commonFunc.findObject("mbss_PDG_" + _this.showDistributionUnitIndex);

        var color = 0xff9900;
        if(value>0.7){
            color = 0xff4c4c;
        }else if(value>0.4){
            color = 0xffa666;
        
        }else{
            color = 0x3dcca6;

     }
        _this.commonFunc.addEnergyLightBoder(mn_obj, color, 0.3, value, { innerColor: color, innerOprity: 0.6 });
    
     });
}

八、单机柜信息展示

 

 

 

 

 

 

 

九、资产搜索展示

//搜索功能
ModelBussiness.prototype.searchCubes = [];
ModelBussiness.prototype.SearchAnimation = function (nub) {
    var _this = this;
    _this.hideAlarmLogo();
    if (_this.showState != 0) {
        //恢复到默认
        _this.closeSearchAnimation();
    }
    _this.showState = 8;
    _this.commonFunc.addBoderForAllCabs();
    _this.hideAll("aaaa", function () {
        for (var i = 0; i < nub; i++) {
            var name = "searchCube" + i;
            _this.commonFunc.createSearchCube(name);
        }
    });
    //_this.VAllExceptNames(["ITC_floor"], 0.04,function () {
    //    for (var i = 0; i < nub; i++){
    //        var name = "searchCube" + i;
    //        _this.commonFunc.createSearchCube(name);
    //    }
    //});

}
ModelBussiness.prototype.closeSearchAnimation = function () {
    var _this = this;
    _this.showState = 0;
    if (_this.searchCubes && _this.searchCubes.length > 0) {
        $.each(_this.searchCubes, function (_index, _cubeName) {
            WT3DObj.destoryObj(_cubeName);
        });
    }
    _this.commonFunc.removeBoderForAllCabs();
    modelBussiness.backBtn();
}
ModelBussiness.prototype.noSelectDev = function (_nub) {
    WT3DObj.commonFunc.setSkinColorByname("searchCube"+_nub, 0x000000);
}
ModelBussiness.prototype.selectDev = function (_nub) {
    WT3DObj.commonFunc.setSkinColorByname("searchCube"+_nub, 0x00ffff);
}

技术交流 1203193731@qq.com

交流微信：

　　　　

如果你有什么要交流的心得 可邮件我

 

其它相关文章：

使用webgl(three.js)创建3D机房，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智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）