如何用webgl(three.js)搭建處理3D園區、3D樓層、3D機房管線問題（機房升級版）-第九課（一）

2021 年 11 月 23 日
筆記
3D定位、三維室內定位、3d建築, 3D庫房, 3D機房, Threejs, WebGL

寫在前面的話：

說點啥好呢？就講講前兩天的小故事吧，讓我確實好好反省了一下。

　　前兩天跟朋友一次技術對話，對方問了一下Geometry與BufferGeometry的具體不同，我一下子腦袋短路，沒點到重點定義，被朋友嘲笑一番，虧還搞了three.js 這麼久，這麼簡單的基礎知識盡然不能對答如流，原來都是假把式。著實尷尬至極，尷尬至極….

　　朋友間的調侃，本是玩笑，但認真思考，不無道理。正所謂溫故而知新，也是我們程式設計師的必須課程，不僅僅是學習利用新技術，對自己常用的老技術也要時長翻看一下，加強記憶，加深理解。

　　後來我還真好好的整理總結了一下Geometry與BufferGeometry，查漏補缺，也算為時未晚也。

　　一句話，這兩個對象的主要區別：主要在數據結構上，BufferGeometry非常高效，主要是因為數據直接放在一個連續的GPU記憶體空間中，有效減少向 GPU 傳輸上述數據所需的開銷，而three.js後期版本中的geometry最終都轉化為bufferGeometry,但始終是比bufferGeomerty多了一步，而且還是從CPU的geometry對象傳輸到GPU的bufferGeometry對象的一個誇硬體傳遞過程，所以後期也不建議用geometry了。

序：

在三維機房管理系統中，我們已經可以看到很多實現3d機房的可視化管理方案，常見的功能有動力環境管理、安防監控、資產管理與運維，包括我的前面的文章也有過常規3D機房方案的介紹，可以看我前面的文章（使用webgl(three.js)創建科技版3D機房，3D機房微模組詳細介紹(升級版三)—— 1）。

再很多3D機房方案中，管線管理.一直是無法切實解決的痛點。主要原因有如下幾個：

1、種類繁雜，機房管線線路繁雜，光是線路類型就包括了強電，弱電走線、光纖網線、消防管線、甚至包括國防線（政策上是規避展示的）

2、施工圖紙整理繁雜，涉及到各種類型的線路，施工圖都來源一大堆，著實無法入手

3、建模工作量大，線路的建模，是最繁雜的，除了線路多，走勢還錯綜複雜

那麼針對上面的痛點，我們又該如何解決。

首先是素材來源問題，記得高中學過，唯物主義辨證方法論的思想，牽牛我們要牽牛鼻子，既然線路繁雜，何不挑重點先解決，數據中心這個行業，管線最關心的還是光纖網路線路，而且是只正對數據伺服器的網路線路，其它什麼強電弱電，甚至是機房內部的動環系統感測器走線，都不是那麼重要。所以我們先提出主要矛盾。重點解決機房數據業務的網路走線即可。

然後是技術實現方面：

有三種方案選擇：

　　1、全程建模，通過建模的方式實現走線展示，這雖然準確，但哪有那麼多的人力物力去建模，還有建模過程中，也不能確保沒有遺漏與錯搭。

　　2、數據節點驅動：只保存每條線路的關鍵節點，使用程式碼生成的線路方式。這很大程度上減少了工作量，但是整理的工作量也不小。

　　3、邏輯線路：只記住起點與經過的設備節點以及終點，自動智慧化生成線路。線路不按照實際走向，只記錄描述線路上設備的邏輯點位。

我們的解決方案是採用後面兩種，虛實結合。

好了閑話少敘，歸入正題：

一、定義：

管道：顧名思義，就知道是指放線纜的固定建築，有時候是鐵管道，有時候是水泥管道

井：每隔一段管道就會有一個便於施工人員維護的井出現

線纜：通常情況下，是放在管道裡面的粗黑粗黑的電纜。

電路：是指在線纜裡面的一根一根的電線，通常一根電纜裡面有幾根或者十幾根電路

光纖：在電路裡面的光纖

二、效果與程式碼實現：

1、整體園區效果，我們還是採用深色科技藍風格（科技的主流風）。模型我們還是採用程式碼創建的方式，樓宇標號採用精靈模型。這裡的井蓋採用黃色標亮，便於識別。

