经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
webgl(three.js)实现室内定位,楼宇bim、实时定位三维可视化解决方案
来源：cnblogs　　作者：魂断蓝桥666　　时间：2019/8/15 13:07:39　　对本文有异议

（写在前面，谈谈物联网展会）上次深圳会展中心举行物联网展会，到了展会一看，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、首先是场景搭建，搭建需要定位的三维场景。这里我们随便做了一栋大楼，作为需要定位的场景。

下图是gif图效果，（为了上传到文章里，特意做了帧数删减）

模型代码：

  1. [{"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.2、显示单个楼层实时定位效果。这里我们动态添加定位标签。标注标签。在右下角显示标签信息，规避场景内凌乱。

楼层切换效果

逻辑代码：　

  1.    if (_this.build1CurrentShowFlow == 8&&_this.currentShowLocationState == 1) {
  2.              _this.closeLocation(doshowAnimiation);
  3.     } else {
  4.              doshowAnimiation();
  5.       }
  6.      function doshowAnimiation(){
  7.     WT3DObj.commonFunc.changeCameraPosition(
  8.         { x: -3160 + (8 - floornub) * 300, y: 5645 - (8 - floornub) * 300, z: -3292 + (8 - floornub) * 300 },
  9.         { x: 80, y: 23, z: 155 },
  10.         500,
  11.        function () {
  12.                 if (_this.build1CurrentShowFlow > floornub)
  13.                 {
  14.                     var start = _this.build1CurrentShowFlow;
  15.                     _this.build1CurrentShowFlow = floornub;
  16.                     for (var i = start; i >= floornub + 1; i--) {
  17.                         (function (floorindex) {
  18.                             setTimeout(function () {
  19.                                 var movemodesname = "cM_dingweifloor_" + floorindex;
  20.                                 var movemodel = _this.outFloorModels[movemodesname];
  21.                                 if (!movemodel.oldposition) {
  22.                                     movemodel.oldposition = {
  23.                                         x: movemodel.position.x,
  24.                                         y: movemodel.position.y,
  25.                                         z: movemodel.position.z
  26.                                     };
  27.                                 }
  28.                                 var moveToPositon = movemodel.position.y + 5000;
  29.                                 new TWEEN.Tween(movemodel.position).to({
  30.                                     y: moveToPositon
  31.                                 }, 1000).onComplete(function () {
  32.                                     movemodel.visible = false;
  33.                                     if (floorindex == floornub + 1) {
  34.                                         if (_this.currentShowLocationState == 1) {
  35.                                             if (floornub < 8) {
  36.                                                 var showTxt = "";
  37.                                                 showTxt += _this.addFloorMarks(floornub);
  38.                                                 $("#showText").html(showTxt);
  39.                                             } else {
  40.                                                 _this.showLocation();
  41.                                             }
  42.                                         }
  43.                                     }
  44.                                 }).start();
  45.                             }, 500 * (start+1 - floorindex));
  46.                         })(i);
  47.                     }
  49.                 }
  50.                 else if (_this.build1CurrentShowFlow < floornub)
  51.                 {
  52.                     var start = _this.build1CurrentShowFlow+1;
  53.                     _this.build1CurrentShowFlow = floornub;
  54.                     for (var i = start; i <= floornub ; i++) {
  55.                         (function (floorindex) {
  56.                             setTimeout(function () {
  57.                                 var movemodesname = "cM_dingweifloor_" + floorindex;
  58.                                 var movemodel = _this.outFloorModels[movemodesname];
  59.                                 var moveToPositon = movemodel.oldposition.y;
  60.                                 movemodel.visible = true;
  61.                                 new TWEEN.Tween(movemodel.position).to({
  62.                                     y: moveToPositon
  63.                                 }, 1000).onComplete(function () {
  64.                                     if (floorindex == floornub) {
  65.                                     setTimeout(function () {
  66.                                         if (_this.currentShowLocationState == 1) {
  67.                                             if (floornub < 8) {
  68.                                                 var showTxt = "";
  69.                                                 showTxt += _this.addFloorMarks(floornub);
  70.                                                 $("#showText").html(showTxt);
  71.                                             } else {
  72.                                                 _this.showLocation();
  73.                                             }
  74.                                         }
  75.                                     }, 150 * floornub - start);
  76.                                     }
  79.                                 }).start();
  80.                             }, 500 * (floorindex-start + 1));
  81.                         })(i);
  82.                     }
  84.                 }
  85.                 
  86.        });
  87.      }

　　

单楼层显示定位效果

‘’

动态标签模型代码：

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

单楼层显示定位代码：

  1. ModelBusiness.prototype.marks = [];
  2. ModelBusiness.prototype.addMark = function (name, position, size, picurl,showNub,Txtcolor) {
  3.     if (this.marks.indexOf("dmark_" + name) >= 0) {
  4.         modelBusiness.moveMark("dmark_" + name, position, 1000);
  5.         return;
  6.     }
  7.     this.marks.push("dmark_" + name);
  8.     var timestrik = new Date().getTime();
  10.     var showHtml = "hello";
  11.     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 }];
  14.     //[{ "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 },
  15.     //    { "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 }];
  16.     WT3DObj.commonFunc.loadModelsByJsons(local, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);
  18. }
  19. ModelBusiness.prototype.addMarkTxt = function (showHtml, _obj, buildNub, position, closeFunc) {
  20.     var timestrik = new Date().getTime();
  21.     var _obj = {
  22.         uuid: 'daf4',
  23.         name: "showMark",
  24.         showSortNub: 1,
  25.         objType: "DivTagging",
  26.         tagType: 'sprite',//plane/sprite
  27.         elementParam: {
  28.             cssid: "style_divtest",
  29.             css: "",
  30.             marginValue: {
  31.                 x: 0,
  32.                 y: 0,
  33.                 z: 0
  34.             },
  35.             divid: 'divtest',
  36.             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 >",
  37.         },
  38.         position: { x: position.x, y: position.y + 500, z: position.z },
  39.         scale: { x: 8, y: 8, z: 1 },
  40.         rotation: [],
  41.     }
  42.     var ccd = WT3DObj.addDivTagging(WT3DObj, _obj);
  43.     ccd.renderOrder = 1;
  44.     WT3DObj.addObject(ccd);
  45. }

3.3、显示整体楼层实时定位效果。

 

gif录屏图

　　实现代码：

  1. ModelBusiness.prototype.getAllFloorBuild = function () {
  2.     var _this = this;
  3.     if (!_this.outFloorModels) {
  4.         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"];
  5.         var models = WT3DObj.commonFunc.findObjectsByNames(modelNames);
  6.         _this.outFloorModels = {};
  7.         $.each(models, function (_index, _obj) {
  8.             _this.outFloorModels[_obj.name] = _obj;
  9.         });
  10.     }
  11.     return _this.outFloorModels;
  12. }
  13. //floornub:楼层编号
  14. ModelBusiness.prototype.showFloor = function ( floornub) {
  15.     var _this = this;
  16.      _this.getAllFloorBuild();
  17.      _this.removeAllMark();
  19.     if (_this.build1CurrentShowFlow == 8&&_this.currentShowLocationState == 1) {
  20.              _this.closeLocation(doshowAnimiation);
  21.     } else {
  22.              doshowAnimiation();
  23.       }
  24.      function doshowAnimiation(){
  25.     WT3DObj.commonFunc.changeCameraPosition(
  26.         { x: -3160 + (8 - floornub) * 300, y: 5645 - (8 - floornub) * 300, z: -3292 + (8 - floornub) * 300 },
  27.         { x: 80, y: 23, z: 155 },
  28.         500,
  29.        function () {
  30.                 if (_this.build1CurrentShowFlow > floornub)
  31.                 {
  32.                     var start = _this.build1CurrentShowFlow;
  33.                     _this.build1CurrentShowFlow = floornub;
  34.                     for (var i = start; i >= floornub + 1; i--) {
  35.                         (function (floorindex) {
  36.                             setTimeout(function () {
  37.                                 var movemodesname = "cM_dingweifloor_" + floorindex;
  38.                                 var movemodel = _this.outFloorModels[movemodesname];
  39.                                 if (!movemodel.oldposition) {
  40.                                     movemodel.oldposition = {
  41.                                         x: movemodel.position.x,
  42.                                         y: movemodel.position.y,
  43.                                         z: movemodel.position.z
  44.                                     };
  45.                                 }
  46.                                 var moveToPositon = movemodel.position.y + 5000;
  47.                                 new TWEEN.Tween(movemodel.position).to({
  48.                                     y: moveToPositon
  49.                                 }, 1000).onComplete(function () {
  50.                                     movemodel.visible = false;
  51.                                     if (floorindex == floornub + 1) {
  52.                                         if (_this.currentShowLocationState == 1) {
  53.                                             if (floornub < 8) {
  54.                                                 var showTxt = "";
  55.                                                 showTxt += _this.addFloorMarks(floornub);
  56.                                                 $("#showText").html(showTxt);
  57.                                             } else {
  58.                                                 _this.showLocation();
  59.                                             }
  60.                                         }
  61.                                     }
  62.                                 }).start();
  63.                             }, 500 * (start+1 - floorindex));
  64.                         })(i);
  65.                     }
  67.                 }
  68.                 else if (_this.build1CurrentShowFlow < floornub)
  69.                 {
  70.                     var start = _this.build1CurrentShowFlow+1;
  71.                     _this.build1CurrentShowFlow = floornub;
  72.                     for (var i = start; i <= floornub ; i++) {
  73.                         (function (floorindex) {
  74.                             setTimeout(function () {
  75.                                 var movemodesname = "cM_dingweifloor_" + floorindex;
  76.                                 var movemodel = _this.outFloorModels[movemodesname];
  77.                                 var moveToPositon = movemodel.oldposition.y;
  78.                                 movemodel.visible = true;
  79.                                 new TWEEN.Tween(movemodel.position).to({
  80.                                     y: moveToPositon
  81.                                 }, 1000).onComplete(function () {
  82.                                     if (floorindex == floornub) {
  83.                                     setTimeout(function () {
  84.                                         if (_this.currentShowLocationState == 1) {
  85.                                             if (floornub < 8) {
  86.                                                 var showTxt = "";
  87.                                                 showTxt += _this.addFloorMarks(floornub);
  88.                                                 $("#showText").html(showTxt);
  89.                                             } else {
  90.                                                 _this.showLocation();
  91.                                             }
  92.                                         }
  93.                                     }, 150 * floornub - start);
  94.                                     }
  97.                                 }).start();
  98.                             }, 500 * (floorindex-start + 1));
  99.                         })(i);
  100.                     }
  102.                 }
  103.                 
  104.        });
  105.      }
  106. }
  108. ModelBusiness.prototype.dbClickFloor = function (clickObj) {
  109.     console.log(clickObj);
  110.     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"];
  111.     if (clickObj.name.indexOf("cM_dingweifloor_") >= 0) {
  112.         this.showFloor( parseInt(clickObj.name.replace("cM_dingweifloor_", "")));
  113.     }
  114. }
View Code

 

 

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

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

技术交流 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管理系统——第四课（炫酷版一）

原文链接：http://www.cnblogs.com/yeyunfei/p/11153723.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号