webgl(three.js)實現室內定位,樓宇bim、實時定位三維可視化解決方案——第五課

時間 2019-11-20

標籤 webgl three.js 實現室內定位樓宇 bim 實時三維可視化解決方案第五欄目 JavaScript 简体版

原文原文鏈接

（寫在前面，談談物聯網展會）上次深圳會展中心舉行物聯網展會，到了展會一看，80%以上的物聯網應用都是在搞RFID，室內定位，我一度懷疑物聯網落地方案的方向侷限性與市場導向，後來多方面瞭解才明白，展會上看到的不能體現目前物聯網最前沿最普遍的應用，不少大的企業與技術前沿企業沒有參與這樣的展會，一是不屑於參加，二是展會帶來的市場價值實在太少太少，展會最大的價值就是讓同行之間再抄一抄（國內大部分企業基本這樣，互相山寨），看看各家都作了啥，因此，展會上咱們所看到的每每不是企業最核心最好的東西，不能體現當前國內物聯網最前沿的技術與發展情況。css

前言：GPS、北斗系統將全球地圖導航定位發展到了極致的程度，但精確精度還不能達到兩米之內，如何解決解決室內這最後幾米的定位問題，國內外各大廠家各出奇招。由於有市場需求因此有資本驅動，室內精肯定位在倉庫，檔案館，監獄，醫院，辦公，人員，以及各類高價值重要資產等定位場景中都要這樣的需求。室內定位設想應用於人員的管理、機器人仿生、被標籤物的定位追蹤等等。若是室內定位可以解決精度，延遲，容量三方面瓶頸，其市場應用價值不可限量html

技術目標：將非可視內容的可視化呈現，更直觀的掌控數據狀況。web

1、市場背景與領域：canvas

　　一、信息採集定位：打卡、簽註、活動範圍圈定、電子圍欄、工做中平常監控等等。微信

　　二、安防監控定位：安防領域比較普遍，包括了消防、監控、維保安保等等，這些具體行業劃分方面對精準定位可視化需求都比較強烈。保護人民生命財產、監控消防英雄實時位置這些都是有待解決的問題。curl

　　三、工業4.0：這是最新的工業訴求，真正落地的，目前尚未幾家，其主要目標就是經過室內定位技術讓整個生產流程實現可視化，可追蹤化。ide

　　四、監獄、醫院、機場領域、商場。定位可視化需求也比較強烈webgl

　　　　監獄：防止越獄，防止自殺等。每一個犯人手上上一個不可拆卸的手環，只要系統檢查到有人某處停留時間過長，系統就會報警。ui

　　　　醫院：爲患者提供快捷的尋址巡診服務。this

　　　　機場、商場：爲客人，旅客提供方便快捷的定位導航服務，爲機場提供可疑物品貼標籤訂位方案。

　　五、倉庫資產定位

　　六、無人機、物流、快遞派送定位

　　七、APP應用服務，適當位置推送適當服務。

　　八、遊戲場景，VR應用

　等等，隨便想一想就這麼多，看來市場仍是比較有前景的。

2、技術方案分析：

　　當前市面上室內定位技術主要分爲下列幾種：

　　一、wifi探針+攝像機智能分析技術：這種技術利用wifi探針撤出大致位置在用攝像機智能分析，分析出精確位置，優勢是精確度高，缺點是成本高，攝像機死角多。

　　二、無源RFID+讀卡器技術：這種技術是目前市面上用的比較多的技術，好比超市，倉儲，優勢是成本低，缺點是沒什麼精度要求，精度範圍是房間內

　　三、低功耗有源RFID+讀卡器基地器+智能分析：這種利用有源發射信號的方式定位，精確多雖然高可是讀卡器多的狀況下會出現誤報，亂報狀況，這就須要智能分析，數據清洗。目前比較看好的方案，成本低，精確度一米之內。

　　四、藍牙信號強度探測分析：精確的高，可是藍牙信號受阻擋，受干擾比較嚴重。這也是展會中看到的方案。

　　五、定位地毯+有源信號卡（手環）：這是精確度很是高的方案，可是成本也很高。要在室內鋪上一層定位弱電地毯。

　　六、紅外探測技術、超寬帶技術、超聲波技術：和藍牙的方案差很少。

3、三維可視化顯示

咱們仍是和前面的課程( 使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課（炫酷版一）)同樣選擇webgl無插件解決方案，直觀體現定位可視化。

3.一、首先是場景搭建，搭建須要定位的三維場景。這裏咱們隨便作了一棟大樓，做爲須要定位的場景。

