1:框架选择
比较成熟的框架:AR.js
好比每个领域都有对应的主流开发框架,Web AR领域比较成熟框架的就是AR.js,它在增强现实方面主要提供了如下三大功能:
- 图像追踪。当相机发现一幅2D图像时,可以在其上方或附近显示某些内容。内容可以是2D图像、gif、3D模型(也可以是动画)和2D视频。案例:艺术品、学习资料(书籍)、传单、广告等等。
- 基于位置的AR。这种“增强现实”技术利用了真实世界的位置,在用户的设备上显示增强现实的内容。开发者可以利用该库使用户获得基于现实世界位置的体验。用户可以随意走动(最好是在户外)并通过智能手机看到现实世界中任何地点的 AR 内容。若用户移动和旋转手机,AR内容也会同步做出反应(这样一些AR内容就被“固定”到真实位置了,且会根据它们与用户的距离做出适当的变化)。这样的解决方案让我们做出交互式旅游向导成为可能,比如游客来到一个新的城市,游览名胜古迹、博物馆、餐馆、酒店等等都会更方便。我们也可以改善学习体验,如寻宝游戏、生物或历史学习游戏等,还可以将该技术用于情景艺术(视觉艺术体验与特定的现实世界坐标相结合)。
- 标记跟踪。当相机发现一个标记时,可以显示一些内容(这与图像跟踪相同)。标记的稳定性不成问题,受限的是形状、颜色和尺寸。可以应用于需要大量不同标记和不同内容的体验,如:(增强书籍)、传单、广告等。
如果只是想只在项目里面展示下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后开始填写。
当你正确的完成上诉内容时,项目里就会出现你刚才下载好的模型了,你也可以根据自己的需求进行拓展。