前言
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 id="custome-link" rel="ar"
href=model.usdz#custom=https://example.com/page.html">
<img src="poster.jpg">
</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文件中的音频。