简介本资源是一套完整的室内AR导航地图系统实现方案面向计算机专业本科生、研究生及前端开发初学者适用于毕业设计、课程设计与中小型项目开发场景解决室内空间可视化建模、实时路径规划与增强现实叠加导航等核心问题。压缩包共324个文件含188张界面与图标PNG资源、104个矢量地图PBF切片、11个核心JS逻辑脚本含Three.js AR渲染与陀螺仪姿态计算、6个Vue组件文件地图容器、路径面板、AR视图等、4个SQLite数据库文件存储楼层结构与POI信息整体大小为15.37MB。已有149人学习下载资源附带详尽的README.md与项目文档.md涵盖环境搭建、地图数据准备、AR坐标对齐原理说明及常见兼容性问题排错指引源码经严格测试模块职责清晰支持快速二次开发与功能扩展。 做毕设选了“基于VueJavaScript的室内AR导航地图”这个题目的同学我太懂你们了。这个题目听起来高大上实际写起来你会发现它把前端、图像识别、传感器融合、路径规划几个方向都串在了一起做完之后能讲的东西非常多。我当年就是冲着“AR”这两个字选的这个题最后不仅顺利过了答辩还把整套源码和文档沉淀成了一份可以反复复用的项目。今天把这套实现从头到尾复盘一遍包括技术选型、代码结构、AR定位原理、路径规划、踩坑记录、演示技巧全部整理出来希望能帮你少走弯路。这篇内容适合正在做毕业设计或课程设计的同学也适合想在前端方向找个有区分度的练手项目的开发者。我会尽量用“做完整个项目”的视角来讲而不是给你贴一堆碎片代码。你看完不仅能复刻一版能跑的室内AR导航还能搞明白每一块为什么要这么做。1. 项目整体设计与技术选型1.1 需求拆解室内AR导航到底要解决哪三件事所有导航系统不管室外室内核心都是三件事我在哪、我要去哪、怎么走。室外导航靠GPS和北斗就能解决“我在哪”但室内环境下卫星信号被楼板墙体遮挡定位误差能到几十米根本没法用。所以室内AR导航必须换一套定位思路这也是这个题目最大的技术难点和创新点所在。我实现的时候把需求拆成了三个核心模块定位模块通过识别环境中的已知标记我选的是二维码估算出手机摄像头在室内地图中的位置和朝向。路径规划模块在室内地图上计算从当前点到目标点的可行路径输出一系列路径点和转弯指令。AR叠加模块把路径点、方向箭头、目的地标识实时绘制在摄像头画面上形成“箭头浮在真实地面上”的AR效果。这三个模块可以独立开发、独立测试最后再通过一个页面串起来。这种模块化拆分非常重要因为毕业设计最怕的就是所有逻辑缠在一起出了问题没法定位写文档也没法分章节。你要是现在还没开始动手我建议你先把这三个模块画到纸上哪怕只是用方框表示后面写代码都会清晰很多。1.2 技术选型为什么用VueJavaScript而不是原生或游戏引擎确定了核心模块之后下一个问题就是技术栈。市面上做AR导航有很多方案比如原生Android用ARCoreiOS用ARKitWeb端用Three.js、AR.js、A-Frame等。为什么这个项目选择了“VueJavaScript”这个组合我从实际开发角度给三个理由。第一个理由是工程化体验好。Vue的双向绑定、组件系统、路由、状态管理让我能把“地图选择页”“导航页”“路径展示页”这些界面拆分得清清楚楚摄像头识别逻辑、路径规划算法、AR渲染逻辑都可以封装成独立的JavaScript模块既方便调用也方便测试。毕业设计评审老师看重的是系统性和工程能力一套Vue项目结构天然就有说服力。第二个理由是AR部分完全可以用浏览器原生能力实现。这个项目里的AR不是那种高精度的三维空间注册而是“轻量级AR”摄像头画面流加上Canvas覆盖层在画面上绘制导航元素。这个过程不需要引入Three.js这种重型3D库用原生Canvas API完全够用。JavaScript生态里有现成的二维码识别库比如jsQR它能直接在视频帧里找出二维码的角点坐标这正好是后续做定位的关键输入。第三个理由是跨平台演示成本低。只要你有一台带摄像头的手机扫码打开页面就能跑不需要安装任何原生App。答辩的时候现场拿手机一扫就能演示这种效果比PPT里放视频要加分得多。我把几个方案的对比整理成了表格如果你纠结选型可以看一眼方案定位精度开发成本演示效果适合场景ARCore / ARKit原生高高需学Android/iOS强产品级应用Three.js WebAR中高中需懂3D数学强复杂3D场景Vue Canvas jsQR中低纯前端强2D AR毕设/课程设计/原型验证纯原生JS中中工程化弱中小型演示对毕设和课程设计来说VueJS方案是性价比最高的既能保证技术含量又能在有限时间内做完还能把核心算法讲清楚。1.3 整体架构与数据流设计我最终的项目代码结构是这样的你可以直接参考src/ ├── components/ │ ├── CameraView.vue // 摄像头视频流组件 │ ├── ARCanvas.vue // AR覆盖层画布组件 │ ├── MapPanel.vue // 2D地图面板 │ └── NavBar.vue // 顶部导航栏和状态显示 ├── services/ │ ├── locationService.js // 定位服务二维码识别位姿估算 │ ├── sensorService.js // 传感器服务陀螺仪/罗盘数据封装 │ ├── pathService.js // 路径规划服务A*算法 │ └── renderService.js // AR渲染服务坐标转换箭头绘制 ├── mock/ │ └── mapData.js // 室内地图与路径点数据 ├── App.vue └── main.js数据流是这样走的CameraView组件启动摄像头把画面向Canvas上持续绘制视频帧locationService每隔一段时间从帧中提取二维码计算当前位姿然后把“位置朝向”写入地图坐标pathService读取用户选择的终点结合当前点计算路径得到世界坐标下的路径点序列renderService拿到路径点和当前位姿将世界坐标转换为屏幕坐标绘制对应的箭头和标识。整个链路是单向的每一层只依赖前一层的结果调试的时候可以一层一层验证非常顺手。2. 核心细节解析与关键模块的实操要点2.1 AR定位原理从视频帧到相机姿态AR定位是整个项目技术含量最高、也是最容易出问题的部分。我没有用复杂的SLAM即时定位与地图构建方案而是采用“已知标记定位”也就是在室内环境中放置二维码作为地标。为什么选二维码因为二维码自带定位图案即使在部分遮挡、旋转、倾斜的情况下识别库也能稳定找到它的四个角点。这比识别普通图像要可靠得多。定位的基本思路是已知二维码在真实世界中的物理位置和尺寸再通过它在画面中的四个角点坐标反算出相机也就是手机相对于二维码的位置和朝向。这个数学过程在计算机视觉里叫做PnP问题Perspective-n-Point核心是透视投影模型的逆运算。对于毕业设计来说不需要把相机内参标定做到极致做一个近似估算就够用了。我的简化做法是这样的假设手机摄像头光轴正对二维码时二维码在画面中的大小与实际距离成反比二维码偏离画面中心时偏移量可以近似映射为水平方向和垂直方向的位置偏差手机朝向则直接通过DeviceOrientation事件读取相当于用罗盘和陀螺仪补足旋转信息。用这种融合定位的方式最终的定位误差控制在1-2米范围内对室内导航演示来说是完全可以接受的。核心识别循环的代码非常简单但要注意性能控制// 每200ms从视频帧中抽帧识别一次二维码 async function detectQRCode(videoElement, canvas) { const ctx canvas.getContext(2d, { willReadFrequently: true }); if (videoElement.readyState ! HTMLMediaElement.HAVE_ENOUGH_DATA) return null; // 按比例缩放到较小尺寸提升识别速度 const targetWidth 480; const scale targetWidth / videoElement.videoWidth; canvas.width targetWidth; canvas.height Math.floor(videoElement.videoHeight * scale); ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); const imageData ctx.getImageData(0, 0, canvas.width, canvas.height); const code jsQR(imageData.data, imageData.width, imageData.height); if (code code.location) { // code.location 包含二维码四个角点坐标 return { corners: code.location, data: code.data // 二维码内容可包含地标ID }; } return null; }有个细节需要特别提醒getImageData在高频调用下会频繁分配内存务必通过willReadFrequently: true这个选项告诉Canvas我们准备反复读取像素数据否则在低端手机上会出现明显的卡顿。另外抽帧识别最好用定时器控制频率而不是每帧都识别200毫秒一次已经足够导航使用还能降低CPU占用。2.2 路径规划实现A*算法与室内地图建模定位解决了“我在哪”接下来就是“怎么走”。室内导航的路径规划我选择了A算法。相比迪杰斯特拉A加入了启发式函数搜索效率更高相比双向BFSA*在网格地图上写起来最直观、扩展性也最好。算法本身不复杂关键是把室内地图建模做好。室内地图我用JSON来描述包含两类数据地标点Landmark和通道连接Path。地标点包括门、电梯口、扶梯、店铺入口等通道连接表示两个地标之间可以直行通行。导航的时候起点和终点都会被映射到最近的地标点然后在地标拓扑图上跑A*得到一串有序的地标序列。节点定义大致长这样// 简化版节点数据结构 const landmark { id: L3, name: 3号电梯口, x: 12.5, // 地图坐标系中的x坐标 y: 8.3, // 地图坐标系中的y坐标 floor: 1, neighbors: [ { to: L2, distance: 6.2 }, { to: L5, distance: 9.8 } ] };A*的核心逻辑不复杂我用一个典型实现来说明function aStarSearch(graph, startId, endId) { const openSet new PriorityQueue((a, b) a.f - b.f); const cameFrom {}; const gScore {}; const start graph.getNode(startId); gScore[startId] 0; start.f heuristic(start, graph.getNode(endId)); openSet.push(start); while (!openSet.isEmpty()) { const current openSet.pop(); if (current.id endId) return reconstructPath(cameFrom, current); for (const neighbor of current.neighbors) { const tentativeG gScore[current.id] neighbor.distance; if (tentativeG (gScore[neighbor.to] || Infinity)) { cameFrom[neighbor.to] current.id; gScore[neighbor.to] tentativeG; const node graph.getNode(neighbor.to); node.f tentativeG heuristic(node, graph.getNode(endId)); openSet.push(node); } } } return null; // 无可行路径 } function heuristic(a, b) { return Math.sqrt((a.x - b.x) ** 2 (a.y - b.y) ** 2); }规划出来的路径不只是给AR渲染用的坐标序列我还会在路径上额外提取“转向指令”。比如“前方50米后左转”“直行到达目的地附近”这类提示在AR画面里显示成方向箭头加文字比单纯一条线要直观得多演示效果也会更好。地图建模这块有一个很有用的经验不要试图把整个楼层都建模成特别精细的网格那样数据量又大、A*效率又低。对导航来说地标点通道的拓扑结构足够了。室内空间本来就有墙、货架、柱子这些障碍如果非要用栅格地图你需要额外处理障碍物标注工作量会翻倍。2.3 AR叠加渲染如何把路径“放”到现实画面上路径规划出来的是一串世界坐标点而AR画面是手机屏幕上的像素坐标这中间需要做坐标转换。标准的做法是世界坐标 → 相机坐标 → 屏幕坐标。其中世界坐标到相机坐标的转换需要用到相机位姿相机坐标到屏幕坐标需要用到相机内参焦距、主点位置等。我前面提到定位模块会估算出一个相机相对于二维码的位姿这个位姿实际上就是“世界坐标到相机坐标”的变换矩阵。至于相机内参你要是想精确标定可以用棋盘格、OpenCV去算。但毕设项目里有个更务实的做法假设相机内参简化为焦距f和中心点(cx, cy)其中f可以在运行时根据视频流宽高和水平视场角推出来cx、cy直接取画面中心。这样做误差会大一些但对2D导航箭头来说够用了。坐标转换的简化代码如下function projectToScreen(point3D, cameraPose, cameraIntrinsic) { // 相机坐标 世界坐标 经过 位姿矩阵变换 const camX cameraPose.r00 * point3D.x cameraPose.r01 * point3D.y cameraPose.t0; const camY cameraPose.r10 * point3D.x cameraPose.r11 * point3D.y cameraPose.t1; const camZ cameraPose.r20 * point3D.x cameraPose.r21 * point3D.y cameraPose.t2; // 透视投影屏幕坐标 焦距 * 相机坐标 / 深度 主点偏移 const screenX cameraIntrinsic.fx * camX / camZ cameraIntrinsic.cx; const screenY cameraIntrinsic.fy * camY / camZ cameraIntrinsic.cy; return { x: screenX, y: screenY }; }坐标转换做好之后AR渲染就变得很纯粹了在Canvas覆盖层上从当前坐标点开始依次画出每个路径点的屏幕投影位置同时根据相邻两个点的方向绘制一个旋转箭头。为了增强AR空间感我会把远处的点画小一点、透明度低一点近处的点画大一点、实一点这样能模拟出“空间纵深”的感觉。渲染过程中有一个很关键的细节Canvas覆盖层必须允许点击事件穿透不然会挡住下面的地图面板和交互按钮。我在ARCanvas组件上设置了pointer-events: none需要交互的UI元素放在另一个层级里这样既能实现画面叠加又不影响用户操作。3. 从零搭建项目完整实操过程3.1 环境准备与项目初始化动手之前先确认环境。Node.js版本建议用16或者18太低或太高都容易遇到Vue CLI依赖问题。我实际用的是Node 16.20Vue CLI 5整套流程非常顺。创建项目用以下命令npm install -g vue/cli vue create indoor-ar-navigation创建时选择Vue 3或者Vue 2都可以。如果你优先考虑平滑Vue 2的生态更稳定如果考虑后续扩展Vue 3配合Composition API写起来更舒服。我自己用的是Vue 3主要因为代码组织更清爽。项目创建完成后安装依赖npm install jsqr # 二维码识别库关于本地开发环境有一个必须提前注意的点浏览器只有在安全上下文HTTPS或localhost下才允许调用摄像头接口getUserMedia。你用npm run serve启动后访问http://localhost:8080这属于localhost安全上下文摄像头是能正常调用的。但如果你把服务IP化比如用http://192.168.1.5:8080在手机上调试浏览器会直接拒绝启动摄像头。这时候有两个解决办法一是用https://跑开发服务器二是临时在Chrome的chrome://flags里把“Insecure origins treated as secure”打开把IP地址加进去。我建议直接用HTTPS方式更省心。3.2 摄像头视频流接入与二维码识别摄像头接入的核心是getUserMedia拿到视频轨道之后绑定到video元素上。这里有一个很影响体验的细节手机后置摄像头必须显式声明facingMode: environment否则很多安卓手机会默认打开前置摄像头画面里全是你的脸QR码根本识别不到。CameraView组件的核心逻辑如下async startCamera() { const stream await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: environment }, width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false }); this.videoElement.srcObject stream; await this.videoElement.play(); this.startDetectionLoop(); // 启动识别循环 },识别循环启动之后每200ms抽一次帧把帧交给locationService处理。如果识别到二维码解析二维码里的地标ID再读取该地标在世界坐标系中的位置结合二维码在画面中的面积和位置计算出当前手机的大致坐标更新到全局状态中。这个过程我建议在locationService里加一个日志输出开发阶段把每次识别结果打印到控制台方便观察定位是否稳定。有个坑需要提一下jsQR识别对光照非常敏感光线太强或者太暗都会导致识别不到。开发阶段尽量在正常的室内灯光下测试后期做演示前也要提前确认现场光照条件。3.3 姿态估算与路径点屏幕坐标计算二维码识别能告诉你“我在哪个地标附近”但导航还需要知道“我面朝哪个方向”。这个朝向我用浏览器的DeviceOrientation事件来获取。手机水平持握时事件里的alpha表示方位角0度为正北配合定位模块识别到的二维码位置就能算出手机在地图坐标系中的朝向。DeviceOrientation事件在安卓和iOS上的表现差异相当大。安卓上只有用户主动授权后才会触发iOS 13以上要求页面必须经过用户手势触发才能申请权限。我在页面里做了一个“开始导航”的按钮用户点击后才能启动传感器这个设计既符合浏览器权限要求也符合用户操作逻辑。拿到朝向和位置之后路径点从世界坐标到屏幕坐标的转换就按我在2.3里写的projectToScreen函数执行。为了让路径显示更平滑我还会对连续几帧的投影点做移动平均function smoothPoint(newPoint, historyPoints) { historyPoints.push(newPoint); if (historyPoints.length 5) historyPoints.shift(); const avg historyPoints.reduce((acc, p) ({ x: acc.x p.x / historyPoints.length, y: acc.y p.y / historyPoints.length }), { x: 0, y: 0 }); return avg; }3.4 路径选择与箭头渲染做完了底层定位就要把“可感知的AR导航”呈现出来。我的页面交互流程是进入导航页后地图面板显示当前楼层的2D平面图用户点击目标地标系统调A*算出路径然后摄像头画面打开AR覆盖层开始绘制。箭头渲染我单独抽了一个renderService它拿到当前位姿和路径点数组后依次计算每个路径点的屏幕坐标然后绘制三类元素当前点到下一路径点的方向箭头这个箭头要持续跟随手机朝向的变化更新。下一个转弯点的指示卡片显示“直行XX米后左转”等信息。目的地的锚点标记一个悬浮的圆形目标图标。绘制方向箭头的代码大致如下function drawArrow(ctx, points) { if (points.length 2) return; const start points[0]; const end points[1]; const angle Math.atan2(end.y - start.y, end.x - start.x); // 箭头主体 ctx.beginPath(); ctx.moveTo(start.x - 20, start.y); ctx.lineTo(end.x, end.y); ctx.strokeStyle rgba(65, 105, 225, 0.85); ctx.lineWidth 8; ctx.stroke(); // 箭头头部 ctx.beginPath(); ctx.moveTo(end.x, end.y); ctx.lineTo(end.x - 25 * Math.cos(angle - Math.PI / 6), end.y - 25 * Math.sin(angle - Math.PI / 6)); ctx.lineTo(end.x - 25 * Math.cos(angle Math.PI / 6), end.y - 25 * Math.sin(angle Math.PI / 6)); ctx.closePath(); ctx.fillStyle rgba(65, 105, 225, 0.85); ctx.fill(); }3.5 打包部署注意点项目开发完成后要打包部署到静态服务器或者接入到已有的后端项目。Vue项目打包时会遇到一个常见问题如果部署在服务器的子目录下而不是根目录首页会白屏。解决办法是在vue.config.js中显式设置publicPathmodule.exports { publicPath: process.env.NODE_ENV production ? /indoor-ar/ : / };另外摄像头权限在非localhost域下依然要求HTTPS所以生产环境必须配置SSL证书。如果你是在学校实验室的服务器上演示可以先用内网HTTPS或者直接把页面内嵌到一个已经有SSL的域下面。4. 常见问题与排查技巧实录4.1 摄像头黑屏或无法启动这是高频问题。如果你的页面打开后黑屏或者控制台报NotAllowedError优先排查以下几项确认当前页面是通过http://localhost访问或者部署在HTTPS环境下。确认浏览器地址栏左侧没有“摄像头已阻止”的提示如果有就手动允许。如果你的页面是在非本机设备上测试务必使用HTTPS不要用IP加HTTP。确认代码里没有同时打开多个摄像头的逻辑有时候异常分支里没有释放之前的视频流也会导致第二次调用getUserMedia失败。我踩过最久的一次坑就是在实验室的平板电脑上用IP访问结果平板死活不弹授权框最后查到是HTTP环境限制。如果你也遇到这种情况直接给电脑或者平板加一个本地HTTPS证书一步到位。4.2 二维码识别率低、位置抖动识别率低多数是画面清晰度或者尺寸问题。二维码在画面中至少要占1/4的面积太小了jsQR会说“cannot find code”。你可以把手机靠近二维码或者把二维码打印得大一点。我测试下来A4纸打印的二维码在0.5-2米距离内识别效果比较好。位置抖动是一个更烦人的问题。即使是同一时刻二维码角点检测结果也会有几像素的波动换算到世界坐标后定位点就会跳来跳去。我的解决方案是两级滤波第一级对二维码角点做平均第二级对最终的位置坐标做移动平均。位置坐标的移动平均窗口建议设置在5-10帧之间太短过滤不掉抖动太长会导致定位反应迟钝导航时会觉得箭头拖了个尾巴。还有一个很容易被忽略的点二维码要保证平整。贴在墙上或者柱子上的二维码如果起皱角点会偏移定位精度立刻下降。打印的时候尽量用硬卡纸固定的时候用胶带贴平。4.3 传感器朝向漂移导致箭头乱转手机罗盘在室内环境受金属材料、电子设备干扰朝向漂移很常见。表现就是手机没有动屏幕上的箭头却慢慢旋转。这个问题如果不处理AR导航基本没法用。我当时做了两个处理。第一是引入“方向校准提示”在页面顶部显示一个半透明的进度条引导用户水平旋转手机画八字很多手机的软件算法会在这种操作下自动校准罗盘。第二是当二维码可见时以二维码检测到的姿态为准传感器的数据只作为短暂补充这样即使传感器漂移只要二维码偶尔出现一次就能把方向拉回来。这套策略实测下来效果提升非常明显。4.4 Vue生命周期与资源释放这个问题的隐蔽性很高但危害很大。如果你在Vue组件的beforeDestroy里没有清理定时器、没有移除事件监听、没有关闭视频流那么当你从导航页切到其他页面时摄像头灯可能还在亮识别循环还在跑内存持续上涨最后页面卡死。规范的写法是beforeUnmount() { // 关闭识别循环 clearInterval(this.detectionTimer); // 关停摄像头 if (this.videoElement this.videoElement.srcObject) { this.videoElement.srcObject.getTracks().forEach(track track.stop()); } // 移除传感器监听 window.removeEventListener(deviceorientation, this.handleOrientation); }5. 项目文档、演示与答辩经验5.1 项目文档怎么写才能拿高分代码写完只是完成了一半毕业设计文档的质量直接决定你的最终成绩。我写文档时把核心章节设置为需求分析、系统设计、关键算法实现、测试分析、项目总结。其中关键算法实现是最重要的章节一定要把A*路径规划和QR码视觉定位的原理讲透配原理图和代码片段。原理图不一定要用专业绘图工具用PPT画或者用draw.io画都行关键是逻辑清楚。另外一定要写测试分析。我当时做了三组测试二维码识别距离与准确率测试、不同光照条件下的识别稳定性测试、导航路径正确率测试。每组测试用表格记录简单直接评委老师看了会觉得你的项目是经过严谨验证的而不是“代码能跑就行”。5.2 演示环境的准备与控场技巧答辩演示是最容易翻车的环节。你永远不知道现场的网络和光线会出什么幺蛾子。我的建议是准备三套方案首选方案现场手机扫码演示。提前把项目的二维码贴在答辩教室的墙上确保距离、光照、桌面高度都合适。备用方案录一段完整的演示视频。用手机在最佳环境下手持拍摄从扫码进入、选择目的地、AR箭头出现到最终到达终点完整录一遍。如果现场识别失败立刻切视频不浪费时间。兜底方案投影仪上有静态截图用来辅助讲解。还有一个控场技巧现场演示前先“预热”也就是提前几秒开始识别让定位模块先锁定一个初始位置这样演示开始时手机一旦扫到二维码或者看到地标能够快速恢复定位。不要傻乎乎地等评委发话才开始打开摄像头那几分钟足够冷场了。5.3 从课程设计到产品级的扩展方向如果你不满足于完成一个毕设想让这个项目在简历上更有分量可以考虑往这几个方向扩展融合蓝牙Beacon定位让系统不需要二维码也能初始化位置实现“无感”切入AR导航。引入点云或SLAM技术实现真正意义上的空间注册让AR箭头能贴合墙面、地面而不只是屏幕上的一个覆盖层。增加多楼层切换通过台阶、电梯、扶梯的路径语义做跨楼层导航。把地图数据从JSON配置升级为后端接口支持动态更新商铺位置和路况信息。这些扩展方向虽然工作量更大但任何一个做出来都能让这个项目的技术深度明显提升一个档次。对找前端方向的工作来说“室内AR导航”这个项目本身已经有很好的区分度如果再有一点传感器融合或者性能优化的实践面试时能聊的内容会丰富很多。6. 写在最后一点个人经验这个项目做下来我最大的体会是AR导航最耗时间的不是算法本身而是各种传感器和浏览器接口的适配问题。你在代码里看到的是一个半小时写好的A*但背后可能是三天时间排查DeviceOrientation在安卓上的权限问题。所以如果你现在刚开始做一定要给“联调阶段”预留足够的时间不要拖到最后一周才把所有模块拼起来。最后分享一个小技巧如果你希望在答辩现场演示得更顺利可以提前准备一个“导航演示模式”。在这个模式下系统会定时模拟移动位置和朝向的变化即使现场光线不好、二维码识别不上也能通过视频流加动画的方式展示完整的AR导航流程。这个功能写起来很简单但关键时刻能救命。我当时就是靠这个模式在评委面前稳稳跑完了整套流程。本文还有配套的精品资源点击获取