全場景實現主要程式碼如下：

function threeStart(_height) { // dataFunc 獲取機櫃，空調，牆等設備的json對象
    WT3DModel = new WT3D();   // 實例化 3D 核心對象，見 WT3D.core.js 文件。 
    var initOption = {
        antialias: true, // 啟用平滑、抗鋸齒效果
        loadSyn: false, // 是否啟用非同步載入
        showHelpGrid: false, // 是否顯示網格線
        clearCoolr: 0x4068b0,  // 背景色
        clearColorOp: 0,    // 透明度
    };
    //初始化模型
    var models = [];
    httpGetSyn("../models/build.json", function (res) {
        models=res;
    });
    //q {x: -1886.6067471471795, y: 4391.583740697971, z: -5331.98996721255}
    //WT3DObj.controls.target
    //q {x: 66.88861133235778, y: 755.2546885005784, z: 750.5239600058044}
    //載入效果
    showLoadingNoLine(
            models.length,//模型個數
            null,
            roomConfig.cameraPostion,
            roomConfig.cameraTarget,
            function () {//載入完成後回調
                modelBussiness = new ModelBussiness();
                modelBussiness.init();
                 pageindex = new Page();
                pageindex.initPage();
                //旋轉註冊
                WT3DObj.mouseMoveRotateEvent = function (v) {
                    pageindex.transLeftBall(v);
                }
                //拓展功能
                WT3DObj.commonFunc.transToScreenCoord = function (point) {
                    var _this = WT3DObj; var screenCoord = {};
                    var vector = new THREE.Vector3(point.x, point.y, point.z);
                    vector.project(WT3DObj.camera);
                    screenCoord.x = (0.5 + vector.x / 2) * _this.width; screenCoord.y = (0.5 - vector.y / 2) * _this.height; return screenCoord;
                };
                WT3DObj.commonFunc.transToThreeCoord = function (x, y) { var _this = WT3DObj; var pX = (x / _this.width) * 2 - 1; var pY = -(y / _this.height) * 2 + 1; var p = new THREE.Vector3(pX, pY, -1).unproject(WT3DObj.camera); return p; };
           
            });
    console.log(models);
    var Aobjects = {  // 給3D對象綁定事件
        objects: models,
        Animation: [
            {
                obj_name: "",
                obj_animation: function (_obj) {

                },
                animationType: 0, // 動畫類型 -1永久循環執行 0觸發執行 >=1執行多少次
                aniInterval: 1000, // 執行時間間隔 毫秒
            }],
        events: {
            dbclick: [
                {
                    obj_name: "ALL",
                    obj_event: function (_obj, face,c,d) { // 被選中的對象 被選中的面
                        // 此處設置雙擊聚焦
                        {
                            modelBussiness.dbClickSelect(_obj, face);
                            if (_obj.name.indexOf("build") == 0 || _obj.name.indexOf("ecn") == 0) {
                                return;
                            }
                            modelBussiness.commonFunc.ZoomINShow(_obj, face, c);
                        }
                    }
                },
            ],
            mouseDown: [
              {
                  obj_name: "ALL",
                  obj_event: function (_obj, face, objs) { // 被選中的對象 被選中的面
                      if (window.location.href.indexOf("index.html") >= 0) {
                      } else if (window.location.href.indexOf("floor.html") >= 0) {
                          showFloorDetail(_obj);
                      }
                  }
              },
            ],
            mouseMove: [
                {
                    obj_name: "ALL",
                    obj_event: function (_obj) {
                    console.log(_obj.name);
                    return true;//返回true表示移動
                }
            },
            ]
        },
        //WT3DModel.viewState;表示0編輯狀態 1表示運行狀態
        btns: []
    }


    if (parent != null && parent.Aobjects_objects != null) {
        Aobjects.objects = parent.Aobjects_objects;
    }
    //修改btns

    //優化Aobjects 此處用於優化 可以先非同步載入圖片
 
    Aobjects.imageList = [];
    imageUUIDList = [];
    //遍歷獲取圖片資源
    function getImageList(obj) {
        if (obj && typeof (obj) == "object") {
            $.each(obj, function (_index, _obj) {
                if (_obj && _obj.imgurl) {
                    var imgObj = {};
                    imgObj.uuid = _obj.imgurl;
                    imgObj.imgurl = _obj.imgurl;
                    if ($.inArray(imgObj.uuid, imageUUIDList) < 0) {
                        imageUUIDList.push(imgObj.uuid);
                        Aobjects.imageList.push(imgObj);
                    }
                }
                getImageList(_obj);
            });
        }
    }
    getImageList(Aobjects.objects);
    if (_height != null && typeof (_height) != 'undefined' && _height == 0) {
        $("#canvas-frame").height($(document).height());
    }
    //檢查是否存在動態資源需要載入
    var dynamicSource = [];
    $.each(Aobjects.objects, function (_index, _obj) {
        /*
        動態資源結構
        {
               name: '',
               objType: 'dynamicSource',
               file:"";
               loadedCallBackFuncName:""
           }
        */
        if (_obj && _obj.objType && _obj.objType == "dynamicSource") {
            dynamicSource.push(_obj);
        }
    });
    if (dynamicSource.length > 0) {
        WT3DModel.additionModels = {};
        var loadednub = 0;
        $.each(dynamicSource, function (_index, _obj) {
            $.getScript(_obj.file).done(function () {
                /* 耶，沒有問題，這裡可以干點什麼 */
                loadednub++;
                if (loadednub == dynamicSource.length) {
                    $.each(dynamicSource, function (_dindex, _dobj) {
                        if (_dobj.loadedCallBackFuncName && _dobj.loadedCallBackFuncName != "") {
                            eval(_dobj.loadedCallBackFuncName + "()");
                        }
                    });
                }
            })
                .fail(function () {
                    /* 靠，馬上執行挽救操作 */
                    console.log("文件載入失敗");
                });
        });
    } 
}

