AR Quick Look 讓你在網站及 App 中展示 3D 模型及拍照

AR Quick Look 是 iOS 12 的新功能,可以在網站及 App 中展示 3D 模型,更可以在 AR 模式與之拍照。

以下分別是網站及 App 的程式碼,素材皆來自 AR Quick Look Gallery ,若想自行產生 usdz 格式的檔案請參考這篇文章

 


網站 (只有 iOS 12 Safari 實機才有效果)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AR Test</title>
</head>
<body>
<h1>AR Quick Look in Websites</h1>
<p>這是從 https://developer.apple.com/arkit/gallery/ 下載的模型,僅供測試用。</p>
<p>需使用 iOS 12 的 Safari 觀看。</p>
<a href="cupandsaucer.usdz" rel="ar">
<img src="cupandsaucer.jpg" width=200>
</a>
</body>
</html>

 


App (只有 iOS 12 實機才有效果)


import UIKit
import QuickLook

class ViewController: UIViewController, QLPreviewControllerDataSource, QLPreviewControllerDelegate {

override func viewDidLoad() {
super.viewDidLoad()

}

func numberOfPreviewItems(in controller: QLPreviewController) -> Int {

return 1
}

func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {

let url = Bundle.main.url(forResource: "cupandsaucer", withExtension: "usdz")!
return url as QLPreviewItem
}

@IBAction func buttonPressed(_ sender: UIButton) {

let previewController = QLPreviewController()
previewController.dataSource = self
previewController.delegate = self
self.present(previewController, animated: true)
}
}

 


參考資料
https://developer.apple.com/arkit/

發表迴響