用AR.js实现webAR(新手入门)

开发需要准备的东西:

1.域名

2.服务器

3.web前端的一些基本知识(这个不研究深的话也是可以没有的)

4.耐心,这个真的很重要,改配置是真的挺无聊的

开发WebAR注意事项:

1. WebAR 适用于哪些平台?

1.ios系统需要ios11以上的才能运行,用Safari浏览器,不支持腾讯内核浏览器

2.安卓火狐浏览器等

3.PC Chrome(谷歌)浏览器

可能还有其他的支持,我这里只列出我自己试过的支持的浏览器

 

博主用的是阿里云买的域名 + 腾讯云买的服务器,哈哈,言归正传,开始了

 

一,服务器搭建

1.作者用的是腾讯云服务器,有时间写一个关于服务器搭建的博客,

腾讯云+phpStudy搭建服务器,链接(有时间再写)

用AR.js实现webAR(新手入门)_第1张图片

 

2.如果你的域名不支持https协议,我们则需要使phpStudy下Apache环境安装SSL证书实现https链接,毕竟webar不支持 http 协议:

(1)域名解析:将你购买的域名和IPv4地址绑定

用AR.js实现webAR(新手入门)_第2张图片

(2)SSL证书获取:

用AR.js实现webAR(新手入门)_第3张图片

用AR.js实现webAR(新手入门)_第4张图片

用AR.js实现webAR(新手入门)_第5张图片

3.现在试试你能不能用Https:// 访问你的网址,哈哈,当然是不能的 要是那么简单,前面干嘛说要很大的耐心,接着来

(1)首先,开启apache的编译ssl模块,如图打开phpstudy—其它选项设置—PHP扩张及设置—php扩展—php-openssl前面打勾

用AR.js实现webAR(新手入门)_第6张图片

(2)如图点击打开修改httpd.conf配置文件,打开找到#LoadModule ssl_module modules/mod_ssl.so,去掉前面的注释符#(保证前面没有#号),使得ssl模块生效。

增加一条引用语句   Include conf/vhosts_ssl.conf

用AR.js实现webAR(新手入门)_第7张图片用AR.js实现webAR(新手入门)_第8张图片

 

 

(3)依次打开phpstudy安装文件,打开Apache打开conf文件,在conf文件夹中创建一个名为vhosts_ssl.conf的配置文件。编辑vhostsssl.conf文件,增加如下内容:(特别需要注意的是,当时博主这段代码直接复制的是百度的,key值忘改成自己的了,所以大家一定要小心小心再小心)

用AR.js实现webAR(新手入门)_第9张图片用AR.js实现webAR(新手入门)_第10张图片

Listen 443


    DocumentRoot "C:\php\WWW"
    ServerName www.zhaoxiaomin.top
    ServerAlias zhaoxiaomin.top
    SSLEngine on
    SSLProtocol TLSv1 TLSv1.1 TLSv1.2
    SSLCipherSuite HIGH:MEDIUM:!aNULL:!MD5
    SSLCertificateFile "C:\php\Apache\cert\public.pem"
    SSLCertificateKeyFile "C:\php\Apache\cert\1534684156422.key"
    SSLCertificateChainFile "C:\php\Apache\cert\chain.pem"
 
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
 


(4)将刚才下载的SSL证书放到新创建的这个文件夹下

用AR.js实现webAR(新手入门)_第11张图片

(5)防火墙端口入站规则哪里关闭443,绿勾变成灰色就关闭了,关闭后现在重启phpstudy,正常重启后,在浏览器里面输入https://的域名就能看到安全锁出来啦。

地址栏未能显示绿色锁标是因为网站有http非加密资源,如图片,css,js等,需要全部调整为https开通协议资源才能挂锁成绿色。

用AR.js实现webAR(新手入门)_第12张图片

(6)HTTP301重定向到HTTPS,配置完SSL证书,我们需要进行站点301重定向,将http的地址强制跳转到https地址,Apache环境下,在站点根目录添加.htaccess文件,如图所示

用AR.js实现webAR(新手入门)_第13张图片

(7)在.htaccess文件中添加以下内容:

RewriteEngine onRewriteBase /RewriteCond %{SERVER_PORT} !^443$RewriteRule ^.*$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R=301]

然后保存文件,并将文件上传到网站根目录,如图所示

用AR.js实现webAR(新手入门)_第14张图片

二.WebAR + AR.JS实现AR功能

4.下载AR.js 链接地址:https://github.com/jeromeetienne/AR.js

解压文件至你phpStudy的网站根目录下,即phpStudy安装目录下的WWW文件夹下

用AR.js实现webAR(新手入门)_第15张图片用AR.js实现webAR(新手入门)_第16张图片

5.iphone手机ios11以上用safari浏览器手机上访问,安卓手机用火狐浏览器访问

AR.js官方给的案例和识别图如下:

用AR.js实现webAR(新手入门)_第17张图片用AR.js实现webAR(新手入门)_第18张图片

 

6.我测试的Demo如下:

我的服务器2018年8月5号到期,过了这个时间大家就看到这里就行了,不必往下看了.

<------------------------------------------------------------------------------------------------------>

https://zhaoxiaomin.top/AR.js-master/AR.js-master/three.js/examples/dev.html

扫描该图片:

用AR.js实现webAR(新手入门)_第19张图片

效果如下:

用AR.js实现webAR(新手入门)_第20张图片

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(AR,服务器)