View Code

2、顯示地下所有管道，實現方式也比較簡單，只需要隱藏上方的建築與園區地面，把管道顯現出來即可。這裡可以看到一個園區漸變隱藏的效果。

程式碼實現：

//隱藏園區模型
ModelBussiness.prototype.hideYuanquModel = function (cb) {
    if (!this.helpBuildModels) {
        this.helpBuildModels = WT3DObj.commonFunc.findObjectsByNames(this.helpBuildNames);
    }
    // WT3DObj.commonFunc.changeObjsOpacity(this.helpBuildModels, 0,0.5, 1000, function () {});
    WT3DObj.commonFunc.changeObjsOpacity(this.m_yuanquModels, 1,0.2, 1000, function () {
        modelBussiness.hideDistance()
        WT3DObj.commonFunc.findObject("backGround").visible = false;
        cb&&cb()
    });
}
ModelBussiness.prototype.showYuanquModel = function (cb) {
    if (!this.helpBuildModels) {
        this.helpBuildModels = WT3DObj.commonFunc.findObjectsByNames(this.helpBuildNames);
    }
    WT3DObj.commonFunc.changeObjsOpacity(this.helpBuildModels, 0.5, 0, 1000, function () {});
    WT3DObj.commonFunc.changeObjsOpacity(this.m_yuanquModels, 0.2, 1, 1000, function () {
        cb&&cb()
     });
}

3、井下走線方式展現,可以查看井下每條線路的資訊，便於運維人員運維查看管理

主要程式碼邏輯：

