【iOS ARKit】Web 网页中嵌入 AR Quick Look

      在支持 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 />标签用于表现与模子対成的图片（当然也可以利用任何图片），典范的代码下所示。

1. <a rel =“ar" href = "model.usdz">
3.   <img src = "model - preview.jpg">
5. </a>

复制代码

    在W3C标准中くa＞＜/a >标签并不包容rel=”ar”属性标识，所以在くa＞</a＞标签中加人rel="ar属性标识只是苹果公司自己的行为，也只能在 Safari 中得到公道的分析，在其他浏览器（如 Chrome、 Firefox）中则无法识列，因此无法分析所还接的 USDZ文件（通常环境下会直接被当作压缩文件下载），也无法调用ARQuick L.ook，自然更无法利用 AR体验。
     为了进步兼容性，我们可以通过 JavaSeript购本查抄所利用的浏览器类型，也可以利用一下代码查抄rel=“ar”属性的支持环境，以便根据差别环境作出差别处理。

1. const a = document.createElement("a");
2.              if (a.relList.support("ar")){
3.             
4.                  //ar 可用
5.              }

复制代码

     在Web 页面中嵌入 AR Quick Look 支持3D/AR 功能，许多时候都是为满足电子商务需要，为方便用户直接从 AR Quick Look 中付出、执行自定义操作，苹果公司扩展了 Web 中利用 AR Quick Look 的功能（需要iOS13.3及以上系统）。
选择付出样式

    ARKit 预定义了7种付出样式，如图所示，开发人员可以选择此中之一作为 AR Quick Look 中的付出表现类型。

    付出表现按钮的利用方法是将表现样式作为模子文件的applePayButton 参数传递，如代码利用 plain 样式表现付出按钮。

1. <a rel =“ar" href = "model.usdz#ApplePayButtonType="plain">
3.       <img src = "model - preview.jpg">
5. </a>

复制代码

表现自定义笔墨按钮文件

    除了表现付出图标按钮，也可以表现自定义的笔墨按钮，表现自定义笔墨按钮的方法是将笔墨作为模子文件的 callToAction 参数传递，代码中为表现“go to pay”的示例。

1. <a rel =“ar" href = "model.usdz#callTbAction="go to pay">
3.     <img src = "model - preview.jpg">
5. </a>

复制代码

    注意附加于模子地点后的参数都需要以 URL 编码的方式对特殊字符举行编码，如空格的编不编码则会导致传输错误而无法分析，在利用汉字时，也需要对汉字举行 URL编码。
自定义表现笔墨

      我们还可以自定义当前表现商品的名称（checkoutTitle）、扼要介绍（checkoutSubsitle）、价格（price）利用方法是将笔墨信息作为模子文件的 checkourTile. checkou Sutile. prie 参数对举行传递。参数之间通过&毗连，如代码所示。

1. <a rel =“ar" href = "model.usdz#callTbAction="go to pay&checkoutTitle=hello&checkoutSubtitle=good&price=$125">
3.    <img src = "model - preview.jpg">
5. </a>

复制代码

      如果 checkoutTitle、checkoutSubtitle 传输的笔墨过多，AR Quick Look 会直接截断笔墨，并利用省略号（..）表示笔墨过多未表现完。
自定义表现条目

     上述表现样式是 ARKit 提供的标准参考样式，除此之外，我们也可以提供完全自定义的条目表现样式，通过先预定义一个 HTML 条目表现文件，在模子文件后利用 custom 参数传递该 HTML 文件路径，如代码所示。

1. <a rel =“ar" href = "https://example. com/biplane. usdz# custom = https://example. com/customBanners/
2.              comingSoonBanner. html">
4.    <img src = "model - preview.jpg">
6. </a>

复制代码

     在上述代码中，我们预先制作了一个名 comingSoonBanner.html 文件，预定义了相应的笔墨图片样式，然后作为 custom 参考传递。需要注意的是，custom 提供的文件路径必须是绝对URL 路径，出于安全思量，只允许利用HTTPS协议传输 HTML 文件内容，并且 AR Quick Look 只表现HTML 中的静态信息，任何脚本、事件都将被忽略。
 自定义条目高度

     在利用自定义条目时，可以通过 customHeight定义条目的高度，AR Quick Look 支持3种高度，分另是small（81像素）、medium（121 像素）、large（161像素），利用方法如下所示。

1. <a rel =“ar" href = "https://example. com/biplane. usdz# custom = https://example. com/customBanners/
2.              comingSoonBanner. html&customHeight=large">
4.    <img src = "model - preview.jpg">
6. </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，然后根据判定结果举行差别处理，事件处理如下所示。

1. const linkElement = document. getFlementById("ar - link") ;
3. linkElement. addEventListener ("message", function (event) {
4.    if (event. data == "_apple_ar_quicklook button _tapped") {
6.    //用户单击处理逻辑
7.    }
9. }, false) ;

复制代码

     JavaScript 事件消息完全遵照DOM 的处理规则，因此，除了上述代码只侦听特定ID 的方法，我们也可以直接定义一个全局的<a></a>事件监听器，然后利用.target 区分事件来自哪个特定的 1D对象，这样就可以处理所有的<a></a>单击事件。
  如果利用苹果付出，可以直接调用Apple Pay JS API 的相关接口举行付出，如果处理的事用户自定义的按钮，一样平常是将商品添加到购物车或者跳转到付出页面。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。