基于AR.js的WebAR (updating)
AR.js的文档地址：https://ar-js-org.github.io/AR.js-Docs/
在用的时候，只需要导入js，然后设置模型的参数就可以了，访问的时候要开启https
导入的模型推荐使用gltf/glb,相对较小，而且可以带有动画
一个AFRAME版的样例:
识别图像后出现一只蜜蜂，可以进行单指旋转，双指缩放
demo地址: https://ar.blowhail.cn/bee.html
图像地址:http://tu.blowhail.cn/20-12-27/b01bed6821125.png
<script src = "https://ar.blowhail.cn/AR_js/aframe-master.min.js" ></script>
<script src = "https://ar.blowhail.cn/AR_js/aframe-ar-nft.js" ></script>
<!-- gestures.js 缩放组件 -->
<script src = "https://ar.blowhail.cn/AR_js/gestures.js" ></script>
<!-- extras 动画组件 -->
<script src = "https://ar.blowhail.cn/AR_js/aframe-extras.min.js" ></script>
<!-- 加载时的背景 -->
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
gesture-detector
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- we use cors proxy to avoid cross-origin problems -->
<!-- nft的url是目标图像的nft格式的地址文件夹 -->
<a-nft
type="nft"
url="https://ar.blowhail.cn/cat/cat"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<!-- animation-mixer 控制模型动画 -->
<a-entity
gltf-model="Bee.glb"
scale="5 5 5"
position="50 150 0"
animation-mixer="repetitions: Infinity"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
<!-- 镜头设置，position设定相机的视角位置 -->
<a-camera
id="camera"
position="0 8 20"
>
</a-camera>
------------------------------------------------------
<!-- 灯光 -->
<!-- directional 是直射类型的灯光，类似于一个悬挂的太阳，position的参数是矢量(1,0,0与100,0,0的结果是一样的) -->
<!-- castShadow 是开启投射阴影 要想让物体有阴影则至少需要一个灯光开启castShadow -->
<a-entity light="type: directional;
intensity: 0.8;
castShadow: true;
shadowMapHeight:2048;
shadowMapWidth:2048;
shadowCameraTop: 10;
target:#model;"
position="5.5 5.1 3.2"
xrextras-attach="target: model; offset: 12 15 3;"
shadow
></a-entity>
<!-- ambient 是全局光照 -->
<a-light type="ambient" intensity="0.5"></a-light>
<!-- 要让物体接收阴影，就需要给物体添加以下代码 -->
shadow="receive: true"