Demo效果

可在手机浏览器中打开摄像头，识别特定的图片。
识别成功后显示对应的模型，模型位置会跟踪图片所在的位置，可对模型进行旋转或缩放

提示：以下是本篇文章正文内容，下面案例可供参考

项目地址

Demo项目地址
https://github.com/a86861636/webAR-demo

AR.js项目地址
https://ar-js-org.github.io/AR.js-Docs/image-tracking/

arjs-gestures 旋转功能项目地址
https://github.com/fcor/arjs-gestures

项目文件目录

部署使用

手机浏览器打开摄像头需要https协议（必须）

项目放在服务器上部署，html里的文件路径可能需要自行调整。
打开index.html，允许访问摄像头，等待模型加载（加载完成黑屏会消失）。
打开项目里的图片，摄像头对准图片，在画面中调整适中的图片大小，模型就会显示出来。

页面代码

<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="aframe-master.min.js"></script>
<script src="aframe-ar-nft.js"></script>
<script src="gestures.js"></script><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head><!-- style for the loader -->
<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. Loading may take a while according to the device computational power --><div class="arjs-loader"><div>正在加载AR模型，请稍候...</div></div><!-- a-frame scene --><a-scene vr-mode-ui="enabled: false;" gesture-detector renderer="logarithmicDepthBuffer: true;" embeddedarjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"><!-- 图片处理后文件路径，不带文件拓展名！ --><a-nft type="nft" url="nft/smoking_boy/smoking_boy" smooth="true" smoothCount="10" smoothTolerance=".01"smoothThreshold="5"><!-- 展示模型的路径 --><a-entity gltf-model="model/smoking_boy/scene.gltf" scale="50 50 50"gesture-handler="minScale: 0.25; maxScale: 10" position="100 0 -200" rotation="-90 0 0"></a-entity></a-nft><!-- static camera that moves according to the device movemenents --><a-entity camera="fov: 190"></a-entity></a-scene>
</body>

替换想要追踪的图片

普通格式的图片，AR.js并不能进行识别追踪，需要对图片进行处理。

图片处理有web版和node版。

注意
选择识别度高，分辨率高的图片，否则会识别不出来。
等待时间比较长，训练文件越大，等待时间越长，训练完成后替换掉nft文件夹里面的文件。

(1)web版（推荐使用）

https://carnaux.github.io/NFT-Marker-Creator/#/

点击左边，放入一张图片，然后点击右边Generate生成图片，等待一段时间。
正确使用返回3个文件的下载，格式分别是 .fset .fset3 .iset

(2)node版

https://github.com/Carnaux/NFT-Marker-Creator

1.复制下载整个项目
2.安装依赖 npm install
3.把你想要的图片放到目录里
4.运行 node app.js -i (图片文件路径)
5.处理后的文件生成在 output 文件夹里，3个文件，格式分别是 .fset .fset3 .iset
6.把 output 里的文件替换掉 demo 目录 ntf 文件夹里的文件

替换模型

把model/里面的模型文件进行替换。
demo里的模型格式是 .gltf，其他格式没有进行尝试。

用AR.js做图片追踪的webAR Demo相关推荐

ar.js 追踪图片mark播放视频，并且根据是否识别控制视频播放操作
首先完成了视频纹理的加载,可以持续的播放视频其次完善了视频播放感受,清除跳跃.跳帧.抖动.每次识别重新播放等现象,不错的感受,可以达到商业效果. 最后,通过通读ar.js代码,终于找到了通过识别进行 ...
js在一个指定元素前添加内容_WebAR开发指南（1）---使用AR.js实现第一个WebAR demo...
前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏我们具体的来通过一些框架实现WebAR效果. 关于AR.js AR.js是一个轻量级的 ...
WebAR开发指南（1）---使用AR.js实现第一个WebAR demo
以下内容由公众号:三次方AIRX(国内领先的AI.AR.VR技术学习与交流平台) 整理前面有一篇文章万字干货介绍WebAR的实现与应用分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏 ...
图像追踪、AR识别、AR.js应用
一.创建图片描述符 1.1 下载创建图片描述符的项目demo链接 https://download.csdn.net/download/qq_39951524/87545994?spm=1001.20 ...
用AR.js实现webAR(新手入门)
开发需要准备的东西: 1.域名 2.服务器 3.web前端的一些基本知识(这个不研究深的话也是可以没有的) 4.耐心,这个真的很重要,改配置是真的挺无聊的开发WebAR注意事项: 1. WebAR ...
3D开发-AR.js 图片匹配
图片匹配方式加载一张图片作为识别的pattern marker. 代码 AR.js/three.js/examples/marker-training/examples/patternmarker- ...
零、js用图片做简单的倒计时
用js做一个简单的倒计时思路: 首先获取当前时间,然后每隔一秒执行一 /*写一个获取当前时间方法*/ function update() { var div=doucument.getElementB ...
AR.js 学习笔记
中文文档链接: 首页 | AR.jsAR.js 是 Web 端增强现实的轻量级框架,具有图像追踪.基于位置的AR和标记跟踪等功能.http://febeacon.com/arjs-docs-zh-cn ...
three.ar.js_我们如何通过AR.js使产品吉祥物栩栩如生
three.ar.js by Mateusz Tarnaski 由Mateusz Tarnaski 我们如何通过AR.js使产品吉祥物栩栩如生 (How we brought our product ...

用AR.js做图片追踪的webAR Demo