• 您现在的位置:首页 » 知识库 » 软件开发 » AR/VR开发 AR/VR开发
    AR.js 初探
    发布日期:2018-03-16

    写之前说几句,以下示例和参考都是github上的开源作品,小编只是分享在使用过程中的踩坑和开发心得。本文适用于小白,由于例子中可能需要使用到shell命令,小编的电脑操作系统是windows 7,如果是mac请自行转换为对应的命令行。

    AR技术(增强现实技术Augmented Reality,简称 AR),AR技术在Native中已经兴起了,并且市场上有许多成功的APP,但是对于JavaScript怎么来玩转AR呢?下面我来简单的给大家演示两个不同版本,不同场景的AR小例子。

    1.首先需要先到github上搜索ar.js,如下图,有2.8K star的就是了。

    目录结构如下,大家可以download zip,或者git clone下来

    咱们的例子主要在这个开源库上更改,它的一级目录,aframe data three.js webvr-polyfill,一看就很清晰了,今天咱们单刀直入,只看three.js部分,当然也要依赖于data目录里的数据。

    事先准备,为了以后的灵活扩展,建议大家下载一份最新的three.js源码,里面有完整的例子和源码可以借鉴。

    把项目download下来以后,需要部署到web服务器上,然后运行一下里面的例子,下面我以dev.html举例。目录结构如下:

    这个页面比较简洁,不到300行的代码,咱们需要关注两块内容,就可以完成对这个页面例子的改动。

    这几行代码什么意思呢,就是一个匹配的规则,匹配的文件是data目录中的Market标识,说白了就是用让摄像头识别这个标记,官方示例给的标记是patt.hiro,这个标记的来源图片对应着data目录中的images/hiro.png 这张图,怎么用这张图来生成patt.hiro这个标记呢,这时我们需要使用一个SDK工具,微小轻量级的,大家别担心是很重的安装包。这个工具叫artoolkit,就是AR工具箱,进入官网以后点download下载,我选择的是这个

    安装完成以后,进入到D:\Program Files (x86)\ARToolKit5\bin 目录下,接下来我们就要自定义一个标记了,这里的标记是传统的长方形标记,第一代market,稍后会增加自然图片的market,这里第一代market我是用div画的,具体的效果如下:

    最外层的边框 最好为黑白色,这个是官方的文档上建议的 参考链接market,然后呢把这个效果截图保存到我们刚才下载的SDK D:\Program Files (x86)\ARToolKit5\bin\image下,没有image目录就新建一个,用cmdD:\Program Files (x86)\ARToolKit5\bin目录,运行mk_patt.exe

    会弹出相机的配置选项,默认的确定就行,然后相机启动以后,把我们刚才生成的图片,对准相机然后相机识别以后会出现红绿色边框线,并且出现左上角识别的文字,这时请注意文字的方向是否正确。


    然后点击鼠标左键,回到命令行,输入文件名称patt.td,然后再当前的Bin目录下找到该文件

    回到AR.js-master项目中,打开data/multi/目录把刚生成的标识文件放进去,接下来回到three.js/examples/dev.html中,在chrome中打开该页面,这里有个坑,如果是外网想访问摄像机,必须走https协议,下面是我web服务的url地址:

    127.0.0.1:18080/AR.js-m

    效果如下:

    这里声明必须使用两台设备,我的电脑打开我开发的网页,手机上保存的是我们刚才生成的market!也可以使用两台手机,最好是比较新的android机器,支持webrtc的设备

    接下来如果例子运行成功以后,大家会发现我的3D模型和官方的例子并不一致,模型怎么替换呢,这就涉及到前面我说的第二处注意的地方,替换模型,并不需要改大量的源码,只需要注释掉一小部分就行。

    我注释掉的部分是官方的模型运行的代码。上面部分则是three.js中的源码,我这是在红框的地方更改一下模型的定位。我这个模型大家可以直接参考three.js源码中three.js-r82\examples\webgl_loader_collada.html 这个html文件,可以直接运行的例子,将如下代码替换掉dev.html中我注释的部分即可,具体请参考截图,并不是完全替换

    var loader = new THREE.ColladaLoader();
     
    loader.options.convertUpAxis = true;
    loader.load( './models/collada/monster/monster.dae', function ( collada ) {
           dae = collada.scene;
           dae.traverse( function ( child ) {
           if ( child instanceof THREE.SkinnedMesh ) {
    var animation = new THREE.Animation( child, child.geometry.animation );
                      animation.play();
                   }
                 });
                 dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
                dae.updateMatrix();
                init();
                animate();
    });
     

    还需要引入依赖的js文件,只需要把这几个文件增加到AR.js-master项目中即可,three.js已经有了,余下的拷过去就行。

    最后一个自定义标识的ar h5小程序就生成了,大家可以替换自己想用的3D模型,也可以条形码生成market,也可以将标识打印到A4纸上,用手机打开url掉出照相机,对着该market一扫,就出现了增强现实的模型,很赞吧!

    接下来说说自然图片的标识怎么生成:

    先使用SDK工具进入到D:\Program Files (x86)\ARToolKit5\bin目录,我在这新建一个image文件夹,里面拷了一张.jpg的图片,然后用命令行打开这级目录:

    直接enter 使用默认值,到这一步需要输入分辨率

    默认是220,然后再输入一个区间,按照提示输入6220

    然后就会采集图片的坐标点

    收集完成以后会生成如下文件

    我们将生成的NTF文件拷入到AR.js-master项目中data/dataNTF中,我这里新建了一个目录叫dayan的文件夹,并将文件粘贴进去,标识生成以后需要做测试了,怎么测试呢,找到如图的nft_threejs.html,这是官方用来测试自然图片的demo.

    找到加载标识的地方,这里需要替换一下路径,官方的路径在web服务上会有问题

    这里需要注释一下这个function回调里的代码,


    替换成如下代码:

    var markerRoot = arController.createThreeNFTMarker(markerId);
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load(location_path+ 'three.js/examples/models/dae/monster.dae', function (collada) {
           dae = collada.scene;
           dae.traverse( function (child) {
    if (child instanceof THREE.SkinnedMesh) {
           var animation = new THREE.Animation( child, child.geometry.animation );
           animation.play();
        }
    });
           dae.position.z = 40;
           dae.position.x = 80;
           dae.position.y = 80;
           dae.rotation.set( 0,Math.PI/2,Math.PI/2);
           dae.updateMatrix();
           markerRoot.add( dae );
           arScene.scene.add(markerRoot);    
     
    });

    最后代码如下图,

    然后我们来跑一下我们的自然图片例子。效果如下

    如果大家需要调整模型的位置和角度,请更改positionrotation的值,涉及到一定的数学原理,不会的自己调调找感觉。

    最后把我制作的market图片贴一下


    参考文档:

    Creating and Training Traditional Template Square Markers
    Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image
    NFT Utilities for ARToolKit

    demo list:

    测试AR例子
    自然图片识别例子

    github源码:
    dragonHu/ar_test_demo

    都是国外的网站,打开可能比较慢,然后大家阅读英文文档吃力的,可以使用google翻译 翻译一下,我这只是在AR.js上初步研究了一下,并没有深入,希望大家多提意见交流,我也实现了播放视频的例子,大家可以参考demo列表中的例子,我就不贴代码了。为了精准的展示例子,请大家把摄像头对准Market

    目前H5 AR还是有很多壁垒和坑的,文档也相对较少,涉及的面比较多,设备性能也是问题,但是对于新技术的探索还是很有趣的,希望我这篇文章能帮到一些开发人员。

  • 1.公司登记注册于2003年1月27日
    2.公司2006年起成为清远市政府定点协议供货商,电子采购供货商
    3.公司2007年被清远市相关政府部门评为安防行业状元
    4.公司2007年起成为长城电脑清远如意服务站(SP368)
    5.公司2007年承建清远市横河路口电子警察工程,开创清远电子警察先河。
  • 6.公司2007年起成为IBM合作伙伴、公司2010年底成为金蝶软件清远金牌代理(伙伴编号:30030013)
    7.公司组团队参加南方都市报组织的创富评选,获广东80强。公司申请多项软件著作权、专利权
    8.2016年起公司成为粤东西北地区为数不多的双软企业,确立“让软件驱动世界,让智能改变生活!"企业理想
  • 投资合作咨询热线电话:0763-3391888 3323588
  • 做一个负责任的百年企业! 天行健,君子以自强不息;地势坤,君子以厚德载物;
    为用户创造价值! 让软件驱动世界; 让智能改变生活; 超越顾客期望,帮助顾客成功;
    对客户负责,对员工负责,对企业命运负责!帮助支持公司的客户成功;帮助忠诚于公司的员工成功!
  • 联系电话:0763-3391888 3323588 3318977
    服务热线:18023314222 QQ:529623964
  • 工作QQ:2501204690 商务QQ: 602045550
    投资及业务投诉QQ: 529623964
    微信:小米哥 微信号:qysed3391888
    腾讯微博:桑达网络-基石与起点
  • E-MAIL:222#QYSED.CN ok3391888#163.com (请用@替换#)
  • 在线客服
  • 系统集成咨询
    点击这里给我发消息
  • 网站\微信\软件咨询
    点击这里给我发消息
  • 售后服务
    点击这里给我发消息
  • 投资合作
    点击这里给我发消息