【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 />标签用于显示与模型対成的图片(当然也可以使用任何图片),典型的代码下所示。

<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 的相关接口进行支付,如果处理的事用户自定义的按钮,一般是将商品添加到购物车或者跳转到支付页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp 上传视频到阿里云之后回显视频获取视频封面

uniapp 上传视频到阿里云之后回显视频获取视频封面 官网的解决方案 1.initial-time Number 指定视频初始播放位置&#xff0c;单位为秒&#xff08;s&#xff09;。 没什么卵用 2.使用 uni.createVideoContext(“myVideo”, this).seek(number)。 没什么卵用 <video :id&quo…

云计算重要概念之:虚拟机、网卡、交换机、路由器、防火墙

一、虚拟机 (Virtual Machine, VM) 1.主流的虚拟化软件&#xff1a; 虚拟化软件通过在单个物理硬件上创建和管理多个虚拟环境&#xff08;虚拟机&#xff09;&#xff0c;实现资源的高效利用、灵活部署、隔离安全以及便捷管理&#xff0c;是构建云计算和现代化数据中心的核心…

C语言面试题之返回倒数第 k 个节点

返回倒数第 k 个节点 实例要求 1、实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点&#xff1b;2、返回该节点的值&#xff1b; 示例&#xff1a;输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4 说明&#xff1a;给定的 k 保证是有效的。实…

【机器学习300问】65、为什么Sigmoid和Tanh激活函数会导致梯度消失?

一、梯度消失现象 当神经网络的输入值较大或较小时&#xff0c;其导数&#xff08;梯度&#xff09;都会接近于0。在反向传播过程中&#xff0c;这些微小的梯度经过多层网络逐层传递时&#xff0c;会不断被乘以权重矩阵&#xff08;权重通常小于1&#xff09;&#xff0c;进一步…

智能时代中的工业应用中前所未有的灵活桥接和I/O扩展功能解决方案MachXO2系列LCMXO2-1200HC-4TG100I FPGA可编程逻辑IC

lattice莱迪斯 MachXO2系列LCMXO2-1200HC-4TG100I超低密度FPGA现场可编程门阵列&#xff0c;适用于低成本的复杂系统控制和视频接口设计开发&#xff0c;满足了通信、计算、工业、消费电子和医疗市场所需的系统控制和接口应用。 瞬时启动&#xff0c;迅速实现控制——启动时间…

Java项目:基于Springboot+vue实现的中国陕西民俗前后台管理系统设计与实现(源码+数据库+毕业论文)

一、项目简介 本项目是一套基于Springbootvue实现的中国陕西民俗管理系统设计与实现设 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界…

安全大脑与盲人摸象

21世纪是数字科技和数字经济爆发的时代&#xff0c;互联网正从网状结构向类脑模型进行进化&#xff0c;出现了结构和覆盖范围庞大&#xff0c;能够适应不同技术环境、经济场景&#xff0c;跨地域、跨行业的类脑复杂巨型系统。如腾讯、Facebook等社交网络具备的神经网络特征&…

Web漏洞-文件上传之内容逻辑数组

图片一句话制作方法&#xff1a; copy 1.png /b shell.php /a webshell.jpg 具体示例见upload-labs 的14-17 二次渲染----见Pass-18 用/.或者%00绕过&#xff1a;Pass-20----Pass-21 CVE-2017-12615复现 创好环境后打开环境&#xff0c;再访问ip8080 抓包发送数据 Shell的…

电介质材料(四)

本篇为西安交通大学本科课程《电气材料基础》的笔记。 本篇为这一单元的第四篇笔记&#xff0c;上一篇传送门。 复合电介质材料 是由多种成分共同组成&#xff0c;例如油纸复合绝缘、云母层压板、环氧浸渍玻璃纤维布等。即便是没有添加的材料&#xff0c;材料也会存在杂质和…

物联网实验

