【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 应用原型。

相关推荐
taokexia1 小时前
SwiftUI 组件开发: 自定义下拉刷新和加载更多(iOS 15 兼容)
ios·swift
2501_915918412 小时前
Fiddler抓包工具详解,HTTP/HTTPS抓包、代理设置与调试技巧一站式教程(含实战案例)
http·ios·小程序·https·fiddler·uni-app·webview
库奇噜啦呼4 小时前
【iOS】UICollectionView
macos·ios·cocoa
qixingchao5 小时前
iOS Swift 线程开发指南
ios·swift
AirDroid_cn5 小时前
在 iOS 18 离线徒步地图,如何存储和调用?
ios
2501_915909066 小时前
iOS 发布 App 全流程指南,从签名打包到开心上架(Appuploader)跨平台免 Mac 上传实战
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159184120 小时前
HTTP抓包工具推荐,Fiddler使用教程、代理设置与调试技巧详解(含HTTPS配置与实战案例)
http·ios·小程序·https·fiddler·uni-app·webview
mjhcsp20 小时前
C++ 贪心算法(Greedy Algorithm)详解:从思想到实战
c++·ios·贪心算法