前言
AR Quick Look让用户使用iOS的Safari浏览器打开网页,网页中的3D模型可以被放置在现实环境中的任何表面上。
用户可以与3D模型互动:使用手势移动和缩放3D模型,点击拍照键拍照,长按拍照键录制视频,并通过Safari浏览器的分享按钮分享给他人。
AR Quick Look的效果如下:
![32258f5fb82577bee959dd22cfcd085c.png](https://i-blog.csdnimg.cn/blog_migrate/0a8b8e756edc763cde0d8b3f092ce15f.jpeg)
创建一个网页,在网页中加入以下代码。
<a rel</a>
属性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
二、添加自定义按钮
自定义按钮的效果如下:
![d59c392b4ca4d6e89090a115bb63083d.png](https://i-blog.csdnimg.cn/blog_migrate/d9cef1cd6130b1253a2c4572ba7e975f.jpeg)
可自定义的部分:
![de97d74adcbbd95db85833b5cf519ac0.png](https://i-blog.csdnimg.cn/blog_migrate/efe16d8950aee31f20bd2e88d0a3204a.jpeg)
配置参数:
callToAction:按钮显示文本。
checkoutTitle:标题
checkoutSubtitle:副标题
price:价格
注:如果无法在一行显示副标题和价格,则会裁剪和显示省略号。包含空格的文本需要用URL编码处理。
https://example.com/model.usdz
#callToAction
=Add%20to%20cart
&
checkoutTitle
=Biplane%20Toy
&
checkoutSubtitle
=Rustic%20finish%20with%20rotating%20propeller
&
price
=$15
三、添加自定义HTML
自定义HTML的效果如下:
![820792a5c0beef52086945c7b5fd02ae.png](https://i-blog.csdnimg.cn/blog_migrate/a2089154a7a7c133920750891192e8d9.jpeg)
配置参数:
custom:用于横幅显示的一个绝对地址URL。
customHeight:横幅的高度,支持的值:small、medium、large等。
注:AR Quick Look只显示HTML的内容,如果HTML包含嵌入链接和事件等操作,会被忽略。
https://example.com/model.usdz#custom=https://example.com/page.html
&customHeight=large
四、检测用户点击的事件
当用户点击自定义按钮时,Safari会向a标签发送事件。
"custome-link"
rel="ar"
href=model.usdz#custom=https://example.com/page.html">
在网页中监听a标签的message事件,当event.data的值为_apple_ar_quicklook_button_tapped时,表示用户点击了AR Qucik Look的横幅。
var linkElement = document.getElementById(
"
custome-link"
);
linkElement.addEventListener(
"message"
, function (event) {
if (event.data ===
"_apple_ar_quicklook_button_tapped"
) {
// 自定义点击事件
}
}, false);
五、使用限制
硬件:iPhone 6S及以上、新款iPad、iPad Mini 5及以上。
软件:iOS 12及以上。
iOS 12:在网页中浏览.usdz文件。
iOS 13:除了浏览.usdz文件,还可浏览Reality Composer创建的.reality文件。另外,模型可以放大到很多倍,比如放大房屋模型,用户可以进入房屋模型里面浏览。
iOS 13.3:支持添加自定义按钮。
iOS 13.4:支持播放.usdz文件中的音频。