web新手之使用easyAR实现WebAR

为了方便AR开发交流,博主建立了一个群 :891555732,欢迎一起讨论


easyAR出了webAR,正好是老板感兴趣的内容,可是我一个学unity不懂网页的人要去研究,初始难度就感觉不是一般的大,本文中记录我的研究史


2019.1.23补充默认打开后置摄像头

感谢群中 . 大佬的贡献

更改APP.jsweb新手之使用easyAR实现WebAR_第1张图片

 

 


8.22补充新版本更改内容 : 

时间过去良久,老板才要做示例程序,此时easyAR的webAR示例程序也更改了,因此将最新的更改同步更新上来

首先从Github下载的demo解压后目录如下: https://github.com/gentwolf-shen/EasyAR-WebAR-Demo

web新手之使用easyAR实现WebAR_第2张图片

可能会有一些童鞋找不到配置文件,以下是recognize.php所在目录:

web新手之使用easyAR实现WebAR_第3张图片

因此要将此文件拷贝到,然后再进行下面的配置 :

web新手之使用easyAR实现WebAR_第4张图片

另外补充评论区童鞋的一点,不知道为什么新的官方demo会忘记加recognize的后缀名:

web新手之使用easyAR实现WebAR_第5张图片


1.three.js学习

   大学接触过网页,因此还是有点点前端的基础,里面水还是太深,我决定先看加载模型的three.js,在此贴上中文学习网站:http://www.hewebgl.com/article/articledir/1

2.官方教程

       http://forum.easyar.cn/portal.php?mod=view&aid=27

3.官方示例程序:

      完整的反正是看不太懂啦,找到关键的地方替换就成

第一步:替换recognize.php中的东西,根据你图库的key等三个值进行替换

       web新手之使用easyAR实现WebAR_第6张图片

 第二步:更改模型的位置

       找到app.js,我是使用本地加载模型的,从服务器加载的就没研究啦

web新手之使用easyAR实现WebAR_第7张图片

第三步:安装apache并启动(请跳过看第四步,此处只为记录安装apache)

安装apache参考:https://www.cnblogs.com/jave1ove/p/5486427.html(从下载到安装,非常全,亲测有效)

启动期间遇上的问题解决:https://blog.csdn.net/liuensong/article/details/6738041

在html运行php文件参考:https://blog.csdn.net/guyuealian/article/details/50556906

记得将整个项目Copy到DocumentRoot指定的目录下

        web新手之使用easyAR实现WebAR_第8张图片

第四步:访问

满怀希望的开始访问:https://localhost:8080/SimpleThreeJsExample/index.html

可是还是不能识别,请教大佬说要用集成的apache环境

下载链接:https://www.apachefriends.org/zh_cn/download.html

  • 首先先卸载之前安装的apache,记得要根据service.msc中apache名字进行卸载,网上大多数是sc delete apache,但是最后这个apache是你服务中的名字,具体卸载过程请自行百度
  • 再解决80端口被占用的问题,关闭IIS,具体也请百度
  • 安装好下载的XAMPP
  • 启动apache

             web新手之使用easyAR实现WebAR_第9张图片

  • 将项目放入htdocs

   web新手之使用easyAR实现WebAR_第10张图片

 

  • 访问

       中间又遇上了个坑,因为默认端口就是80,所以访问地址不用加端口号,虽然不太理解为什么加了端口号访问不了,哈,能用就行啦

     访问地址:https://电脑ip/SimpleThreeJsExample/index.html(注意没有s就没办法打开摄像头)

注意事项:模型路径asset前面和recognize.php路径不要加/,会访问不到模型和recognize.php(网页运行按F12可以看错误输出等)

 

与模型互动使用three.js

  1. 例子网址:https://threejs.org/examples/?q=inter#webgl_interactive_cubes_gpu
  2. 调整光源网址:https://www.cnblogs.com/amy2011/p/5761174.html
  3. 移除模型:

       ①.首先引入jqury              

        ②.模型加载出来的时候,页面上会多一个canvas 标签,删除这个标签就可以了

$('canvas').remove();

    4.webGL系列学习:

       https://www.cnblogs.com/xulei1992/tag/webGL/

   5.显示与隐藏模型 : https://blog.csdn.net/niuge8905/article/details/80860497

   6.three.js笔记 : https://blog.csdn.net/qq_30100043/article/category/7003591

   7.three.js光源详解:http://www.hangge.com/blog/cache/detail_1812.html

问题记录:

1.识别成功模型加载不出来

报错如下图所示:

 

                     web新手之使用easyAR实现WebAR_第11张图片        

原因:

       模型贴图没有加载到

 

2.网络错误

                                                

看看key等三个参数有没有正确填写,比如没有去掉尖括号

 

你可能感兴趣的:(webAR,easyAR,WebAR以及微信小程序)