webgl（three.js）实现室内定位，楼宇bim、实时定位三维可视化解决⽅案——第
五课
（写在前⾯，谈谈物联⽹展会）上次深圳会展中⼼举⾏物联⽹展会，到了展会⼀看，80%以上的物联⽹应⽤都是在搞RFID，室内定位，我⼀度怀疑物联⽹落地⽅案的⽅向局限性与市场导向，后来多⽅⾯了解才明⽩，展会上看到的不能体现⽬前物联⽹最前沿最⼴泛的应⽤，很多⼤的企业与技术前沿企业没有参与这样的展会，⼀是不屑于参加，⼆是展会带来的市场价值实在太少太少，展会最⼤的价值就是让同⾏之间再抄⼀抄（国内⼤部分企业基本这样，互相⼭寨），看看各家都做了啥，所以，展会上我们所看到的往往不是企业最核⼼最好的东西，不能体现当前国内物联⽹最前沿的技术与发展状况。
前⾔：GPS、北⽃系统将全球地图导航定位发展到了极致的程度，但精确精度还不能达到两⽶以内，如何解决解决室内这最后⼏⽶的定位问题，国内外各⼤⼚家各出奇招。因为有市场需求所以有资本驱动，室内精确定位在仓库，档案馆，监狱，医院，办公，⼈员，以及各种⾼价值重要资产等定位场景中都要这样的需求。室内定位设想应⽤于⼈员的管理、机器⼈仿⽣、被标签物的定位追踪等等。如果室内定位能够解决精度，延迟，容量三⽅⾯瓶颈，其市场应⽤价值不可限量
技术⽬标：将⾮可视内容的可视化呈现，更直观的掌控数据情况。
⼀、市场背景与领域：
1、信息采集定位：打卡、签注、活动范围圈定、电⼦围栏、⼯作中⽇常监控等等。
2、安防监控定位：安防领域⽐较⼴泛，包括了消防、监控、维保安保等等，这些具体⾏业划分⽅⾯对精准定位可视化需求都⽐较强烈。保护⼈民⽣命财产、监控消防英雄实时位置这些都是有待解决的问题。html实现用户注册登录代码
3、⼯业4.0：这是最新的⼯业诉求，真正落地的，⽬前还没有⼏家，其主要⽬标就是通过室内定位技术让整个⽣产流程实现可视化，可追踪化。
4、监狱、医院、机场领域、商场。定位可视化需求也⽐较强烈
监狱：防⽌越狱，防⽌⾃杀等。每个犯⼈⼿上上⼀个不可拆卸的⼿环，只要系统检查到有⼈某处停留时间过长，系统就会报警。
医院：为患者提供快捷的寻址巡诊服务。
机场、商场：为客⼈，旅客提供⽅便快捷的定位导航服务，为机场提供可疑物品贴标签定位⽅案。
5、仓库资产定位
6、⽆⼈机、物流、快递派送定位
7、APP应⽤服务，适当位置推送适当服务。
8、游戏场景，VR应⽤
等等，随便想想就这么多，看来市场还是⽐较有前景的。
⼆、技术⽅案分析：
当前市⾯上室内定位技术主要分为下列⼏种：
1、wifi探针+摄像机智能分析技术：这种技术利⽤wifi探针撤出⼤体位置在⽤摄像机智能分析，分析出精确位置，优点是精确度⾼，缺点是成本⾼，摄像机死⾓多。
2、⽆源RFID+读卡器技术：这种技术是⽬前市⾯上⽤的⽐较多的技术，⽐如超市，仓储，优点是成本低，缺点是没什么精度要求，精度范围是房间内
3、低功耗有源RFID+读卡器基地器+智能分析：这种利⽤有源发射信号的⽅式定位，精确多虽然⾼但是读卡器多的情况下会出现误报，乱报情况，这就需要智能分析，数据清洗。⽬前⽐较看好的⽅案，成本低，精确度⼀⽶以内。
4、蓝⽛信号强度探测分析：精確的⾼，但是藍⽛信號受阻擋，受⼲扰⽐较严重。这也是展会中看到的⽅案。
5、定位地毯+有源信号卡（⼿环）：这是精确度⾮常⾼的⽅案，但是成本也很⾼。要在室内铺上⼀层定位弱电地毯。
6、红外探测技术、超宽带技术、超声波技术：和蓝⽛的⽅案差不多。
技术交流 1203193731@qq
交流：
如果你有什么要交流的⼼得可邮件我
三、三维可视化显⽰
我们还是和前⾯的课程(⼀样选择webgl⽆插件解决⽅案，直观体现定位可视化。
3.1、⾸先是场景搭建，搭建需要定位的三维场景。这⾥我们随便做了⼀栋⼤楼，作为需要定位的场景。
下图是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 View Code
3.2、显⽰单个楼层实时定位效果。这⾥我们动态添加定位标签。标注标签。在右下⾓显⽰标签信息，规避场景内凌乱。
楼层切换效果
逻辑代码：
if (_this.build1CurrentShowFlow == 8&&_this.currentShowLocationState == 1) {
_this.closeLocation(doshowAnimiation);
} else {
doshowAnimiation();
}
function doshowAnimiation(){
WT3DObjmonFunc.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": "pi 单楼层显⽰定位代码：
ModelBusiness.prototype.marks = [];
ModelBusiness.prototype.addMark = function (name, position, size, picurl,showNub,Txtcolor) {
if (this.marks.indexOf("dmark_" + name) >= 0) {
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", " //[{ "name": "dmark_" + name, "objType": "picIdentification", "size": { "x": size.width, "y": size.height }, "position": position, "imgurl": picurl, "showSortNub": 3480, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickE // { "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 + 5 WT3DObjmonFunc.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);
WT3DObj.addObject(ccd);
}
3.3、显⽰整体楼层实时定位效果。
发表评论