实验1 基于ZStack光敏传感器实验 1.实验目的 我们通过上位机发指令给协调器&#xff0c;协调器把串口接收到的指令通过Zigbee协议无线发送给带有光敏传感器的终端节点&#xff0c;获取到数据以后把数据返回给上位机&#xff0c;实现无线获取数据的目的。 2.实验设备 硬件&a…

防止狗上沙发,写一个浏览器实时识别目标检测功能

家里有一条狗&#x1f436;&#xff0c;很喜欢乘人不备睡沙发&#x1f6cb;️&#xff0c;恰好最近刚搬家 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗&#xff0c;然后播放“gun 下去”的音频&#x1f4e3;。 需求分析 需要一个摄像头&#x1f4f7; 利用 chrome…

Linux系统概述与安装

Linux的介绍 Linux内核 Linux内核是 Linux 操作系统主要组件&#xff0c;也是计算机硬件与其软件之间的交互入口。它负责两者之间的通信&#xff0c;还要尽可能高效地管理资源 Linux Shell shell是系统的用户界面&#xff0c;提供了用户与内核进行交互操作的一种接口 Linux文…

网页端HTML使用MQTTJs订阅RabbitMQ数据

最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中&#xff0c;在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。 需求&#xff1a;做一个统一日志系统可以查看日志列表和一个可…

【机器学习】科学库使用第4篇:Matplotlib,学习目标【附代码文档】

机器学习&#xff08;科学计算库&#xff09;完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;机器学习&#xff08;常用科学计算库的使用&#xff09;基础定位、目标&#xff0c;机器学习概述定位,目标,学习目标,学习目标,1 人工智能应用场景,2 人工智能小…

uniapp小程序编译报错

说明 微信小程序编译每次都出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, 解决 找到manifest.json文件 添加&#xff1a;"libVersion": "latest"&#xff0c;重新编译即可。

冒泡排序java实现

冒泡排序 冒泡排序是通过重复地遍历要排序的列表&#xff0c;一次比较两个元素&#xff0c;并且如果它们的顺序错误就将它们交换位置。冒泡排序的时间复杂度为 O(n^2)。 冒泡排序的基本步骤&#xff1a; 1. 从列表的第一个元素开始&#xff0c;向后遍历每一个元素。 2. 对于…

产品推荐 | iWave 的 FPGA-IP 评估附加 FMC 卡

1、产品概述 iWave 的 FPGA-IP 评估附加 FMC 卡旨在满足 ANSI/VITA 57.1 FMC 标准。该卡支持高引脚数 &#xff08;HPC&#xff09; 和低引脚数 &#xff08;LPC&#xff09; 连接器&#xff0c;可在风冷环境中使用。FPGA-IP评估附加卡可以与市场上的大多数FPGA开发套件连接。…

去中心化社交媒体:分析 Facebook 在区块链平台上的角色

在当今数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;随着人们对数据隐私和信息控制的关注不断增加&#xff0c;传统的中心化社交媒体平台也面临着越来越多的质疑和挑战。为了应对这些挑战&#xff0c;越来越多的人开始探索去中心化社…

怎样关闭浏览器文件下载安全病毒中检测功能

怎样关闭浏览器文件下载安全病毒中检测功能 有时候需要通过浏览下载一些特殊文件&#xff0c;浏览器会提示有病毒&#xff0c;终止下载并且自动删除文件。 以为是浏览器的问题&#xff0c;用 chrome、Edge、firefox 三种浏览器下载均失败。 尝试关闭了所有浏览器安全防护也不行…

赋能Web3用户:增强在线隐私

随着数字化时代的发展&#xff0c;人们越来越依赖互联网来进行各种活动&#xff0c;从社交互动到金融交易&#xff0c;几乎所有的日常生活都离不开网络。然而&#xff0c;随之而来的是个人隐私安全面临的挑战。在传统的互联网架构下&#xff0c;用户的个人数据往往被中心化的平…