AR室内导航-Three
@
概述
如有不明白的可以加QQ：2354528292；wx: aichitudousien
更多教学视频请访问：https://space.bilibili.com/236087412
源码获取：https://item.taobao.com/item.htm?spm=a21dvs.23580594.0.0.3c3a645ebB8H6o&ft=t&id=714574529746
这一次的AR室内导航是使用蜂鸟云地图加上three.js做的，具备室内楼层切换，2D/3D模型切换，指北针控件，AR开启/关闭。模拟室内导航的功能，先来看看视频效果
[video(video-uuIkoJ2a-1635657262961)(type-csdn)(url-https://live.csdn.net/v/embed/179533)(image-https://vedu.csdnimg.cn/32ab5fa8bc274ca69b1dc6b577656029/snapshots/79b77d77d04f4b2ab3f29ca58013308e-00004.jpg)(title-AR室内导航)]
初始化室内地图
初始化蜂鸟云室内地图很简单，使用的也是蜂鸟云自带的地图数据
vue文件中调用mapCreate创建地图
this.$nextTick(() => {
this.mapCreate();
});
地图配置参数，需要自己去创建key值
options: {
appName: '蜂鸟研发SDK_2_0',
key: '',
mapID: '1321274646113083394',
// 缩放级别
mapZoom: 20,
// 显示楼层
visibleLevels: [1, 2, 3, 4, 5],
// 默认显示几楼
level: 3
}
window.map = new fengmap.FMMap(this.options);
此时地图创建显示成功
创建楼层控件
地图创建完成后生成楼层控件，指北针，导航控件
//监听地图加载完成
map.on('loaded', () => {
//创建导航对象
this.creatNavigation();
//创建楼层控件
this.creatFloorControl();
//创建指北针控件
this.creatCompassControl();
});
楼层控件
creatFloorControl() {
let toolbar = new fengmap.FMToolbar({
//默认在右上角
position: fengmap.FMControlPosition.RIGHT_TOP,
//初始是否是多层显示，默认单层显示
allLayer: false,
//是否显示多层/单层切换按钮
needAllLayerBtn: true,
//控件位置x,y的偏移量
offset: {
x: -10,
y: 320
}
});
toolbar.addTo(map);
},
指北针
let compass = new fengmap.FMCompass({
position: fengmap.FMControlPosition.LEFT_TOP,
width: 40,
height: 40,
offset: {
x: 12,
y: 460
}
});
compass.addTo(map);
compass.on('click', function() {
map.setRotation({
rotation: 0,
animate: true,
duration: 0.3
});
});
导航控件
// FMNaviAnalyser 是可分析最短路径、最快路径并返回分析结果的路径类。可独立于地图工作，支持Web Worker 和 Node
let analyser = new fengmap.FMNaviAnalyser(
this.options,
function() {
// FMNavigation 是导航相关的功能类, 可用于模拟导航和真实导航使用
window.navi = new fengmap.FMNavigation({
map: map,
analyser: analyser,
locationMarkerUrl: './img/导航.png',
locationMarkerSize: 32
});
},
(error) => {
console.log(error);
}
);
此时就可以切换楼层显示和控制2D/3D转换
导航
一个输入开始地址和结束地点的UI，随便写写就ok
然后需在地图点击时输入起始点和终点，需要在地图上绑定点击事件
isNavBoxShow 为组件显示状态，startPointSelect 为起始点状态，endPointSelect 为结束点状态
// //路径规划
map.on('click', (event) => {
if (this.$store.state.isNavBoxShow === true) {
if (this.$store.state.startPointSelect === true) {
window.routeOpiton.start = {
x: event.coords.x,
y: event.coords.y,
level: event.targets[0].level,
url: './img/start.png',
height: 3
};
navi.setStartPoint(window.routeOpiton.start);
if (event.targets[0].name) {
document.getElementById('startInput').value = event.targets[0].name;
} else {
document.getElementById('startInput').value = '当前起点位置';
}
this.$store.commit('startPointSelectFalse');
} else if (this.$store.state.endPointSelect === true) {
window.routeOpiton.end = {
x: event.coords.x,
y: event.coords.y,
level: event.targets[0].level,
url: './img/end.png',
height: 3
}
navi.setDestPoint(window.routeOpiton.end);
if (event.targets[0].name) {
document.getElementById('endInput').value = event.targets[0].name;
} else {
document.getElementById('endInput').value = '当前终点位置';
}
this.$store.commit('endPointSelectFalse');
}
}
});
此时我们点击地图模块就可以输入起始点和结束点了
点击确定后调用路径计算函数
window.routeOpiton 为起始点和结束点对象
navi.route(window.routeOpiton, function(result) {
let line = navi.drawNaviLine();
let coordinates = [];
result.subs.forEach(item => {
item.waypoint.points.forEach(point => {
coordinates.push(point)
})
});
})
使用Three.js 生成AR模块原理
说明一下生成步骤，第一步同样是先验证是否能打开摄像头，然后初始化Three.js，然后将摄像头的视频流使用video贴图map到three.js的背景中，这样就可以呈现了，然后怎么在场景中显示路径呢，也不难，蜂鸟云的api会返回一条最短路径的数组，通过这个最短路径的数据我们就可以计算，首先判断每一个点之间的距离是否大于1，如何计算两点之间的距离呢，通过两点的的平方开根就好了，计算出后大于1的就是存在有转角的，这时我们就要计算角度了，角度通过反正切来计算，这里需要注意的是轴的旋转方向，最后在监听陀螺仪来改变生成的点和线的角度就可以了，整体来说思路ok了接下来就是变成代码就行了，实现代码不难，主要是思路~
初始化Three
//初始参数
canvas = document.getElementById('webGL3d')
arWidth = canvas.offsetWidth
arHeight = canvas.offsetHeight
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(60, arWidth / arHeight, 0.0001, 7000)
camera.position.set(0, -7, 5)
// //renderer参数
let renderParam = {
antialias: true, // true/false表示是否开启反锯齿
// alpha: true, // true/false 表示是否可以设置背景色透明
precision: 'highp', // highp/mediump/lowp 表示着色精度选择
premultipliedAlpha: false,
maxLights: 3,
canvas: canvas
}
renderer = new THREE.WebGLRenderer(renderParam)
renderer.setSize(arWidth, arHeight)
orbitControls = new OrbitControls(camera, renderer.domElement)
判断是否支持摄像头并返回视频流，这里有一个小细节，判断是否是手机还是PC，手机强制使用后置摄像头
let video = document.createElement('video');
// navigator.mediaDevices.getUserMedia 提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。
const stream = await navigator.mediaDevices.getUserMedia({
// 关闭音频
audio: false,
video: {
// 在移动设备上面，表示优先使用前置摄像头
// facingMode: 'user',
facingMode: isMobile() ? { exact: "environment" } : 'user',
width: width,
height: height
}
});
video.srcObject = stream;
video.play();
video.width = width;
video.height = height;
return new Promise((resolve) => {
// 在视频的元数据加载后执行 JavaScript
video.onloadedmetadata = () => {
resolve(video);
};
});
function isMobile() {
const isAndroid = /Android/i.test(navigator.userAgent);
const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
return isAndroid || isiOS;
}
获取到视频流后将视频贴到three.js的背景中
let video = await openCamera(arWidth, arHeight);
console.log(video);
videoTexture = new THREE.Texture(video);
videoTexture.minFilter = THREE.LinearFilter;
scene.background = videoTexture;
这里我们就可以在看到视频了
接着我们创建一个起始点标记
let plane = new THREE.PlaneGeometry(1, 1)
let map = new THREE.TextureLoader().load(require('@/assets/img/WechatIMG1129.png'))
let material = new THREE.MeshBasicMaterial({
map: map,
alphaTest: 0.1,
color: 0xffffff,
side: THREE.DoubleSide,
})
nowPosPic = new THREE.Mesh(plane, material)
nowPosPic.position.set(0, offsetY, 0)
scene.add(nowPosPic)
//添加坐标轴
let axes = new THREE.AxesHelper(500)
scene.add(axes)
绘制导航线
if (coordinates.length !== 0) {
group = new THREE.Group()
let starPoint = {
x: 0,
y: 0
}
for (let i = 1; i < coordinates.length; i++) {
let x = coordinates[i].x - coordinates[0].x
let y = coordinates[i].y - coordinates[0].y
// 计算两点的距离
let distance = Math.sqrt(Math.pow(x - starPoint.x, 2) + Math.pow(y - starPoint.y, 2))
if (distance >= 1) {
// 计算弧度
let angle = calAngleX(x - starPoint.x, y - starPoint.y)
// 生成线
createLine(starPoint, distance, angle)
starPoint.x = x
starPoint.y = y
}
}
scene.add(group)
group.position.y = offsetY
group.rotation.z = -alpha * Math.PI / 180
}
计算弧度代码
//计算偏转角度(X逆时针)
function calAngleX(x, y) {
let angle = Math.atan(Math.abs(y) / Math.abs(x))
if (x >= 0 && y >= 0) {
} else if (x <= 0 && y >= 0) {
angle = Math.PI - angle
} else if (x <= 0 && y <= 0) {
angle = Math.PI + angle
} else {
angle = Math.PI * 2 - angle
}
return angle
}
生成线
let plane = new THREE.PlaneGeometry(1, 1)
let map = new THREE.TextureLoader().load(require('@/assets/img/WechatIMG1123.png'))
let material = new THREE.MeshBasicMaterial({
map: map,
alphaTest: 0.1,
color: 0xffffff,
side: THREE.DoubleSide,
})
for (let i = 0.6; i <= length; i++) {
let mesh = new THREE.Mesh(plane, material)
let x = starPoint.x + i * Math.cos(angle)
let y = starPoint.y + i * Math.sin(angle)
mesh.position.set(x, y, 0)
let obj = {
x: x + coordinates[0].x,
y: y + coordinates[0].y
}
lingMeshArray.push(obj)
mesh.rotation.z = angle - Math.PI / 2
group.add(mesh)
}
到这里就可以看到生成的线了
监听陀螺仪window.DeviceOrientationEvent
window.DeviceOrientationEvent说明
DeviceOrientationEvent.absolute 只读
用来说明设备是提供的旋转数据是否是绝对定位的布尔值。
DeviceOrientationEvent.alpha 只读
一个表示设备绕z轴旋转的角度（范围在0-360之间）的数字
DeviceOrientationEvent.beta 只读
一个表示设备绕x轴旋转（范围在－180到180之间）的数字，从前到后的方向为正方向。
DeviceOrientationEvent.gamma 只读
一个表示设备绕y轴旋转（范围在－90到90之间）的数字，从左向右为正方向。
throttle只是节流函数
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', throttle(setMeshCamera, 100), false)
} else {
console.log('你的浏览器不支持陀螺仪')
}
最后根据陀螺仪计算起始点和线的旋转角度就可以了