//雙擊線纜
ModelBussiness.prototype.dbClickSelect = function (_obj, _face, formRoute, searchParam) {
    var _this = this;
    if(_obj.name.indexOf('jing_line_')>-1){//線纜
        $("#guangLan").hide()
        _this.inVisibleJing(function () {
            $(".cableImg").css("transform", "scale(1)");
        })
    }
}
var jingNameArr = ['jing_jing', 'jing_guandao', 'jing_line_4', 'jing_line_6', 'jing_line_7', 'jing_line_8', 'DirectionalLight_29'];
// 顯示井
ModelBussiness.prototype.visibleJing = function (cb) {
    WT3DModel.commonFunc.changeObjsOpacityByName(jingNameArr, 0, 1, 1000, function () {
        cb && cb()
    })
}
// 隱藏井
ModelBussiness.prototype.inVisibleJing = function (cb) {
    WT3DModel.commonFunc.changeObjsOpacityByName(jingNameArr, 1, 0, 1000, function () {
        cb && cb()
    })
}
//綁定懸停事件
ModelBussiness.prototype.bindHoverEvent = function () {
    //懸停回調
    WT3DObj.mouseOverCallBack = this.mouseOverCallBack;
    //進入回調
    WT3DObj.mouseOverInCallBack = this.mouseOverInCallBack;
    //離開回調
    WT3DObj.mouseOverLeaveCallBack = this.mouseOverLeaveCallBack;
    //懸停觸發時間長度
    WT3DObj.mouseOverTimeLong = 1000;
    window.onresize = function () {
        modelBussiness.mouseEvent();
    };
}
//懸停
ModelBussiness.prototype.mouseOverCallBack = function (_obj, face) {}
//滑鼠滑入回調
ModelBussiness.prototype.mouseOverInCallBack = function (_obj, face, _objs) {
    console.log(_obj)
    var obj=_obj.name.indexOf("_OBJCREN_")>-1?_obj.parent:_obj;
    if(_obj.name.indexOf("jing_line_")>-1){
        showLightLineData(obj.name);
    }
}
//滑鼠滑出回調
ModelBussiness.prototype.mouseOverLeaveCallBack = function (_obj, face, nowobj) {
    var obj=_obj.name.indexOf("_OBJCREN_")>-1?_obj.parent:_obj;
    if(_obj.name.indexOf("jing_line_")>-1){
        $("#guangLan").hide()
    }
}

View Code

