ThingJS室内3D定位导航技术，实现楼层切换定位

回复

#3D开发##3D模型#

用户需要购买名牌香薰，又或者用餐时想吃泰国菜，在庞大、复杂又容易迷路的购物中心，并不是易事。国内购物中心内几乎都遍布了Wi-Fi热点，其实利用Wi-Fi热点进行室内定位和导航，在技术层面已经成熟。

物业管理考虑更多的是建筑、楼宇和设备管理，从而保障商家、用户的消防安全，这些都是背后看不见的成本。

首先定位和导航，需要绘制室内地图。店铺外观和名字的修改过于频繁，所以需要进行管理，对模型外观进行修正。ThingJS提供场景搭建工具CampusBuilder，客户端免费下载，平台用户可以在3D场景内进行修改，轻松更新室内地图。
其次是路径导航规划。需要解决的问题有：如何在3D场景下模拟不同的行走路径?如何解决楼层切换、动态提示等问题？如何在屏幕上一样进行流转定位？

我们来一一模拟室内导航的定位功能，ThingJS官网可以查看demo哟！

单楼层导航定位

（1）在一楼，鼠标单击选择导航的起点，绿色的地图导航标注就蹦了出来。

（2）接下来就可以选择导航终点，鼠标单击选择，注意的是，路径导航充分支持室内模式，包括大门、电梯和走廊，只要是允许通行的地方，都能够利用路径导航到达终点。

门、电梯等物体要设置相应属性，才可以响应导航功能，创建导航对象代码如下：

复制代码

室内导航同样支持单楼层和多楼层之间切换，实现上下楼的导航模式。通过模仿正常的通行路线，如穿越房间并登上电梯，走到指定的终点。

从开发角度来讲，不同楼层的电梯之间、房门之间要“打通”，即设置统一user ID，这样才会被识别为同样的物体。

* 注册事件
*/
function registerEvent() {
// 单楼层与多楼层显示状态切换
$('.floor-state').on('click', function () {
if ($(this).hasClass('allLayers')) {
$(this).removeClass('allLayers');
$(this).find('.layer-img').attr('src', '/guide/examples/images/navigation/layer.png');
let showFloor = $('.layer-floors .layer-floor.active span').text();
building.floors.forEach(v => {
if (v.name == showFloor) {
v.visible = true;
v.showAllRoofs(false);
} else {
v.visible = false;
}
});
} else {
$(this).addClass('allLayers');
$(this).find('.layer-img').attr('src', '/guide/examples/images/navigation/layers.png');
building.floors.forEach(v => {
v.visible = true;
v.showAllRoofs(false);
});
}
});
// 楼层切换按钮点击事件
$('.layer-floors label.layer-floor').on('click', function () {
if ($(this).hasClass('active')) {
return;
} else {
$(this).siblings('.layer-floor').removeClass('active');
$(this).addClass('active');
let floorName = $(this).find('span').text();
if ($('.floor-state.allLayers').length <= 0) {
building.floors.forEach(v => {
v.ceiling.visible = false;
if (v.name == floorName) {
v.visible = true;
v.showAllRoofs(false);
} else {
v.visible = false;
}
});
}
app.camera.flyTo({
object: app.query(floorName)[0],
xAngle: 45,
yAngle: 90,
radiusFactor: 0.8,
time: 1000,
lerpType: null,
complete: function () {
}
});
}
});