AR室内导航-Three.js

概述

如有不明白的可以加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开启/关闭。模拟室内导航的功能,先来看看视频效果

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('你的浏览器不支持陀螺仪')
    }

最后根据陀螺仪计算起始点和线的旋转角度就可以了

  • 8
    点赞
  • 98
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
### 回答1: AR室内导航是利用增强现实(AR)技术结合Three.js开发的一种应用。AR技术能够将虚拟的三维图像在现实环境中展示出来,而Three.js是一种用于在Web浏览器中创建和展示三维图形的JavaScript库。 AR室内导航基于用户所在的位置和目标位置,通过设备摄像头获取实时图像,并将虚拟导航信息叠加在图像上,为用户提供导航的帮助。利用Three.js的技术,可以实现将建筑、室内设施等三维模型与实际场景相结合,使用户能够直观地了解周围环境和导航路径。 开发AR室内导航需要进行以下步骤:首先,利用AR技术获取实时的摄像头图像。其次,借助Three.js创建和加载三维模型,包括建筑和室内设施的模型。然后,通过算法将虚拟模型与实际场景对齐,确保其在图像中的正确展示。最后,根据用户的位置和目标位置,计算出导航路径并在图像上显示出来。 AR室内导航在现实生活中具有广泛的应用前景。比如,可以应用于商场、机场等大型室内空间,帮助用户快速找到目标位置;也可以用于导览系统,为用户提供关于展览品的信息和导览路径;甚至可以应用于室内导航机器人,帮助机器人自主地完成室内导航任务。 总之,AR室内导航结合了增强现实和Three.js技术,可以有效利用虚拟的三维图像为用户提供室内导航的帮助,具有广泛的应用前景。AR技术和Three.js技术的不断发展将进一步推动AR室内导航的创新和应用。 ### 回答2: AR室内导航是一种利用增强现实技术为用户提供室内导航服务的应用。而Three.js是一款基于WebGL的开源JavaScript 3D库,可以在网页上创建并展示3D图形和动画。 通过结合AR技术和Three.js库,可以实现AR室内导航服务。首先,我们需要收集室内的地图数据,并将其转换为Three.js可以处理的格式。这些地图数据包括建筑物的结构、房间的位置、通道、门窗等信息。 接下来,利用AR技术,我们可以在用户的手机或者其他设备的摄像头画面上叠加虚拟信息,如地图、导航路径等。用户可以通过观看屏幕上的现实场景,同时看到与现实世界相结合的虚拟导航信息,以指导其在室内进行导航。 在AR室内导航中,利用Three.js可以创建虚拟的建筑物模型和导航路径。借助于Three.js的3D渲染功能,我们可以根据地图数据绘制建筑物的3D模型,并在模型上标记房间名称、导航路径等信息。用户可以通过观察屏幕上的AR场景,准确地了解自己当前所处的位置和前进方向。 另外,AR室内导航还可以结合其他功能,如语音导航、路径规划等。通过结合语音识别技术,用户可以通过语音指令告诉设备他们想去的目的地,然后AR导航系统可以为用户提供路径规划并进行语音导航指引。 总体而言,AR室内导航结合了增强现实技术和Three.js库的优势,为用户提供了更直观、沉浸式的室内导航体验。通过利用现有技术的结合,我们可以帮助用户更轻松地找到目的地,并提升室内导航的效率和准确性。 ### 回答3: AR室内导航是一种利用增强现实技术和Three.js库实现的室内导航系统。AR(增强现实)技术是指通过手机相机或其他设备的摄像头捕捉现实世界的图像,并在图像上叠加虚拟对象或信息的技术。Three.js是一个基于WebGL的开源JavaScript库,可以用于创建和显示三维图形和动画。 AR室内导航系统利用摄像头捕捉室内环境的图像,通过图像处理和计算机视觉技术,识别出室内场景中的相关特征,如墙壁、楼梯、门等。然后,通过Three.js库创建虚拟的导航界面,将用户当前位置和目标位置在AR视图中显示出来。 用户只需要将手机摄像头对准室内环境,系统会通过AR技术识别出当前位置,并在屏幕上叠加导航界面。导航界面可以显示当前位置的平面示意图,以及路径指示标记,指引用户前往目标位置。用户可以通过手机屏幕上的虚拟按钮或手势交互,进行导航的操作,如放大和缩小地图、切换楼层、选择目标位置等。 AR室内导航系统的优势在于可以提供更直观、准确的室内导航体验。用户只需要通过手机摄像头观察现实场景,并在屏幕上看到导航界面,就可以轻松地找到目标位置,不再需要依赖图纸或标识牌。同时,Three.js库的强大功能也为导航界面的设计和交互提供了灵活性和自定义性。 总而言之,AR室内导航系统结合了增强现实技术和Three.js库,为用户提供了更直观、准确的室内导航体验,使得在复杂的室内环境中找到目标位置变得更加简单和便捷。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吃土豆丝嗯z

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值