AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）

​

AR.js开发问题详解（二维码识别不出来及AR二维码如何进行训练）

1.大家碰到的很多都是二维码识别不出来的情况。

原因： 周围环境的光太强或太暗，遮挡了二维码的信息，摄像头识别不到全部的信息。

    举个例子来说，当你手机的亮度在100%，你在电脑上运行程序，这时候你可以看电脑里面的影像根本不是全部的二维码信息，就是识别不清。

解决办法： 1.去打印二维码，要高质量的打印，推荐相机纸，这样不会遗漏二维码信息，清晰度度很好，识别效率很高。

              2.或者你用手机打开程序，自己建一个服务器即可，用电脑打开二维码进行识别，电脑亮度不要太亮。

注意: 如果要服务器访问的话，需要HTTPS的支持。

（这里还有一个重要的原因，就是你训练的图片的细节程度尽量高，简单来说，图片要求简单，不要过于复杂。）

2. 第二个AR二维码如何进行训练

我的上一篇WebAR博客里面写了两种方法，但是我只给了链接，但是如果仔细研究的话，并不难懂。

上一篇博客 AR.js打造高效WebAR（three.js+AR.js）

接下来，我给大家讲解第二个比较容易的方法。

大家在Github上下载好demo后，找到AR Marker Training这个东西。

代码位置在：AR.js-master\three.js\examples\marker-training\example

运行起来效果图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JpAisqBg-1652945669323)(https://juejin.cn/ “点击并拖拽以移动”)]​

我们说先来说明一下几个按钮的作用：

UPLOAD按钮： 上传图片替换黑框中间的图片。

DOWNLOAD按钮： 下载文本格式的二维数据，这个数据文件用于程序的识别。简单来说，就是一个二维码对应一个数据文件，我们将数据文件加载进程序，当我们摄像头对准二维码的时候，程序就给寻找是否具有这个二维码的数据文件，从而进行匹配。

在我写的demo里面：加载数据文件的代码位于：

// init controls for camera
var markerControls = new THREEx.ArMarkerControls(arToolkitContext,camera, {
type : 'pattern',
patternUrl : 'arcode/marker89.td',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
// as we controls the camera, set changeMatrixMode: 'cameraTransformMatrix'
changeMatrixMode: 'cameraTransformMatrix'
}) 

你只需训练出数据文件加载进程序（替换patternUrl的路径），当扫描相应二维码就会渲染3D场景。我的那个二维码是自己开发程序写出来的，你要看懂这个训练工具的源码，就能随心制作你需要的训练二维码工具。

注意： 外面的边框尽量不要去掉，会导致识别效率下降，ar.js里面有说明的，但是为了美观的画，我们可以调节黑框的比例。

​