欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

程序员文章站 2022-06-24 12:49:13
3D定位、三维室内定位、3d建筑,3d消防,消防演习模拟,3d库房,3d档案室,3d密集架,webGL,threejs,3d机房,bim管理系统 ......

(写在前面,谈谈物联网展会)上次深圳会展中心举行物联网展会,到了展会一看,80%以上的物联网应用都是在搞rfid,室内定位,我一度怀疑物联网落地方案的方向局限性与市场导向,后来多方面了解才明白,展会上看到的不能体现目前物联网最前沿最广泛的应用,很多大的企业与技术前沿企业没有参与这样的展会,一是不屑于参加,二是展会带来的市场价值实在太少太少,展会最大的价值就是让同行之间再抄一抄(国内大部分企业基本这样,互相山寨),看看各家都做了啥,所以,展会上我们所看到的往往不是企业最核心最好的东西,不能体现当前国内物联网最前沿的技术与发展状况。

前言:gps、北斗系统将全球地图导航定位发展到了极致的程度,但精确精度还不能达到两米以内, 如何解决解决室内这最后几米的定位问题,国内外各大厂家各出奇招。因为有市场需求所以有资本驱动,室内精确定位在仓库,档案馆,*,医院,办公,人员,以及各种高价值重要资产等定位场景中都要这样的需求。室内定位设想应用于人员的管理、机器人仿生、被标签物的定位追踪等等。如果室内定位能够解决精度,延迟,容量三方面瓶颈,其市场应用价值不可限量

技术目标:将非可视内容的可视化呈现,更直观的掌控数据情况。

一、市场背景与领域:

  1、信息采集定位:打卡、签注、活动范围圈定、电子围栏、工作中日常监控等等。

  2、安防监控定位:安防领域比较广泛,包括了消防、监控、维保安保等等,这些具体行业划分方面对精准定位可视化需求都比较强烈。保护人民生命财产、监控消防英雄实时位置这些都是有待解决的问题。

  3、工业4.0:这是最新的工业诉求,真正落地的,目前还没有几家,其主要目标就是通过室内定位技术让整个生产流程实现可视化,可追踪化。

  4、*、医院、机场领域、商场。定位可视化需求也比较强烈

    *:防止越狱,防止自杀等。每个犯人手上上一个不可拆卸的手环,只要系统检查到有人某处停留时间过长,系统就会报警。

    医院:为患者提供快捷的寻址巡诊服务。

    机场、商场:为客人,旅客提供方便快捷的定位导航服务,为机场提供可疑物品贴标签定位方案。

  5、仓库资产定位

  6、无人机、物流、快递派送定位

  7、app应用服务,适当位置推送适当服务。

  8、游戏场景,vr应用

 等等,随便想想就这么多,看来市场还是比较有前景的。

二、技术方案分析:

  当前市面上室内定位技术主要分为下列几种:

  1、wifi探针+摄像机智能分析技术:这种技术利用wifi探针撤出大体位置在用摄像机智能分析,分析出精确位置,优点是精确度高,缺点是成本高,摄像机死角多。

    

  2、无源rfid+读卡器技术:这种技术是目前市面上用的比较多的技术,比如超市,仓储,优点是成本低,缺点是没什么精度要求 ,精度范围 是房间内

 

  3、低功耗有源rfid+读卡器基地器+智能分析:这种利用有源发射信号的方式定位,精确多虽然高 但是读卡器多的情况下会出现误报,乱报情况,这就需要智能分析,数据清洗。目前比较看好的方案,成本低,精确度一米以内。

  4、蓝牙信号强度探测分析:精確的高,但是藍牙信號受阻擋,受干扰比较严重。这也是展会中看到的方案。

  5、定位地毯+有源信号卡(手环):这是精确度非常高的方案,但是成本也很高。要在室内铺上一层定位弱电地毯。

  6、红外探测技术、超宽带技术、超声波技术:和蓝牙的方案差不多。

 

三、三维可视化显示

我们还是和前面的课程( 使用webgl(three.js)搭建一个3d智慧园区、3d建筑,3d消防模拟,web版3d,bim管理系统——第四课(炫酷版一))一样选择webgl无插件解决方案,直观体现定位可视化。

3.1、首先是场景搭建,搭建需要定位的三维场景。这里我们随便做了一栋大楼,作为需要定位的场景。

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

下图是gif图效果,(为了上传到文章里,特意做了帧数删减)

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

模型代码:

[{"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}]

 

 

3.2、显示单个楼层实时定位效果。这里我们动态添加定位标签。标注标签。在右下角显示标签信息,规避场景内凌乱。

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

楼层切换效果

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

逻辑代码: 

   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);
                    }

                }
                
       });
     }

  

单楼层显示定位效果

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案‘’

动态标签模型代码:

 [{ "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.3、显示整体楼层实时定位效果。

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

 

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

gif录屏图

webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

  实现代码:

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_", "")));
    }
}

 

 

由于篇幅原因,这一课先介绍到这里 

后面我将继续讲解用webgl 建立 3d园区 3d智慧小区 、室内定位、桥梁隧道三维应用炫酷效果等等

技术交流 1203193731@qq.com

交流微信:

    webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案

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

 

 

其它相关文章:

使用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)搭建一个3d智慧园区、3d建筑,3d消防模拟,web版3d,bim管理系统——第四课(炫酷版一)