在支持 ARKit 的装备上,iOS 12 及以上版本系统中的 Safari浏览器支持 AR Quick Look, 因此可以通过浏览器直接利用3D/AR 的方式展示 Web 页面中的模子文件,目前 Web 版本的AR Quick Look 支持USDZ 格式文件。苹果公司有一个自建的3D模子示例库,网址为 Quick Look Gallery - Augmented Reality - Apple Developer,当通过支持 ARKit 的iOS装备利用 Safari 浏览器访问上述页面时,可以看到每个可以利用AR Quick Look 浏览的模子文件图片右上角都有一个虚立方体标志,如图 所示。
单击图片即可在浏览器中打开 AR Quick Look,利用体验与本地应用完全一致。AR Quick Look 嵌入与Web 页面融合得非常好,过渡非常平滑。
在技术上,为了从 Web 页面中区分出可以利用AR Quick Look 浏览的模子,苹果公司在HTML 中的<a></a>标签内参加了ー个属性标识<a rel="ar"></a>,Safari 浏览器在检测到该属性后就会调用AR Quick Look 打开接中的内容而不是下裁,在AR 体験完后会直接返回到原面。
除了在くa></a>标签中参加属性标识,为了避免歧文、苹果公司还规定,在くa></a>标签中必须有且只有一个<img />标签用于表现与模子対成的图片(当然也可以利用任何图片),典范的代码下所示。
- <a rel =“ar" href = "model.usdz">
- <img src = "model - preview.jpg">
- </a>
复制代码 在W3C标准中くa></a >标签并不包容rel=”ar”属性标识,所以在くa></a>标签中加人rel="ar属性标识只是苹果公司自己的行为,也只能在 Safari 中得到公道的分析,在其他浏览器(如 Chrome、 Firefox)中则无法识列,因此无法分析所还接的 USDZ文件(通常环境下会直接被当作压缩文件下载),也无法调用ARQuick L.ook,自然更无法利用 AR体验。
为了进步兼容性,我们可以通过 JavaSeript购本查抄所利用的浏览器类型,也可以利用一下代码查抄rel=“ar”属性的支持环境,以便根据差别环境作出差别处理。
- const a = document.createElement("a");
- if (a.relList.support("ar")){
-
- //ar 可用
- }
复制代码 在Web 页面中嵌入 AR Quick Look 支持3D/AR 功能,许多时候都是为满足电子商务需要,为方便用户直接从 AR Quick Look 中付出、执行自定义操作,苹果公司扩展了 Web 中利用 AR Quick Look 的功能(需要iOS13.3及以上系统)。
选择付出样式
ARKit 预定义了7种付出样式,如图所示,开发人员可以选择此中之一作为 AR Quick Look 中的付出表现类型。
付出表现按钮的利用方法是将表现样式作为模子文件的applePayButton 参数传递,如代码利用 plain 样式表现付出按钮。
- <a rel =“ar" href = "model.usdz#ApplePayButtonType="plain">
- <img src = "model - preview.jpg">
- </a>
复制代码 表现自定义笔墨按钮文件
除了表现付出图标按钮,也可以表现自定义的笔墨按钮,表现自定义笔墨按钮的方法是将笔墨作为模子文件的 callToAction 参数传递,代码中为表现“go to pay”的示例。
- <a rel =“ar" href = "model.usdz#callTbAction="go to pay">
- <img src = "model - preview.jpg">
- </a>
复制代码 注意附加于模子地点后的参数都需要以 URL 编码的方式对特殊字符举行编码,如空格的编不编码则会导致传输错误而无法分析,在利用汉字时,也需要对汉字举行 URL编码。
自定义表现笔墨
我们还可以自定义当前表现商品的名称(checkoutTitle)、扼要介绍(checkoutSubsitle)、价格(price)利用方法是将笔墨信息作为模子文件的 checkourTile. checkou Sutile. prie 参数对举行传递。参数之间通过&毗连,如代码所示。
- <a rel =“ar" href = "model.usdz#callTbAction="go to pay&checkoutTitle=hello&checkoutSubtitle=good&price=$125">
- <img src = "model - preview.jpg">
- </a>
复制代码 如果 checkoutTitle、checkoutSubtitle 传输的笔墨过多,AR Quick Look 会直接截断笔墨,并利用省略号(..)表示笔墨过多未表现完。
自定义表现条目
上述表现样式是 ARKit 提供的标准参考样式,除此之外,我们也可以提供完全自定义的条目表现样式,通过先预定义一个 HTML 条目表现文件,在模子文件后利用 custom 参数传递该 HTML 文件路径,如代码所示。
- <a rel =“ar" href = "https://example. com/biplane. usdz# custom = https://example. com/customBanners/
- comingSoonBanner. html">
- <img src = "model - preview.jpg">
- </a>
复制代码 在上述代码中,我们预先制作了一个名 comingSoonBanner.html 文件,预定义了相应的笔墨图片样式,然后作为 custom 参考传递。需要注意的是,custom 提供的文件路径必须是绝对URL 路径,出于安全思量,只允许利用HTTPS协议传输 HTML 文件内容,并且 AR Quick Look 只表现HTML 中的静态信息,任何脚本、事件都将被忽略。
自定义条目高度
在利用自定义条目时,可以通过 customHeight定义条目的高度,AR Quick Look 支持3种高度,分另是small(81像素)、medium(121 像素)、large(161像素),利用方法如下所示。
- <a rel =“ar" href = "https://example. com/biplane. usdz# custom = https://example. com/customBanners/
- comingSoonBanner. html&customHeight=large">
- <img src = "model - preview.jpg">
- </a>
复制代码 AR Quick Look会根据硬件装备屏幕尺寸和方向自动缩放宽度,自定义条目的最大宽度为450像素,如果省略 custom Height 参数,则默认利用small类型高度,其他不符合要求的自定义高度信息都将被忽略。
事件处理
在前面设置和表现了付出和自定义笔墨按钮,但并没有处理按钮单击事件。当用户单击付出或自定义按钮时,会触发一个<a></a>标签事件,我们可以通过定义<a></a>标签ID 检测到该事件,如在代码中,我们定义了一个 ID 名为 ar-link 的<a></a>标签。
当用户单击付出按钮时,Satari 浏览器会触发<a></a>标签单击事件,这时可以通过检测 event.data是否等于_apple_ar_quicklook._button_tapped 判定单击是否来自 AR Quick Look,然后根据判定结果举行差别处理,事件处理如下所示。
- const linkElement = document. getFlementById("ar - link") ;
- linkElement. addEventListener ("message", function (event) {
- if (event. data == "_apple_ar_quicklook button _tapped") {
- //用户单击处理逻辑
- }
- }, false) ;
复制代码 JavaScript 事件消息完全遵照DOM 的处理规则,因此,除了上述代码只侦听特定ID 的方法,我们也可以直接定义一个全局的<a></a>事件监听器,然后利用.target 区分事件来自哪个特定的 1D对象,这样就可以处理所有的<a></a>单击事件。
如果利用苹果付出,可以直接调用Apple Pay JS API 的相关接口举行付出,如果处理的事用户自定义的按钮,一样平常是将商品添加到购物车或者跳转到付出页面。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |