WebAR开发指南(1)—使用AR.js实现第一个WebAR demo

作者 : 开心源码 本文共2147个字,预计阅读时间需要6分钟 发布时间: 2022-05-13 共138人阅读

关于AR.js

AR.js是一个轻量级的加强现实类JavaScript库,支持基于标记和位置的加强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网站。该项目是开源的,在GitHub上拥有近14,000个stars,各种平台的开发人员正在使用它来创立更多新的数字体验。AR.js框架包括跨浏览器兼容性,并且支持WebGL和WebRTC,这意味着它可以在iOS 11以上的Android和iPhone设施上正常工作。通过包装许多不同的AR框架,包括three.js,a-frame和ARToolKit,AR.js使得将AR引入Web应用程序变得更加简单高效。它具备以下优点:

1. 跨浏览器兼容性

2. 即便在较旧的设施上也可以达到60fps的高性能

3. 基于Web,无需安装

4. 开源,可免费访问

5. 使用WebGL和WebRTC在所有移动设施上均可使用

6. 无需额外或者不常见的硬件

7. 可以用不到10行HTML来完成

创立项目

假设你已经建立了一个(本地或者其余)开发环境,并使用SSL证书对其进行了保护。为什么要使用SSL?Chrome要要求摄像机访问权限的网站都必需严格通过https交付。

我们可以仅用8行HTML编写一个AR.js demo。

将上述代码编辑到你的开发环境中的index.html文件中,并在你选择的兼容浏览器中将其打开,将收到访问相机的请求,点击允许就可。摄像头对准识别图(如下),假如一切顺利,你应该会在标记上看到一个半透明的白色立方体.

要从视频显示中删除调试框只要增加如下代码:

使用自己设置标记

步骤1:确定你的标记图像。为了取得最佳结果,这应该是一个简单的,高比照度的PNG图像,预先裁剪为正方形,大小至少为512×512。这也必需是旋转不对称的,这意味着无论旋转到什么程度,它始终看起来是唯一的。下面是标记图像的少量好例子:

步骤2:将图像转换为.patt文件和AR.js标记。使用此标记训练器(https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html),上传要用作标记的图像。

1. Download Marker: AR.js使用.patt文件来识别标记并显示3D内容。

2. Download Image: 带有适当黑色边框的实际.png图像用作物理标记。

步骤3:将.patt文件增加到你的网站。只需应用程序可在何处访问它,如/img/patterns/my-marker.patt

步骤4:将标记增加到AR.js元素。使用a-frame方法,需要做的就是增加一个a-marker元素,其类型属性为’pattern’,并将模式文件的相对路径作为’url’属性。

使用此方法,我们还需要包含一个a-entity camera以便虚拟相机包含在正在渲染的3D环境中。

步骤5:最后,增加你要显示的3D模型。要完成此操作,我们需要增加一个模型,该模型将在发现此标记时显示。幸运的是,框架包含了许多原始几何体,我们可以使用少量简单的元素名称轻松地插入它们:

<a-box></a-box>

<a-sphere></a-sphere>

<a-cylinder></a-cylinder>

<a-plane></a-plane>

对于此示例,我将增加一个红色球体,该球体恰好在标记上方。

测试效果如下:

缩小黑色标记边框的大小

我个人认为,默认边框粗细在标记上很难看到。所以假如你使用的是最新版本的框架,则可以根据自己的喜好调整边框大小!

哪个看起来更好?左:0.5,右:0.8

你可以访问这个网站来调节大小:

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

一旦确定了所需的图案比例,即可以生成和保存应用程序的标记图案和标记图像,只要进行少量细微的调整就可将其绑定。如下代码:

使用自己的3D模型

当然,立方体,球体,平面和圆柱体都很酷,但是大多数时候,你需要在要创立的加强现实场景中利用和显示自己设置的3D模型。最简单的方法是确保模型为obj或者glTF格式。

对于obj模型:在我们的a-entity标签中,我们将使用obj-model道具,这要求你指定.obj模型文件和随附的.mtl材质文件的路径。最终结果应如下所示:

对于glTF模型

创立事件监听器

我们为什么要有一个事件监听器?我可以举一个真实的例子:每当客户设施上的标记处于活动状态时,用户都希望显示一个简单的内容块。只需没有当前活动的标记,内容就应该消失。为了实现这一点,我们需要增加一个事件侦听器,该侦听器将在发现/丢失标记时触发,而后将其挂接到主站点的JavaScript捆绑包中,并在触发该事件时显示/隐藏内容。

要实现事件监听器,只要注册一个aframe组件,而后为markerFound和markerLost设置事件监听器。在它们各自的回调函数中,编写你希望在发现或者丢失标记时将被触发的任何js内容,如下面的代码示例:

关注公众号:AIRX社区(国内领先的AI、AR、VR技术学习与交流平台)

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » WebAR开发指南(1)—使用AR.js实现第一个WebAR demo

发表回复