下圖是gif圖效果，（爲了上傳到文章裏，特地作了幀數刪減）

模型代碼：

[{"show":true,"uuid":"","name":"background","objType":"cube2","length":200000,"width":200000,"height":10,"x":0,"y":-576.444,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bg2.png","repeatx":true,"width":4096,"repeaty":true,"height":4096},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bg2.png"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1},"skin_right":{"skinColor":16777215,"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},{"show":true,"uuid":"","name":"bo_10","objType":"cube2","length":2000,"width":1000,"height":800,"x":10237.738,"y":-139.174,"z":3320.555,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_11","objType":"cube2","length":2000,"width":1000,"height":800,"x":18066.859,"y":-139.174,"z":14929.469,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_7","objType":"cube2","length":2000,"width":1000,"height":800,"x":-19896.116,"y":-139.174,"z":30779.636,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_8","objType":"cube2","length":2000,"width":1000,"height":800,"x":-18017.483,"y":-139.174,"z":49679.969,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_3","objType":"cube2","length":2000,"width":1000,"height":800,"x":-14248.791,"y":-139.174,"z":2799.724,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_6","objType":"cube2","length":2000,"width":1000,"height":800,"x":-31619.419,"y":-139.174,"z":25782.452,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_12","objType":"cube2","length":2000,"width":1000,"height":800,"x":20756.568,"y":-139.174,"z":36695.712,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_5","objType":"cube2","length":2000,"width":1000,"height":800,"x":-31619.419,"y":-139.174,"z":2799.724,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_1","objType":"cube2","length":2000,"width":1000,"height":800,"x":-7399.548,"y":-139.174,"z":-2991.478,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down":{"skinColor":589798,"side":1,"opacity":1},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_left":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"},"skin_right":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bf.png"}}},"showSortNub":399,"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},{"show":true,"uuid":"","name":"bo_2","objType":"cube2","length":2000,"width":1000,"height":800,"x":-616.637,"y":-139.174,"z":6943.05,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":1456752,"side":1,"opacity":1},"skin_down": {"width":200,"height":300}}}],"showSortNub":348,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null,"customType1":"","customType2":"","animation":null,"dbclickEvents":null}]

View Code

3.二、顯示單個樓層實時定位效果。這裏咱們動態添加定位標籤。標註標籤。在右下角顯示標籤信息，規避場景內凌亂。

樓層切換效果

邏輯代碼：　

   if (_this.build1CurrentShowFlow == 8&&_this.currentShowLocationState == 1) {
             _this.closeLocation(doshowAnimiation);
    } else { doshowAnimiation(); } function doshowAnimiation(){ WT3DObj.commonFunc.changeCameraPosition( { x: -3160 + (8 - floornub) * 300, y: 5645 - (8 - floornub) * 300, z: -3292 + (8 - floornub) * 300 }, { x: 80, y: 23, z: 155 }, 500, function () { if (_this.build1CurrentShowFlow > floornub) { var start = _this.build1CurrentShowFlow; _this.build1CurrentShowFlow = floornub; for (var i = start; i >= floornub + 1; i--) { (function (floorindex) { setTimeout(function () { var movemodesname = "cM_dingweifloor_" + floorindex; var movemodel = _this.outFloorModels[movemodesname]; if (!movemodel.oldposition) { movemodel.oldposition = { x: movemodel.position.x, y: movemodel.position.y, z: movemodel.position.z }; } var moveToPositon = movemodel.position.y + 5000; new TWEEN.Tween(movemodel.position).to({ y: moveToPositon }, 1000).onComplete(function () { movemodel.visible = false; if (floorindex == floornub + 1) { if (_this.currentShowLocationState == 1) { if (floornub < 8) { var showTxt = ""; showTxt += _this.addFloorMarks(floornub); $("#showText").html(showTxt); } else { _this.showLocation(); } } } }).start(); }, 500 * (start+1 - floorindex)); })(i); } } else if (_this.build1CurrentShowFlow < floornub) { var start = _this.build1CurrentShowFlow+1; _this.build1CurrentShowFlow = floornub; for (var i = start; i <= floornub ; i++) { (function (floorindex) { setTimeout(function () { var movemodesname = "cM_dingweifloor_" + floorindex; var movemodel = _this.outFloorModels[movemodesname]; var moveToPositon = movemodel.oldposition.y; movemodel.visible = true; new TWEEN.Tween(movemodel.position).to({ y: moveToPositon }, 1000).onComplete(function () { if (floorindex == floornub) { setTimeout(function () { if (_this.currentShowLocationState == 1) { if (floornub < 8) { var showTxt = ""; showTxt += _this.addFloorMarks(floornub); $("#showText").html(showTxt); } else { _this.showLocation(); } } }, 150 * floornub - start); } }).start(); }, 500 * (floorindex-start + 1)); })(i); } } }); }

單樓層顯示定位效果

‘’

動態標籤模型代碼：

 [{ "show": true, "uuid": "", "name": "dmark_" + name, "objType": "GroupObj", "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "rotation": [{ "direction": "x", "degree": 0 }], "childrens": [{ "name": "dmark_" + name + "OBJCREN0", "objType": "picIdentification", "size": { "x": size.width, "y": size.height }, "position": { "x": 0, "y": 0, "z": 0 }, "imgurl": picurl, "showSortNub": 3480, "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "name": "dmark_" + name + "OBJCREN1", "objType": "makeTextSprite", "textColor": { "r": Txtcolor.r, "g": Txtcolor.g, "b": Txtcolor.b, "a": 1 }, "message": "" + showNub, "fontsize": 300, "canvasWidth": 400, "canvasHeight": 350, "position": { "x": 0, "y": 64.901, "z": 0 }, "showSortNub": 3481, "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }], "showSortNub": 3480 }];

單樓層顯示定位代碼：

ModelBusiness.prototype.marks = [];
ModelBusiness.prototype.addMark = function (name, position, size, picurl,showNub,Txtcolor) {
    if (this.marks.indexOf("dmark_" + name) >= 0) {
        modelBusiness.moveMark("dmark_" + name, position, 1000);
        return;
    }
    this.marks.push("dmark_" + name);
    var timestrik = new Date().getTime();

    var showHtml = "hello";
    var local = [{ "show": true, "uuid": "", "name": "dmark_" + name, "objType": "GroupObj", "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "rotation": [{ "direction": "x", "degree": 0 }], "childrens": [{ "name": "dmark_" + name + "OBJCREN0", "objType": "picIdentification", "size": { "x": size.width, "y": size.height }, "position": { "x": 0, "y": 0, "z": 0 }, "imgurl": picurl, "showSortNub": 3480, "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "name": "dmark_" + name + "OBJCREN1", "objType": "makeTextSprite", "textColor": { "r": Txtcolor.r, "g": Txtcolor.g, "b": Txtcolor.b, "a": 1 }, "message": "" + showNub, "fontsize": 300, "canvasWidth": 400, "canvasHeight": 350, "position": { "x": 0, "y": 64.901, "z": 0 }, "showSortNub": 3481, "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }], "showSortNub": 3480 }];


    //[{ "name": "dmark_" + name, "objType": "picIdentification", "size": { "x": size.width, "y": size.height }, "position": position, "imgurl": picurl, "showSortNub": 3480, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },
    //    { "name": "dmark_TxtNub_" + name, "objType": "makeTextSprite", "textColor": { "r": 255, "g": 255, "b": 0, "a": 1 }, "message": "001", "fontsize": 100, "canvasWidth": 100, "canvasHeight": 120, "position": { "x": position.x, "y": position.y + 53.904, "z": position.z}, "showSortNub": 5, "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }];
    WT3DObj.commonFunc.loadModelsByJsons(local, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);

}
ModelBusiness.prototype.addMarkTxt = function (showHtml, _obj, buildNub, position, closeFunc) {
    var timestrik = new Date().getTime();
    var _obj = {
        uuid: 'daf4',
        name: "showMark",
        showSortNub: 1,
        objType: "DivTagging",
        tagType: 'sprite',//plane/sprite
        elementParam: {
            cssid: "style_divtest",
            css: "",
            marginValue: {
                x: 0,
                y: 0,
                z: 0
            },
            divid: 'divtest',
            html: "<div id='divtest'><div  style='width:300px;height:200px;background-color:rgba(0,0,0,1);padding:10px;border:1px solid #00ffff;'>" + showHtml + "</div > </div >",
        },
        position: { x: position.x, y: position.y + 500, z: position.z },
        scale: { x: 8, y: 8, z: 1 },
        rotation: [],
    }
    var ccd = WT3DObj.addDivTagging(WT3DObj, _obj);
    ccd.renderOrder = 1;
    WT3DObj.addObject(ccd);
}

3.三、顯示總體樓層實時定位效果。

gif錄屏圖

　　實現代碼：

ModelBusiness.prototype.getAllFloorBuild = function () {
    var _this = this;
    if (!_this.outFloorModels) {
        var modelNames = ["cM_dingweifloor_8", "cM_dingweifloor_7", "cM_dingweifloor_6", "cM_dingweifloor_5", "cM_dingweifloor_4", "cM_dingweifloor_3", "cM_dingweifloor_2", "cM_dingweifloor_1"];
        var models = WT3DObj.commonFunc.findObjectsByNames(modelNames);
        _this.outFloorModels = {};
        $.each(models, function (_index, _obj) {
            _this.outFloorModels[_obj.name] = _obj;
        });
    }
    return _this.outFloorModels;
}
//floornub:樓層編號
ModelBusiness.prototype.showFloor = function ( floornub) {
    var _this = this;
     _this.getAllFloorBuild();
     _this.removeAllMark();

    if (_this.build1CurrentShowFlow == 8&&_this.currentShowLocationState == 1) {
             _this.closeLocation(doshowAnimiation);
    } else {
             doshowAnimiation();
      }
     function doshowAnimiation(){
    WT3DObj.commonFunc.changeCameraPosition(
        { x: -3160 + (8 - floornub) * 300, y: 5645 - (8 - floornub) * 300, z: -3292 + (8 - floornub) * 300 },
        { x: 80, y: 23, z: 155 },
        500,
       function () {
                if (_this.build1CurrentShowFlow > floornub)
                {
                    var start = _this.build1CurrentShowFlow;
                    _this.build1CurrentShowFlow = floornub;
                    for (var i = start; i >= floornub + 1; i--) {
                        (function (floorindex) {
                            setTimeout(function () {
                                var movemodesname = "cM_dingweifloor_" + floorindex;
                                var movemodel = _this.outFloorModels[movemodesname];
                                if (!movemodel.oldposition) {
                                    movemodel.oldposition = {
                                        x: movemodel.position.x,
                                        y: movemodel.position.y,
                                        z: movemodel.position.z
                                    };
                                }
                                var moveToPositon = movemodel.position.y + 5000;
                                new TWEEN.Tween(movemodel.position).to({
                                    y: moveToPositon
                                }, 1000).onComplete(function () {
                                    movemodel.visible = false;
                                    if (floorindex == floornub + 1) {
                                        if (_this.currentShowLocationState == 1) {
                                            if (floornub < 8) {
                                                var showTxt = "";
                                                showTxt += _this.addFloorMarks(floornub);
                                                $("#showText").html(showTxt);
                                            } else {
                                                _this.showLocation();
                                            }
                                        }
                                    }
                                }).start();
                            }, 500 * (start+1 - floorindex));
                        })(i);
                    }

                }
                else if (_this.build1CurrentShowFlow < floornub)
                {
                    var start = _this.build1CurrentShowFlow+1;
                    _this.build1CurrentShowFlow = floornub;
                    for (var i = start; i <= floornub ; i++) {
                        (function (floorindex) {
                            setTimeout(function () {
                                var movemodesname = "cM_dingweifloor_" + floorindex;
                                var movemodel = _this.outFloorModels[movemodesname];
                                var moveToPositon = movemodel.oldposition.y;
                                movemodel.visible = true;
                                new TWEEN.Tween(movemodel.position).to({
                                    y: moveToPositon
                                }, 1000).onComplete(function () {
                                    if (floorindex == floornub) {
                                    setTimeout(function () {
                                        if (_this.currentShowLocationState == 1) {
                                            if (floornub < 8) {
                                                var showTxt = "";
                                                showTxt += _this.addFloorMarks(floornub);
                                                $("#showText").html(showTxt);
                                            } else {
                                                _this.showLocation();
                                            }
                                        }
                                    }, 150 * floornub - start);
                                    }


                                }).start();
                            }, 500 * (floorindex-start + 1));
                        })(i);
                    }

                }
                
       });
     }
}

ModelBusiness.prototype.dbClickFloor = function (clickObj) {
    console.log(clickObj);
    var modelNames = ["cM_dingweifloor_8", "cM_dingweifloor_7", "cM_dingweifloor_6", "cM_dingweifloor_5", "cM_dingweifloor_4", "cM_dingweifloor_3", "cM_dingweifloor_2", "cM_dingweifloor_1"];
    if (clickObj.name.indexOf("cM_dingweifloor_") >= 0) {
        this.showFloor( parseInt(clickObj.name.replace("cM_dingweifloor_", "")));
    }
}