备案控制台
探索云世界
开发者社区 IoT 文章 正文

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

2019-08-15 4698
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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、红外探测技术、超宽带技术、超声波技术：和蓝牙的方案差不多。

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

三、三维可视化显示

我们还是和前面的课程一样选择webgl无插件解决方案，直观体现定位可视化。

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

d1

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

d1

模型代码：

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

d2

楼层切换效果
d3

逻辑代码：　

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

            }
            
   });
 }

　　

单楼层显示定位效果
d3

‘’

动态标签模型代码：

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

gif录屏图
d4

d5
　实现代码：
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 建立 3D园区 3D智慧小区 、室内定位、桥梁隧道三维应用炫酷效果等等

技术交流 1203193731@qq.com

交流微信：

　　　　
800616_20190306111130020_1677299606

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

文章标签：
物联网平台
定位技术
数据可视化
物联网
监控
关键词：
JavaScript定位
webgl JavaScript定位解决方案
相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台，通过云产品流转到函数计算FC，调用钉钉群机器人API，实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品，7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前，请先开通下方两个云产品，让学习更流畅： IoT物联网平台：https://iot.console.aliyun.com/ LinkWAN物联网络管理平台：https://linkwan.console.aliyun.com/service-open
野云飞
目录
相关文章
野云飞
|
6月前
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
野云飞
170 1
漏刻有时
|
9月前
|
JSON 前端开发 JavaScript
javascript：layui实现定位、查询数据以及select筛选的组合功能
javascript：layui实现定位、查询数据以及select筛选的组合功能
漏刻有时
233 0
python兴趣圈
|
1月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本
python兴趣圈
72 0
No8g攻城狮
|
6月前
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）
【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）
No8g攻城狮
125 0
会敲代码的_TT
|
2月前
|
前端开发 JavaScript
前端JavaScript中异步的终极解决方案：async/await
在深入讨论 async/await 之前，我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的，也就是说在任何给定的时间点，只能执行一个操作。然而，对于需要大量时间的操作（例如从服务器获取数据），如果没有适当的管理机制，这种单线程特性可能会导致应用程序的阻塞。为了解决这个问题，JavaScript 引入了回调函数和后来的 Promise，用来管理这些异步操作。
会敲代码的_TT
30 0
前端技术栈
|
3月前
|
监控 前端开发 JavaScript
【面试题】聊聊 js 异步解决方案
【面试题】聊聊 js 异步解决方案
前端技术栈
42 0
陈俊刚
|
3月前
|
前端开发 JavaScript
【JavaScript】异步解决方案的发展历程
JavaScript是一种广泛使用的编程语言，用于开发Web应用程序。在Web开发中，异步编程是一种重要的技术，它允许在执行长时间运行的操作时不阻塞用户界面。随着JavaScript的发展，异步编程解决方案也在不断演进。本文将探讨JavaScript异步解决方案的发展历程、优缺点以及代码示例。
陈俊刚
27 0
漏刻有时
|
9月前
|
JavaScript 前端开发
Javascript用数据替换if或switch的解决方案
Javascript用数据替换if或switch的解决方案
漏刻有时
55 0
技术小达人
|
6月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十九、异步的终极解决方案：async/await
带你读《现代Javascript高级教程》二十九、异步的终极解决方案：async/await
技术小达人
48 0
兜里只有三分钱~
|
7月前
|
JavaScript
js滚动导航定位--头部demo效果示例（整理）
js滚动导航定位--头部demo效果示例（整理）
兜里只有三分钱~
56 0

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    js开发：请解释事件冒泡和事件捕获。
    15
  • 2
    js开发：请解释this关键字在JavaScript中的用法。
    7
  • 3
    js开发：请解释同步和异步编程的区别。
    10
  • 4
    学习JavaScript
    7
  • 5
    JS 几种循环遍历
    7
  • 6
    深入解析JavaScript原生操作DOM技术
    12
  • 7
    深入剖析JavaScript的事件循环
    11
  • 8
    JavaScript中的性能优化：代码优化技巧与性能分析工具
    10
  • 9
    JavaScript中的错误处理：try-catch语句与错误对象
    7
  • 10
    浏览器插件crx文件--JS混淆与解密
    8

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 场景实践-通过阿里云数据分析工具实现共享单车骑行分析
  • 视觉AI技术体系及趋势概述
  • 达摩院智能语音交互 - 声纹识别技术
  • 跨越N次元 一键变身AI漫画人

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 基于Kibana Lens进行数据可视化，灵活分析航班信息
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 基于函数计算一键部署掌上游戏机
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）