webAR/VR系列开发教程（1） 小白入坑篇

时间：2023-05-28 19:45:02 | 来源：网站运营

时间：2023-05-28 19:45:02 来源：网站运营

webAR/VR系列开发教程（1） 小白入坑篇：序言：如今的AR和VR发展迅速，但是每个都要一定的局限性，在大多数的的情况下，AR体验都需要客户下载特定的软件来使用，我想，超过90%的人都不愿意拿出手机去扫描下载一个软件专门体验一个程序。但是webAR的快捷性为用户的体验提高了一个层次，还能类似病毒式的传播自己的项目。所以快毕业了，打算将自己学的东西结合起来。写一个系列文章分享一下自己的项目。后面会折腾webAR+云识别， 全息，裸眼等相关开发文章。欢迎大家和我一起探讨。

第一章：AR.js新手入门介绍

为什么使用AR.js：在现在的webAR发展中，我个人觉得，隶属easyAR和AR.js两者比较成熟。但是两者之间各有优缺点。我在开发过程中发现，1.easyAR在手机端浏览器的获取摄像头权限比AR.js好，主要针对谷歌浏览和苹果siri浏览器的测试。为什么会这样。后面文章会介绍和重点解决摄像头获取和显示的问题。2.easyAR的识别功能收费。而AR.js是完全开源的。3.easyAR识别无法实习物体跟随（目前为止），AR.js识别成功后能实现物体跟随。

2.第二章：AR.js的使用

1.先到AR.js开源项目中下载项目：下载地址为：AR.js下载地址。

2.点击下载链接后如下图所示操作：

3.AR.js 使用的主体框架会在后面逐一介绍并且如何使用。下载项目压缩包后。就要安装本地web服务了。我推荐使用phpstudy一键安装。具体步骤如下图：

点击下载地址进行软件下载。如有不明白之处，可＋最下方作者qq联系。

4.phpstudy安装使用教程。过程如下所示：

点击解压下载好的phpstudy安装包。如下图。个人建议小白默认安装路径：

安装完成后。找到自己的安装路径。如我的路径是C：/phpstudy

5.到上面这一步标明已经启动了本地web服务。接下来。我们需要配置本地网站路径。如下图过程所示：

点击mysql管理器：

点击站点域名管理：出现如下图所示。然后点击新增，网站目录可以自己定义，小白建议默认。

最后点击保存。然后开始找到你的网站根目录下：

记住一点：phpstudy运行程序不能关闭，保持一直运行

我的根目录如下，

打开电脑浏览器，输入127.0.0.1测试自己的web环境是否正常：如下图所以

到这一步为主，你的web环境配置好了。别骄傲，这只是建高楼大夏中的一块石头，接下来，就是将AR.js项目压缩包解压。放进我们的网站根目录下运行体验了：

6.运行AR.js 找到下载好的AR.js项目压缩包。解决后如下图所示：

复制文件夹内的所有文件。粘贴到我们的网站根目录下：如下图所示：

到这一步，环境已经全部配置完成。开始体验了，本地路径如下。想体验其他案例只需更改后面的html文件。example文件夹下面很大案例：

扫描该图片体验：

7.还有一点是。小伙伴们说我想在手机上体验咋办。没问题，下面教你如何做;

首先。确保你手机和你的电脑是连同一个网络，意思就是同一个局域网内，包括连相同的一个wifi。然后打开你的电脑，右击左下角的微软田。如下所示：

点击运行：

手动输入cmd。点击确定后，输入ipconfig如下图：找到电脑的ipv4地址：

然后将该地址http://127.0.0.1/aframe/examples/mobile-performance.html改为http://192.168.168.113/aframe/examples/mobile-performance.html 使用你的ipv4替换本地地址，最好使用你的手机浏览器打开该地址。就可以在手机上面体验了。结果效果图以后会跟新上来。

总结：这是开发过程的的基础教程。为后面的系列教程打下基础。小白可以跟体验一下。获取成就感，大神可以跳过该入门教程，欢迎来到下面的开发教程一起讨论。建大夏也要一砖一瓦来。下一展介绍aframe的aframe-watcher叫环境配置和使用教程，完善webAR的开发环境，提高开发速度。

最后。欢迎有兴趣的朋友加作者QQ一起讨论学习。相信着那个相信着自己的自己。