4、雙擊管線，查看管線內部光纖資訊，快速掌握光纖走向與狀態。

  var _this = this;
    if(_obj.name.indexOf('jing_line_')>-1){//顯示詳細線纜
        $("#guangLan").hide()
        _this.inVisibleJing(function () {
            $(".cableImg").css("transform", "scale(1)");
        })

5、展現所有線纜資訊，標註線纜，以及點擊查看線纜資訊。

這裡主要用精靈模型，精靈貼圖的方式。

function createPicModel(param) {
    var models = [{ "objType": "envMaps", "envMaps": [{ "name": "skybox", "imgs": ["../img/3dImg/skyboxs/1/UP.jpg", "../img/3dImg/skyboxs/1/UP.jpg", "../img/3dImg/skyboxs/1/UP.jpg", "../img/3dImg/skyboxs/1/UP.jpg", "../img/3dImg/skyboxs/1/UP.jpg", "../img/3dImg/skyboxs/1/UP.jpg"] }, { "name": "skybox2", "imgs": ["../img/3dImg/water.jpg", "../img/3dImg/water.jpg", "../img/3dImg/water.jpg", "../img/3dImg/water.jpg", "../img/3dImg/water.jpg", "../img/3dImg/water.jpg"] }] }, { "show": true, "showHelper": true, "uuid": "", "name": "DirectionalLight_8", "objType": "DirectionalLight", "shadowCameraNear": 1, "shadowCameraFar": 1, "shadowCameraLeft": 0, "shadowCameraRight": 0, "shadowCameraTop": 0, "shadowCameraBottom": 0, "shadowMapWidth": 1024, "shadowMapHeight": 1024, "distance": 5000, "targetName": "floor", "intensity": 1, "color": 16775651, "castShadow": true, "position": { "x": 4222.947, "y": 4379.619, "z": 2859.101 }, "showSortNub": 8, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "shadowCameraFov": null, "decay": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }];
 
    if (param.showBack) {
        models.push({ "show": true, "uuid": "", "name": "back", "objType": "cube2", "length": 100000, "width": 100000, "height": 1, "x": param.centerx, "y": -100, "z": param.centerz, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 2851238, "side": 1, "opacity": 1, "imgurl": (param.showBackImg ? param.showBackImg : "../../img/3dImg/bg201.png"), "repeatx": true, "width": 200, "repeaty": true, "height": 200 }, "skin_down": { "skinColor": 1259338, "side": 1, "opacity": 1, "imgurl": (param.showBackImg ? param.showBackImg : "../../img/3dImg/bg201.png"), "repeatx": true, "width": 200, "repeaty": true, "height": 200 }, "skin_fore": { "skinColor": 1259338, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 1259338, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 1259338, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 1259338, "side": 1, "opacity": 1 } } }, "showSortNub": 10, "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 });
    }
    if (param.width && param.length) {
        models.push({ "show": true, "uuid": "", "name": "floor", "objType": "cube2", "length": param.width, "width": param.length, "height": 1, "x": param.centerx, "y": 0, "z": param.centerz, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 2440013, "materialType": "Phong", "side": 1, "opacity": 0.8, "envMap": { "name": "skybox", "reflectivity": 0.1, "refractionRatio": "", "combine": "" } }, "skin_down": { "skinColor": 4243455, "side": 1, "opacity": 0.5 }, "skin_fore": { "skinColor": 4243455, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 4243455, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 4243455, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 4243455, "side": 1, "opacity": 1 } } }, "showSortNub": 100, "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 })
    }
    if (param.builds && param.builds.length > 0) {
        $.each(param.builds, function (_index, _obj) {
            for (var i = 1; i <= _obj.floors; i++) {
                var points = [];
                if (_obj.shape && _obj.shape.length > 0) {
                    $.each(_obj.shape, function (_sindex, _sobj) {
                        _sobj.type = "nomal";
                        points.push(_sobj);
                    });
                } else {
                    points = [{ "x": (0 - _obj.width / 2), "y": (0 - _obj.length / 2), "type": "nomal" }, { "x": (0 - _obj.width / 2), "y": (_obj.length / 2), "type": "nomal" }, { "x": (_obj.width / 2), "y": (_obj.length / 2), "type": "nomal" }, { "x": (_obj.width / 2), "y": (0 - _obj.length / 2), "type": "nomal" }]
                }
                console.log(points);
                if (i == _obj.floors) {
                    models.push({ "show": true, "uuid": "", "name": "parkbuild_" + _obj.name + "_f_" + i, "objType": "ExtrudeGeometry", "position": { "x": _obj.x, "y": 151 * (i - 1), "z": _obj.y }, "style": { "skinColor": 16711680, "skin": { "skin_up": { "skinColor": 6992593, "materialType": "Phong", "side": 2, "opacity": 0.8, "imgurl": "../../img/3dImg/wall/top3.jpg", "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.01, "envMap": { "name": "skybox", "reflectivity": 0.4, "refractionRatio": 0.8, "combine": "" } }, "skin_down": { "skinColor": 16711680, "materialType": "Phong", "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 13099775, "side": 2, "materialType": "Phong", "opacity": 0.65, "imgurl": "../../img/3dImg/wall/inner-wall11.jpg", "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.004, "envMap": { "name": "skybox", "reflectivity": 0.8, "refractionRatio": 0.8, "combine": "" } } } }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": points, "holes": [] }, "extrudeSettings": { "amount": 150, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 800 + i, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null })
                } else {
                    models.push({ "show": true, "uuid": "", "name": "parkbuild_" + _obj.name + "_f_" + i, "objType": "ExtrudeGeometry", "position": { "x": _obj.x, "y": 151 * (i - 1), "z": _obj.y }, "style": { "skinColor": 16711680, "skin": { "skin_up": { "skinColor": 6543871, "materialType": "Phong", "side": 1, "opacity": 0.6 }, "skin_down": { "skinColor": 16711680, "materialType": "Phong", "side": 1, "opacity": 1 }, "skin_side": { "skinColor": 13099775, "side": 2, "materialType": "Phong", "opacity": 0.65, "imgurl": "../../img/3dImg/wall/inner-wall11.jpg", "repeatx": true, "width": 0.01, "repeaty": true, "height": 0.004, "envMap": { "name": "skybox", "reflectivity": 0.8, "refractionRatio": 0.8, "combine": "" } } } }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": points, "holes": [] }, "extrudeSettings": { "amount": 150, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 800 + i, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null })
                }
            }
        });
    }
    return models;
}

View Code

6、雙擊線纜，查看線纜內的光纖數據資訊。

7、標註井深與管深。便於施工與土建規避。知道深度，能有效輔助運維人員下井準備，而且再土建施工時，能有效規避風險，不會有挖斷線纜情況發生。

程式碼實現：

//顯示管道
ModelBussiness.prototype.showGD = function (cb) {
    this.hideDistance()
    var guandao = WT3DObj.commonFunc.findObject("yqgx_guandao");
    guandao.position.y =0;
    guandao.visible = true;
    WT3DObj.commonFunc.changeObjsOpacity([guandao], 0.1, 1, 500, function () {
       cb&&cb()
    });
}
//隱藏管道
ModelBussiness.prototype.hideGD = function (cb) {
    var guandao = WT3DObj.commonFunc.findObject("yqgx_guandao");
    WT3DObj.commonFunc.changeObjsOpacity([guandao], 1, 0.1, 500, function () {
        guandao.position.y = -100000;
        guandao.visible = false;
        cb&&cb()
    });
}

// 顯示深度
ModelBussiness.prototype.showDeep=function(cb){
    modelBussiness.showDistance()
    // 快取相機位置
    this.cameraPostion_cache=JSON.parse(JSON.stringify(WT3DObj.getCameraPosition()));
    this.cameraTarget_cache=JSON.parse(JSON.stringify(WT3DObj.getCameraTarget()));
    var position={x: -520.4091455366863, y: 144.35504820242926, z: 627.9302907417292};
    var positionTarget={x: -263.56663925875796, y: -150.20066997406482, z: 240.69791289652335};
    WT3DObj.commonFunc.changeCameraPosition(position,positionTarget,1000,function(){cb&&cb()})
}
//隱藏深度
ModelBussiness.prototype.hideDeep = function (cb) {
    var yuanqu=WT3DObj.commonFunc.findObject(["zysjzx_yuanqu_7"]);
    WT3DObj.commonFunc.changeObjsOpacity([yuanqu],0.1,1,500,function(){
        modelBussiness.hideDistance()
        WT3DObj.commonFunc.findObject(["backGround"]).visible=true;
        WT3DObj.commonFunc.changeCameraPosition(roomConfig.cameraPostion,roomConfig.cameraTarget,1000)
        cb&&cb()
    })
}

// 顯示井深、管道深尺寸標註
ModelBussiness.prototype.showDistance=function(){
    var that=this;
    WT3DObj.commonFunc.findObject("backGround").visible=false;
    WT3DObj.commonFunc.findObject("zysjzx_yuanqu_7").visible=false;
    WT3DObj.commonFunc.changeObjsOpacity(this.m_shenduModels,0.2,1,1000,function(){
        for(var i=0;i<that.m_shenduModels.length;i++){
            that.m_shenduModels[i].visible=true;
        }
    })
}
// 隱藏井深、管道深尺寸標註
ModelBussiness.prototype.hideDistance=function(){
    WT3DObj.commonFunc.findObject("backGround").visible=true;
    WT3DObj.commonFunc.findObject("zysjzx_yuanqu_7").visible=true;
    for(var i=0;i<this.m_shenduModels.length;i++){
        this.m_shenduModels[i].visible=false;
    }
}

8、線纜檢索。能夠根據線纜屬性，快熟定位查看線纜走勢與資訊。

ModelBussiness.prototype.showAllFloorLinesModel = function (callBack) {
    var _this = this;
    this.openFloors(function () {
        if (!_this.FloorLines) {
            var linesname = [];

            for (var i = 1; i <= 3; i++) {
                linesname.push("zb_f" + i + "_H1xi");
                linesname.push("zb_f" + i + "_H2xi");
                linesname.push("zb_f" + i + "_Ixi");
                linesname.push("zb_f" + i + "_H1cu");
                linesname.push("zb_f" + i + "_H2cu");
                linesname.push("zb_f" + i + "_Icu");
        }
        _this.FloorLines = WT3DObj.commonFunc.findObjectsByNames(linesname);
        }
        var outlines = [];
        if (_this.FloorLines.length > 0) {
            $.each(_this.FloorLines, function (_index, _obj) {
                _obj.visible = true;
                if (_obj.name.indexOf("cu") >= 0) {
                    outlines.push(_obj);
                }
            });
        }
        var vmodes = [];
        $.each(WT3DObj.scene.children, function (_index, _obj) {
            if (_obj.name.indexOf("r1_11_1") >= 0 || _obj.name.indexOf("r1_11_2") >= 0 ) {
                vmodes.push(_obj);
            }
        });
        vmodes = vmodes.concat(_this.FloorLines);
        _this.VitureAllFloors(function () {
            WT3DObj.commonFunc.changeObjsOpacity(vmodes, 0.1, 1, 100, function () {
                WT3DObj.commonFunc.changeObjsOpacity(outlines, 1, 0.1, 500, function () {
                    if (callBack) {
                        callBack();
                    }
                });
            });
        });
    })
}



ModelBussiness.prototype.showAllFloorOutLinesModel = function (callBack) {
    var _this = this;
    this.openFloors(function () {


        if (!_this.FloorLines) {
            var linesname = [];

            for (var i = 1; i <= 3; i++) {
                linesname.push("zb_f" + i + "_H1xi");
                linesname.push("zb_f" + i + "_H2xi");
                linesname.push("zb_f" + i + "_Ixi");
                linesname.push("zb_f" + i + "_H1cu");
                linesname.push("zb_f" + i + "_H2cu");
                linesname.push("zb_f" + i + "_Icu");
            }
            _this.FloorLines = WT3DObj.commonFunc.findObjectsByNames(linesname);
        }
        var outlines = [];
        if (_this.FloorLines.length > 0) {
            $.each(_this.FloorLines, function (_index, _obj) {

                if (_obj.name.indexOf("cu") >= 0) {
                    _obj.visible = true;
                    outlines.push(_obj);
                }
            });
        }
        var vmodes = [];
        $.each(WT3DObj.scene.children, function (_index, _obj) {
            if (_obj.name.indexOf("r1_11_1") >= 0 || _obj.name.indexOf("r1_11_2") >= 0 || _obj.name.indexOf("zb_f1_jigui") >= 0) {
                vmodes.push(_obj);
            }
        });
        vmodes = vmodes.concat(_this.FloorLines);
        _this.VitureAllFloors(function () {
            WT3DObj.commonFunc.changeObjsOpacity(vmodes, 0.1, 1, 100, function () {
                WT3DObj.commonFunc.changeObjsOpacity(outlines, 0.1, 1, 500, function () {
                    if (callBack) {
                        callBack();
                    }
                });
            });
        });
    })
}

9、設備檢索，埠檢索，能快速定位到具體設備。查看設備資訊狀態，位置資訊等。

主要思路：

//搜索
ModelBussiness.prototype.showPostionState = false;
ModelBussiness.prototype.showPosition = function (cabid, serverid, portId) {
    var _this = this;
    if (window.location.href.indexOf("index.html") >= 0) {
        var serchParam = cabid + "_search_" + serverid;
        if (portId) {
            serchParam += "_search_" + portId;
        }
        _this.dbClickSelect(WT3DObj.commonFunc.findObject("build_1"),null, null, serchParam);
    }
    if (window.location.href.indexOf("floor.html")>=0) {
        WT3DObj.commonFunc.flashObjsGradualByName(["zb_3f1_546", "zb_3f2_1320"], "floor3_flash1", "000000", "0000ff", 7, 1000, 10, 0);
        setTimeout(function () {
            var serchParam = cabid + "_search_" + serverid;
            if (portId) {
                serchParam += "_search_" + portId;
            }
            _this.dbClickSelect(WT3DObj.commonFunc.findObject("zb_3f1_546"),null, null, serchParam);
        }, 2000);
    }
}
// 隱藏所有模型
ModelBussiness.prototype.cacheAllModels = function(cb){
    this.m_allNames=[].concat(this.m_yuanquNames,this.m_guandaoNames,this.m_xianlanNames,this.m_shenduNames,this.m_buildInfoNames)
    if(!this.m_allModels.length){
        var models=WT3DObj.scene.children
        for(var i=0;i<models.length;i++){
            var item=models[i];
            if(this.m_yuanquNames.indexOf(item.name)>-1){this.m_yuanquModels.push(item)}
            if(this.m_guandaoNames.indexOf(item.name)>-1){this.m_guandaoModels.push(item)}
            if(this.m_xianlanNames.indexOf(item.name)>-1){this.m_xianlanModels.push(item)}
            if(this.m_shenduNames.indexOf(item.name)>-1){this.m_shenduModels.push(item)}
            if(this.m_buildInfoNames.indexOf(item.name)>-1){this.m_buildInfoModels.push(item)}
        }
        this.m_allModels=[].concat(this.m_yuanquModels,this.m_guandaoModels,this.m_xianlanModels,this.m_shenduModels,this.m_buildInfoModels)
    }
}

10、電路檢索，線纜中包含很多電路，支援電路檢索，能快速定位相應的電路。

主要程式碼：

//隱藏顯示線
ModelBussiness.prototype.Lines = null;
ModelBussiness.prototype.hideAllLinesModels = function (cb) {
    var _this = this;
    WT3DObj.commonFunc.changeObjsOpacity(this.m_xianlanModels, 1, 0.1, 500, function () {
        $.each(_this.m_xianlanModels, function (_index, _obj) {
            _obj.visible = false;
            _obj.position.y=-1000000;
        });
        cb&&cb()
    });
}
ModelBussiness.prototype.showAllLineModels = function (cb) {
    var line = [];
    $.each(this.m_xianlanModels, function (_index, _obj) {
        _obj.visible = true;
        _obj.position.y=0;
        if (_obj.name.indexOf("cuxian")>0) {
            line.push(_obj);
        }
    })
    WT3DObj.commonFunc.changeObjsOpacity(this.m_xianlanModels, 0.1, 1, 500, function () {
        // WT3DObj.commonFunc.changeObjsOpacity(line, 1, 1, 500, function () {
            cb&&cb()
        // });
    });
}
ModelBussiness.prototype.showLines = function(callback){
    var guandao=WT3DObj.commonFunc.findObject('yqgx_guandao');
    var backGround=WT3DObj.commonFunc.findObject('backGround');
    guandao.position.y=-1000000;
    backGround.position.y=-1000000;
    $.each(this.m_xianlanModels, function (_index, _obj) {
        _obj.visible = true;
        if (_obj.name.indexOf("cuxian")>0) {
            _obj.position.y=0;
            // if(_obj.resourcePosition){
            //     _obj.position.y=_obj.resourcePosition.y;
            // }
        }
    })
    WT3DObj.commonFunc.changeObjsOpacity(this.m_xianlanModels, 0.1, 1, 500, function () {
    });
}
//虛化某一根線
ModelBussiness.prototype.visLine = function (name, callBack) {
    if (!this.Lines) {
        this.Lines = WT3DObj.commonFunc.findObjectsByNames(
            ["yqgx_cuxian1_11", "yqgx_cuxian2_15", "yqgx_cuxian3_19", "yqgx_cuxian4_23", "yqgx_cuxian5_27", "yqgx_cuxian6_31", "yqgx_cuxian7_35", "yqgx_cuxian8_39", "yqgx_cuxian9_46", "yqgx_cuxian10_50", "yqgx_xixian1_54", "yqgx_xixian2_54", "yqgx_xixian3_62", "yqgx_xixian4_66", "yqgx_xixian5_70", "yqgx_xixian6_72", "yqgx_xixian7_76", "yqgx_xixian8_80", "yqgx_xixian9_86", "yqgx_xixian10_92"]);
    }
    var line = [];
    $.each(this.Lines, function (_index, _obj) {
        if (_obj.name == name) {
            line.push(_obj);
        }
    })
    WT3DObj.commonFunc.changeObjsOpacity(line,1, 0.5, 500, function () {
        if (callBack) {
            callBack();
        }
    });
}
//顯示單根線
ModelBussiness.prototype.showSingleLines = function (name,callBack) {
    if (!this.Lines) {
        this.Lines = WT3DObj.commonFunc.findObjectsByNames(
            ["yqgx_cuxian1_11", "yqgx_cuxian2_15", "yqgx_cuxian3_19", "yqgx_cuxian4_23", "yqgx_cuxian5_27", "yqgx_cuxian6_31", "yqgx_cuxian7_35", "yqgx_cuxian8_39", "yqgx_cuxian9_46", "yqgx_cuxian10_50", "yqgx_xixian1_54", "yqgx_xixian2_54", "yqgx_xixian3_62", "yqgx_xixian4_66", "yqgx_xixian5_70", "yqgx_xixian6_72", "yqgx_xixian7_76", "yqgx_xixian8_80", "yqgx_xixian9_86", "yqgx_xixian10_92"]);
    }
    var line = [];
    $.each(this.Lines, function (_index, _obj) {
        _obj.position.y=-1000000;
        if (_obj.name == name) {
            line.push(_obj);
            _obj.visible = true;
            _obj.position.y=0;
        }
    })
    WT3DObj.commonFunc.changeObjsOpacity(line, 0.3, 1, 500, function () {
        if (callBack) {
            callBack();
        }
    });
}