介绍最近在学习AR.js，希望通过AR.js实现AR（增强现实）在网络上的应用。网上关于AR.js的教程很少，资料比较全的是官网的一个文档（AR.js的文档好像要翻墙才能访问，中文版至今没看到).熟悉AR.js的同学应该知道AR.js基于三种方式展示AR内容：1）ImageTracking2）LocationBasedAR3）MarkerTrackingMarkerTracking是最常见的基于maker的AR展示方式。今天要讲的是在学习使用ImageTracking展示AR内容时遇到的问题和解决方法。（这里不详细介绍这三个细节，大家可以查看AR.js文档）关键词：AR.jsA-FrameImageTrackingnfturlconfigurationImageTrackingIntroductionImageTracking，顾名思义，就是展示ARbasedonapictureContent，其实原理和basedMarkerTracking类似，就是根据图片的特征点来识别和跟踪图片。AR.js集成了A-Frame和three.js两个框架，基于这两个框架可以实现ImageTracking。图像要求用于图像跟踪的图像有一定的要求。原则上，图像越精细越好。推荐使用300dpi及以上的图片，72dpi的图片勉强可以接受，但AR显示设备必须距离很近，并且必须保持静止。GenerateImageDescriptors对应ImagesAR.js官方提供了一个web工具，可以将图片转化为ImageDescriptors。AR.js实际上使用生成的图像描述符来进行图像识别和跟踪。根据图片生成的ImageDescriptors包含三个文件，分别是后缀名为.fset、.fset3、.iset的文件。假设你生成的ImageDescriptors文件名为：demo.fset、demo.fset3、demo.iset，那么你的ImageDescriptors名称为demo（去掉后缀名）。官方Demo试用了官方基于A-Frame框架的ImageTracking示例。关键的html代码如下：蓝色线条画出了ImageDescriptors文件的URL路径（即nfturl路径）和gltf格式的3D模型的URL路径。.图像描述符URL末尾的trex是图像描述符的名称。PS：测试运行官方demo很流畅，就是有点慢。毕竟官方的demo文件资源都在国外的服务器上。部署自己的web服务将官方demo部署到自己的web服务器上，将上面蓝线的URL替换为自己的ImageDescriptors路径和gltf格式的3D模型路径。发现只替换gltf-model是可以的，但是替换nft的url后，demo运行失败，界面一直卡在调试的console。报错信息为：ErrorinloadingmarkeronWorker404，确认是ImageDescriptors文件加载失败，ImageDescriptors文件URL访问失败。问题排查查看AR.js加载ImageDescriptors文件（aframe-ar-nft.js文件）的源码，发现ImageDescriptors加载函数如下：varonLoad=function(){ar=newARController(msg.pw,msg.ph,参数);varcameraMatrix=ar.getCameraMatrix();//ARController设置完成后，我们加载NFTMarkervarregexM=/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)/igmvarreM=regexM.test(msg.marker);if(reM==true){console.log('msg.marker=',msg.marker);nftMarkerUrl=msg.marker;}elseif(reM==false){console.log('basePath=',basePath);nftMarkerUrl=basePath+'/'+msg.marker;}console.log('nftMarkerUrl=',nftMarkerUrl);ar。loadNFTMarker(nftMarkerUrl,function(markerId){ar.trackNFTMarkerId(markerId);postMessage({type:'endLoading'})},function(err){控制台。log('在Worker上加载标记时出错',err)});从源码可以看出，如果我们指定nft的URL是通过域名提供的，比如官方demo的https://arjs-cors-proxy。herok...，直接使用我们传入的URL；否则，使用basePath+我们传入的URL（msg.marker变量是我们传入的URL）。如果加载出错，console.log('ErrorinloadingmarkeronWorker',err)打印错误信息。调试器发现由于我部署的服务是localhost:http://localhost:8088/test，或者http://127.0.0.1:8088/test不是域名，所以basePath+我们传入的URL是使用Branch，打印调试结果如下：从打印结果来看，basepath值为http://127.0.0.1:8088，而不是http://127.0.0.1:8088/test（test为web名称serviceIdeployed)，导致拼接的ntf的url路径错误。问题解决如下图修改nft的url：问题结论AR.js（其实是A-Frame）在处理nfturl和modelurl时存在差异。正确的配置方式有如下两种：1)html部署web服务必须支持域名访问，ntfurl必须配置为ImageDescriptors文件所在的完整域名访问路径；2）html部署本地web服务，使用127.0.0.1或者服务IP地址访问，那么ntf和model的url路径一定要配置成相对路径，如上图。并且nft的路径必须包含web服务名，而modle的url路径不包含web服务名。PS：感觉A-Frame的处理不是很合理。毕竟不是每个人一上来就有域名服务器的。在本地部署AR相关的web应用（web服务只能通过IP访问），nft的url配置行为与model的url配置行为不一致，容易导致错误。
