EasyARWebAR开发⼩程序记录
⼀、准备：
写文章的小程序1.EasyAR官⽹阅读《EasyAR WebAR 快速⼊门》并下载EasyAR-WebAR-Demo。
2.EasyAR官⽹阅读《EasyAR WebAR ⼩程序 快速⼊门》并下载EasyAR-miniprogram-WebAR-Demo。
3.EasyAR官⽹开通云识别图库服务（限时免费），上传需扫描的图⽚，获取token备⽤。
4.公众平台注册个⼈开发者账号，下载⼩程序开发者⼯具，阅读⼩程序开发相关内容。
⼆、原理：
1.⼩程序页⾯打开摄像头后扫描图⽚，上传到EasyAR服务器与云识别图库中已上传的图⽚进⾏对⽐，成功后返回并执⾏success⽅法。
2.扫描成功后，在success⽅法中跳转到新的⼩程序页⾯，新页⾯只有⼀个web-view组件，该组件⽤于嵌套⾃⼰服务器上显⽰模型的⽹页。
3.⽹页显⽰3D模型需要⽤到Three.js的知识，但Three.js⽆法在⼩程序⽹页上使⽤，因此需要通过⼩程序的web-view组件嵌套⽹页来显⽰3D模型。这⼀步应先⽤Three.js制作能够显⽰3D模型的⽹页，然后将该⽹页部署到⾃⼰的服务器上，最后再⽤web-view嵌套该⽹页。
三、流程：
1.使⽤web开发者⼯具导⼊EasyAR-miniprogram-WebAR-Demo，⽬录结构如下：
Demo中有3个页⾯，index、recognition、show，效果显⽰如下：
图1.index.wxml
图1为index页⾯，布局对应index.wxml，选择体验模式，“直接体验”会跳转到图3，“识别体验”会跳转到图2。
图2.recognition.wxml
图2为recognition页⾯，布局对应recognition.wxml，⽤于图⽚扫描，从EasyAR官⽹快速⼊门得知需要扫描官⽹下的产品-WebAR-⼩程序DEMO下点击“显⽰识别图”按钮时出现的图⽚，即截图中的图⽚，识别成功后会跳转到图3。
图3.show.wxml
图3为show页⾯，对应show.wxml，⽤于web端模型显⽰，进⼊页⾯后会直接显⽰模型。
2.本地部署EasyAR-WebAR-Demo，打开TokenThreeJsExample，此Example是使⽤token⽅式在Web端显⽰3D模型。主要⽬录结构如下：
其中最主要的是js⽂件夹和model⽂件夹。
js⽂件夹中是相关代码，webar.js和ThreeHelper.js是两个主要js⽂件，webar.js中包括识别、截图、读取摄像头、打开摄像头等功
能，ThreeHelper.js中则是加载3D模型，即上⽂提到的Three.js相关。app.js是控制代码，⽤于调⽤相关⽅法。
model⽂件夹是存储在⽹页上显⽰的模型。
四、使⽤⾃⼰的扫描图和模型替换官⽅扫描图和模型：
1.将步骤⼀中获取的token替换EasyAR-miniprogram-WebAR-Demo的token（recognition.js内）和EasyAR-WebAR-Demo中的token（app.js内）。
接下来，重新在web开发者⼯具上运⾏⼩程序Demo，识别⾃⼰上传到EasyAR云识别图库中的图⽚，成功后则会跳转到测试地址，显⽰的是我们在步骤三中看到的⽹页内容，屏幕中出现“打开摄像头”
按钮，点击后变成“开始识别”按钮、“停⽌识别”按钮。如果希望⼩程序跳转后直接显⽰模型，跳过浏览器的识别步骤，继续下⼀步。
3.打开EasyAR-WebAR-Demo中的TokenThreeJsExample，到app.js，查打开摄像头的相关代码，如下：
为了跳过浏览器识别步骤，我们可以将此段代码提出，复制到该监听之外，这样⽹页打开时会⾃动列出并打开摄像头，需要注意的是复制出来的代码应删去“隐藏‘打开摄像头’按钮”的那⾏代码，因为监听
外⽆法获取到“打开摄像头”按钮。
接下来查开启识别的相关代码，如下：
这⾥我们可以看出模型加载是在model:'asset/model/trex_v3.fbx'，我们可⽤⾃⼰的模型替换掉原来的模型。同样我们将加载模型的代码提出，复制到打开摄像头成功后的位置，这样，当⼩程序跳转到该⽹页时，会⾃动打开摄像头并加载⾃⼰的模型，完整代码如下：
复制出来的打开摄像头代码就在原来监听外，同时加载模型代码在打开摄像头成功时的消息输出那⾥，并且模型替换为⾃⼰的test.fbx。
五、继续测试，扫描不同图⽚出现不同模型的功能：
此功能需要区分图⽚，根据图⽚显⽰相应的模型，因此需要在web-view的链接中加⼊参数，这样跳转后才能根据参数区分图⽚。EasyAR-miniprogram-WebAR-Demo中扫描成功后返回的数据查看后包含图⽚名称，因此测试中使⽤名称区分图⽚。接下来使⽤web开发者⼯具对EasyAR-miniprogram-WebAR-Demo进⾏修改。
1.定义全局变量name，⽤来存储图⽚名称。⼩程序全局变量定义在app.js的globalData字段下，使⽤时⾸先获取⼩程序app实例，再根据实例调⽤globalData下的name变量，getApp().globalData.name。
2.在recognition.js中⾸先获取app实例变量，在开头写⼊ var app = getApp() ，接下来到图⽚扫描成功的⽅法，将返回数据中的图⽚名称赋值给name全局变量。
3.在show.js中定义参数变量param，⽤来传递name。在onLoad⽣命周期函数中将全局变量name的值赋给param。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。