教育培训网站建设方案模板,公司名称吉凶查询大吉,九江建设公司网站,网站建设流程要多少钱在支持 ARKit 的设备上#xff0c;iOS 12 及以上版本系统中的 Safari浏览器支持 AR Quick Look#xff0c; 因此可以通过浏览器直接使用3D/AR 的方式展示 Web 页面中的模型文件#xff0c;目前 Web 版本的AR Quick Look 支持USDZ 格式文件。苹果公司有一个自建的3D模型示例库… 在支持 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 relar/aSafari 浏览器在检测到该属性后就会调用AR Quick Look 打开接中的内容而不是下裁在AR 体験完后会直接返回到原面。 除了在くa/a标签中加入属性标识为了避免歧文、苹果公司还规定在くa/a标签中必须有且只有一个img /标签用于显示与模型対成的图片当然也可以使用任何图片典型的代码下所示。
a rel “ar href model.usdzimg src model - preview.jpg/a 在W3C标准中くa/a 标签并不包容rel”ar”属性标识所以在くa/a标签中加人relar属性标识只是苹果公司自己的行为也只能在 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#ApplePayButtonTypeplainimg src model - preview.jpg/a
显示自定义文字按钮文件 除了显示支付图标按钮也可以显示自定义的文字按钮显示自定义文字按钮的方法是将文字作为模型文件的 callToAction 参数传递代码中为显示“go to pay”的示例。 a rel “ar href model.usdz#callTbActiongo to payimg src model - preview.jpg/a 注意附加于模型地址后的参数都需要以 URL 编码的方式对特殊字符进行编码如空格的编不编码则会导致传输错误而无法解析在使用汉字时也需要对汉字进行 URL编码。
自定义显示文字 我们还可以自定义当前显示商品的名称checkoutTitle、简要介绍checkoutSubsitle、价格price使用方法是将文字信息作为模型文件的 checkourTile. checkou Sutile. prie 参数对进行传递。参数之间通过连接如代码所示。
a rel “ar href model.usdz#callTbActiongo to paycheckoutTitlehellocheckoutSubtitlegoodprice$125img 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. htmlimg src model - preview.jpg/a 在上述代码中我们预先制作了一个名 comingSoonBanner.html 文件预定义了相应的文字图片样式然后作为 custom 参考传递。需要注意的是custom 提供的文件路径必须是绝对URL 路径出于安全考虑只允许使用HTTPS协议传输 HTML 文件内容并且 AR Quick Look 只显示HTML 中的静态信息任何脚本、事件都将被忽略。 自定义条目高度 在使用自定义条目时可以通过 customHeight定义条目的高度AR Quick Look 支持3种高度分另是small81像素、medium121 像素、large161像素使用方法如下所示。
a rel “ar href https://example. com/biplane. usdz# custom https://example. com/customBanners/comingSoonBanner. htmlcustomHeightlargeimg 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 的相关接口进行支付如果处理的事用户自定义的按钮一般是将商品添加到购物车或者跳转到支付页面。
