3d立体相册特效html网页代码_在iOS的AR Quick Look中添加自定义按钮和HTML

前言

AR Quick Look让用户使用iOS的Safari浏览器打开网页，网页中的3D模型可以被放置在现实环境中的任何表面上。

用户可以与3D模型互动：使用手势移动和缩放3D模型，点击拍照键拍照，长按拍照键录制视频，并通过Safari浏览器的分享按钮分享给他人。

AR Quick Look的效果如下：

一、准备工作

创建一个网页，在网页中加入以下代码。

<

属性rel="ar"：表示链接地址用AR Quick Look模式打开，否则会下载文件。

属性href：.usdz格式的文件。该文件是一个3D模型，可以将常见的.fbx、.obj、.gltf等格式转换为usdz格式。

属性src：一个图片地址。AR Quick Look模式要求在a标签中必须显示一个图片。

注1：如果使用纯文字链接.usdz文件，则需要配置HTTP服务器，为.usdz扩展名增加MIME类型，让Safari知道这是一个需要AR Quick Look模式打开的文件。

注2：纯文字链接的用户体验：用户点击文字链接，Safari首先显示一个.usdz文件的缩略图，接着用户点击缩略图才进入AR Quick Look模式。

举例：apache的MIME配置

AddType model/vnd.usdz+zip usdz

二、添加自定义按钮

自定义按钮的效果如下：

可自定义的部分：

配置参数：

callToAction：按钮显示文本。

checkoutTitle：标题

checkoutSubtitle：副标题

price：价格

注1：如果无法在一行显示副标题和价格，则会裁剪和显示省略号。文字需要用URL编码处理。

&checkoutTitle=Biplane%20Toy

注2：4个配置参数callToAction、checkoutTitle、checkoutSubtitle、price等都不能为空。如果为空，则自定义横幅不显示。

注3：纯文字链接.usdz文件，不会显示横幅。

三、添加自定义HTML

自定义HTML的效果如下：

配置参数：

custom：用于横幅显示的一个绝对地址URL。

customHeight：横幅的高度，支持的值：small、medium、large等。

注1：AR Quick Look只显示HTML的内容，如果HTML包含嵌入链接和事件等操作，会被忽略。

https

注2：自定义HTML包含的视频，即使设置自动播放，也不会播放。

四、检测用户点击的事件

当用户点击自定义按钮时，Safari会向a标签发送事件。

在网页中监听a标签的message事件，当event.data的值为_apple_ar_quicklook_button_tapped时，表示用户点击了AR Quick Look的横幅。

var linkElement = document.getElementById("custome-link");
linkElement.addEventListener("message", function (event) {
   if (event.data === "_apple_ar_quicklook_button_tapped") {
   // 自定义点击事件
   }
}, false);

注：点击AR Quick Look横幅中的自定义HTML，会退出AR Quick Look界面。在监听a标签的message事件中，会检测到点击了横幅。

五、使用限制

硬件：iPhone 6S及以上、新款iPad、iPad Mini 5及以上。

软件：iOS 12及以上。

iOS 12：在网页中浏览.usdz文件。

iOS 13：除了浏览.usdz文件，还可浏览Reality Composer创建的.reality文件。另外，模型可以放大到很多倍，比如放大房屋模型，用户可以进入房屋模型里面浏览。

iOS 13.3：支持添加自定义横幅。

iOS 13.4：支持播放.usdz文件中的音频。