【iOS ARKit】App 中嵌入 AR Quick Look

AR Quick Look 功能强大,但在应用中嵌入并使用它实现 AR体验却非常简单,如其他所有QuickLook使用一样,简单到只需要提供一个文件名就可以达到目标。

AR Quick Look 支持.usdz 和.reality 两种格式文件,如果在 Xcode 工程中引入了 Reality Composer 工程文件(.rcproject),在 Xcode 编译时会自动将.reproject 文件转换成. realtiy 格式打包进应用程序包中。

在应用中嵌人并使用 AR Quick Look 时需要遵循 QLPreviewControllerDataSource 协议并实现该协议定的两方法,如表1所示。

表1QLPreviewControllerDataSource 协议方法

|-------------------------------------------------------------------------------|---------------------------------|
| numberOfPreviewItems (in: QLPreviewController) -> Int | AR Quick Look 需要知道浏览的模型数目,通常返回1 |
| previewController (QLPreviewController, previewItemAt: Int) -> QLPreviewItem | 提供給 AR Quick Look 具体需要展示的模型 |
| 描述 | 方法名称 |

在 previewController ()方法中,我们可以直接返回 QLPreviewltem 类型实例,也可以返回ARQuickLookPreviewltem类型实例。ARQuickLookFreviewltem 类继承自 QLPreviewItem类,是专为AR 展示定制的类型,该类提供了两个 AR 专用属性:allowsContentScaling 和 canonical WebPageURL,其中 allowsContentScaling 为布尔值,用于设置是否允许缩放模型,这在一些实物展示类应用场合会比较有用 如家具展示,一般没有必要允许使用者缩放模型;canonicalWebPageURL用于设置分享的文件 URL,如果设置了该值,在使用 AR Quick Look 分享时会分享该链接地址,而如果没有设置则会直接分享模型文件(.usdz或.reality 文件)。

下面模拟实际使用场景进行演示,为简单起见,我们只在主场景中设置一个按钮,当用户单击这个按钮时会调用 AR Quick Look展示指定的模型,并设置是否允许缩放和分享链接属性。

(1) 新建一个 SwiftUI View 文件,命名为 ARQuickLookView,具体代码如下。

复制代码
import SwiftUI
import QuickLook
import ARKit

struct ARQuickLookViewController: UIViewControllerRepresentable {
    var fileName: String
    var allowScaling: Bool
    func makeCoordinator() -> ARQuickLookViewController.Coordinator {
        Coordinator(self)
    }
    
    func makeUIViewController(context: Context) -> UIViewController {
        let controller = QLPreviewController()
        controller.dataSource = context.coordinator
        
        return controller
    }
    
    func updateUIViewController(_ controller: UIViewController,context: Context) {}
    
    class Coordinator: NSObject, QLPreviewControllerDataSource {
        let parent: ARQuickLookViewController
        private lazy var fileURL: URL = Bundle.main.url(forResource: parent.fileName,withExtension: "usdz")!
        init(_ parent: ARQuickLookViewController) {
            self.parent = parent
            super.init()
        }
        func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
            return 1
        }
        func previewController(_ controller: QLPreviewController,previewItemAt index: Int) -> QLPreviewItem {
            guard let filePath = Bundle.main.url(forResource: parent.fileName, withExtension: "usdz") else {fatalError("无法加载模型")}
            let item = ARQuickLookPreviewItem(fileAt: filePath)
            item.allowsContentScaling = parent.allowScaling
            
            item.canonicalWebPageURL = URL(string: "https://www.example.com/example.usdz")
            return item
        }
    }
}

在上述代码中,我们首先定义了 fileName、allowScaling 两个变量用于存储 ARQuickLookPreviewItem属性信息,然后遵循了 QLPreviewControllerDataSource 协议并实现了该协议的两个方法。将该类独立出来是为了更好地组织代码、方便使用、简化主代码逻辑。

(2)在主场景中放置一个按钮,并设置当按钮单击时启用 AR Quick Look 并显示实例化的ARQuickLookView 场景。代码如下所示。

复制代码
struct ARQuickLookView : View {
    @State var showingPreview = false
    var body: some View {

        ARQuickLookViewController(fileName: "fender_stratocaster",allowScaling:true)
        .edgesIgnoringSafeArea(.all)
        .navigationTitle("AR Quick Look")
    }
}

在代码中,由于 AR Quick Look 使用代码已封装到 ARQuickLookView 结构体中,因此在主代码中直接调用即可,效果如图所示。​​​​​​​

在iOS 13及以上版本系统中,AR Quick Look 还支持多模型展示,并支持环境光照明,这大大地拓宽了其使用领域,可以实现诸如家具布置、模型对比等功能。另外,AR Quick Look 与 Reality Composer 的结合,对设计人员非常友好,可以快速开发出AR 应用原型。

相关推荐
2501_9160088915 小时前
iOS 证书管理最佳实践 从创建到续期的完整指南
android·ios·小程序·https·uni-app·iphone·webview
黑科技iOS上架1 天前
ReactNative入门介绍
经验分享·ios
智塑未来1 天前
鸿蒙系统对比安卓、iOS,核心优势是什么?
android·ios·harmonyos
初雪云1 天前
iOS 上架入门:证书、描述文件、IPA 上传到底是什么关系?
android·ios·自动化·产品经理·iphone
狂热开发者1 天前
用 Typeoff 把会后口述整理成 Markdown 决策记录
人工智能·windows·macos·ios·安卓
2501_916007472 天前
iPad 怎么抓包 从代理模式到暴力抓包的操作方法
android·ios·小程序·uni-app·代理模式·iphone·ipad
2501_915918412 天前
PerfDog 太贵?iOS 性能监控工具的功能对比与选择
android·ios·小程序·https·uni-app·iphone·webview
MDM.Plus2 天前
苹果MDM技术演进:从远程控制到设备信任体系的构建
运维·服务器·安全·ios·mdm·手机店
韩曙亮2 天前
【Flutter】Flutter 进程保活 ③ ( 屏幕常亮设置 | Flutter 禁止息屏、关闭自动锁屏、屏蔽系统屏保 )
android·flutter·ios·屏幕常亮·禁止息屏
2501_915909062 天前
IPA 深度混淆是什么意思?从混淆强度到实际效果的解读
android·ios·小程序·https·uni-app·iphone·webview