vue项目集成AR模型（项目实战）

1:框架选择

比较成熟的框架：AR.js

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

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

如果只是想只在项目里面展示下3D模型,我们只需要用到aframe就可以了

2:模型选择

Sketchfab - The best 3D viewer on the web

这是一个3D模型相对比较齐全的一个国外网站,你可以下载你需要的模型到项目中使用,下载的模型尽量以gltf类型。

3:项目集成

我们需要把aframe下载到我们的vue项目里面

 npm install aframe --save

这里可能会遇到问题,如果遇到无法下载的情况

npm config set registry https://registry.npm.taobao.org/ 

因为这是国外的所以我们需要放到国内的淘宝镜像里面。

4:主体代码实现

<template>
  <div>
    <div class="Box"">
     <a-scene>
      <a-assets>
        <a-asset-item position="0 2 -5" rotation="0 45 45" scale="2 2 2" id="model"  src="models/grasshopper.gltf"></a-asset-item>
      </a-assets>
      <a-gltf-model src="#model"></a-gltf-model>
      <!-- <a-sky color="#ECECEC"></a-sky> -->
      <!-- <a-camera position="0 1.6 0" user-height="1.6"></a-camera> -->
     </a-scene>
    </div>
  </div>
</template>

这里需要值得注意的地方是模型的位置必须得放在public文件夹下面,否则会导致报错，“components:gltf-model:warn Unexpected token '<', "<!DOCTYPE "... is not valid JSON”

当你出现上诉错误的时候大概是路径不对，填写路径时需要从public后开始填写。

当你正确的完成上诉内容时，项目里就会出现你刚才下载好的模型了，你也可以根据自己的需求进行拓展。