潍坊市建设局官方网站,表格制作手机软件,如何找外贸公司合作,小程序开发外包服务前面有一篇文章万字干货介绍WebAR的实现与应用 分析了目前流行的WebAR框架并简单的介绍一些实现方法#xff0c;这个专栏我们具体的来通过一些框架实现WebAR效果。关于AR.jsAR.js是一个轻量级的增强现实类JavaScript库#xff0c;支持基于标记和位置的增强现实。开发人员可以…前面有一篇文章万字干货介绍WebAR的实现与应用 分析了目前流行的WebAR框架并简单的介绍一些实现方法这个专栏我们具体的来通过一些框架实现WebAR效果。关于AR.jsAR.js是一个轻量级的增强现实类JavaScript库支持基于标记和位置的增强现实。开发人员可以使用几行HTML将AR特性和功能引入任何网站。该项目是开源的在GitHub上拥有近14,000个stars各种平台的开发人员正在使用它来创建更多新的数字体验。AR.js框架包括跨浏览器兼容性并且支持WebGL和WebRTC这意味着它可以在iOS 11以上的Android和iPhone设备上正常工作。通过包装许多不同的AR框架包括three.jsa-frame和ARToolKitAR.js使得将AR引入Web应用程序变得更加简单高效。它具有以下优点跨浏览器兼容性即使在较旧的设备上也可以达到60fps的高性能基于Web无需安装开源可免费访问使用WebGL和WebRTC在所有移动设备上均可使用无需额外或不常见的硬件可以用不到10行HTML来完成创建项目假设你已经建立了一个本地或其他开发环境并使用SSL证书对其进行了保护。为什么要使用SSLChrome要要求摄像机访问权限的网站都必须严格通过https交付。我们可以仅用8行HTML编写一个AR.js demo。将上述代码编辑到你的开发环境中的index.html文件中并在你选择的兼容浏览器中将其打开将收到访问相机的请求点击允许即可。摄像头对准识别图如下如果一切顺利你应该会在标记上看到一个半透明的白色立方体。要从视频显示中删除调试框只需添加如下代码使用自定义标记步骤1确定你的标记图像。为了获得最佳结果这应该是一个简单的高对比度的PNG图像预先裁剪为正方形大小至少为512x512。这也必须是旋转不对称的这意味着无论旋转到什么程度它始终看起来是唯一的。下面是标记图像的一些好例子步骤2将图像转换为.patt文件和AR.js标记。使用此标记训练器https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html上传要用作标记的图像。Download Marker: AR.js使用.patt文件来识别标记并显示3D内容。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-boxa-sphere/a-spherea-cylinder/a-cylindera-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内容如下面的代码示例
