使用 Vue3 + AR 撸猫

前言：浏览苹果官网时，你会看到发现每个设备在介绍页底部有这么一行文字：“用增强现实看看***”。使用苹果设备点击之后就能将该设备投放于用户所在场景视界，在手机摄像头转动的时候，也能看到物体对象不同的角度，感觉就像真的有一台手机放在你的面前。（效果如下图。注意：由于该技术采用苹果自有的 arkit 技术，安卓手机无法查看）

以 JSARToolKit 为例:

• 使用 WebRTC 获取摄像头信息，然后在 canvas 画布上绘制原图;
• JSARToolKit 计算姿态矩阵，进而渲染虚拟信息

• （识别）WebRTC 获取摄像头视频流；
• （跟踪）Tracking.js 、JSFeat 、ConvNetJS 、deeplearn.js 、keras.js ；
• （渲染）A-Frame、 Three.js、 Pixi.js 、Babylon.js

比较成熟的框架：AR.js

好比每个领域都有对应的主流开发框架，Web AR 领域比较成熟框架的就是 AR.js，它在增强现实方面主要提供了如下三大功能：

1. 图像追踪。当相机发现一幅 2D 图像时，可以在其上方或附近显示某些内容。内容可以是 2D 图像、gif、3D 模型(也可以是动画)和 2D 视频。案例：艺术品、学习资料(书籍)、传单、广告等等。
2. 基于位置的 AR。这种“增强现实”技术利用了真实世界的位置，在用户的设备上显示增强现实的内容。开发者可以利用该库使用户获得基于现实世界位置的体验。用户可以随意走动(最好是在户外)并通过智能手机看到现实世界中任何地点的 AR 内容。若用户移动和旋转手机，AR 内容也会同步做出反应(这样一些 AR 内容就被“固定”到真实位置了，且会根据它们与用户的距离做出适当的变化)。这样的解决方案让我们做出交互式旅游向导成为可能，比如游客来到一个新的城市，游览名胜古迹、博物馆、餐馆、酒店等等都会更方便。我们也可以改善学习体验，如寻宝游戏、生物或历史学习游戏等，还可以将该技术用于情景艺术(视觉艺术体验与特定的现实世界坐标相结合)。
3. 标记跟踪。当相机发现一个标记时，可以显示一些内容(这与图像跟踪相同)。标记的稳定性不成问题，受限的是形状、颜色和尺寸。可以应用于需要大量不同标记和不同内容的体验，如：(增强书籍)、传单、广告等。

开始上手体验 AR.js

开发调试开启 https

由于使用到摄像头敏感权限，调试时必须基于 https 环境打开才能正常运行。如果是以往，自己手动搭建个 https 环境调试对于很多新手来说还是比较麻烦耗费时间，好在最新的基于 vite+vue3 的脚手架搭建的项目，可以轻松用一行命令开启 https 访问。用脚手架初始化好代码之后，先修改 package.json 文件，在 dev 命令中加上–host 暴露网络请求地址（默认不开启），如下图：