基于阿里云实现3D模型显示（WebAR项目）

WebAR介绍

这个项目是帮朋友做的毕设…原本是四月份就打算写这篇文章的，但是由于各种原因推到了六月份。话不多说，直接开始。这个项目实现的是手机扫描二维码然后打开摄像头展示模型。webar是一个做AR的（怎么感觉是废话…），里面有各种DEMO，app、html、微信小程序…想要了解的可以去百度 webar。

demo

webar的项目我是从他们的开发者手册上找到的，有微信小程序、app、html的。因为时间有点久了。 我就只记得html的，有需要的朋友可以去看看
html项目在github上面，链接我会放到最后面。

整个项目分为两部分，一部分是阿里云服务器的配置，另一部分是网页html的实现。

网页端html

从github上下载下来的的项目解压后如下图：

直接点击EasyAR-WebAR_windows发现只是闪了一下命令窗口，然后什么都没有发生- -。（我们不需要在windows上。写这个是为了有些人需要）查一下手册发现是需要webar的秘钥。可以去webar上注册一个账号，有试用的（如果只是自己搞着玩的推荐计费方式按照日活）。

注册后，试用的秘钥填在下图config文件夹下的application内

然后再点击EasyAR-WebAR_windows就可以了。电脑会出现一个命令窗口，因为我的试用过期了…没办法给图了。窗口上大概就是一个port：xxxx
然后打开本地localhost就行了。不懂的看这篇文章

俗话说的好，实践才是最好的学习。我们直接打开对应的html页面。

1. 首先我们打开对应目录下的html。我这里选用的是TokenThreeJsExample
   直接打开index。可以在看到游览器上面有个打开摄像头的按钮，我们点击这个按钮可以看到摄像头打开，同时出现开始识别和结束识别按钮。但是点击这两个按钮都没有反应。这时打开项目目录查看文件。在目录asset\js下可看到我们整个项目的js文件。我们需要修改的地方就在里面
2. 修改js使得本地能够打开摄像头后显示3D模型。打开步骤1中的app.js。
   在33行可以看到有一个页面按钮点击的动作，动作执行后就是显示模型，那么我们只要将上图中圈出的部分移动到我们需要的位置就行了。在第六行有一个打开摄像头的按钮点击动作，只要将该代码复制到里面就可以实现打开摄像头后直接显示模型。
   
   到这里来说我们的大体任务已经完成了。我们只需要TokenThreeJsExample文件夹整个丢进服务器就行了。

由于webar这个html项目的摄像头是先列出设备的摄像头的设备号，页面中有个选择摄像头的下拉按钮，在按钮中选择需要的摄像头。朋友说需要启动的时候直接调用后置摄像头。
整个项目中的摄像头的调用是在js文件夹中的webar.js中，同时在app.js中也有调用后置摄像头的参数。提示参数如下：

// 打开摄像头  JSON.parse(videoSelect.value)
 // 打开后置摄像头参数： {audio: false, video: {facingMode: {exact: 'environment'}}}

我们只需要将上述代码填入下图中标号2中即可调用后置摄像头

阿里云服务器配置

正好赶上疫情，然后阿里云做活动，送了半年的服务器。服务器这边我用的是Apache Tomcat，系统我我用的是linux。Tomcat的配置这边我就不说了，论坛上很多的。我们直接将项目文件丢进Tomcat中，这样就可以打开网站直接运行了。（整个项目需要https支持，所以如果tomcat没有配置，模型是显示不出来的阿里云安装Tomact）

html项目下载地址