# WebAR

## 原理

* **调用AR.js和A-frame库来实现识别Marker图像的位置，并在位置上绘制图形或动画**

## 实现代码

```javascript
<!doctype HTML>
<html>
<!-- include A-Frame obviously -->
<script src="/static/js/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="/static/js/aframe-ar.js"></script>
<!-- include A-Frame-Extras -->
<script src="/static/js/aframe-extras.min.js"></script>

<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs>
    <!-- 加载 gltf 模型 和 自定义的标记 Marker 图像 -->
    <a-marker preset='custom' type='pattern' url='/static/marker/pattern-marker.patt'>
      <a-entity gltf-model="/static/gltf/scene.gltf" scale="1.5 1.5 1.5" rotation="-160 0 0" position="0 0.5 0">
      </a-entity>
    </a-marker>
    
    <!-- 添加摄像头 -->
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
```

## 备注

* 寻找GLTF模型的地方：[https://sketchfab.com/feed#](https://sketchfab.com/feed)

## Github地址

* <https://github.com/ns2250225/ns2250225.github.io>

## 效果展示

![](https://4213785160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJmv24L2T-XOth3TT05%2F-LJnSN8uHIss_hm79tzx%2F-LJnUkvtGNLZheJ0WhT9%2Fmarker.png?alt=media\&token=add68e16-0ae0-490a-8da2-4d14f90ce2b9)

![](https://4213785160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJmv24L2T-XOth3TT05%2F-LJnSN8uHIss_hm79tzx%2F-LJnUnDH09f3NW7Zwnsu%2Fscreenshot.png?alt=media\&token=530a708c-3ff2-42ae-88e2-71aadc47606e)
