前回、オンデバイスで3Dモデルを作成する方法について調べました。
詳細はこちらの【iOS 17】オンデバイス完結！オブジェクトキャプチャ→3Dモデル生成の過程を確認してみたをご確認ください。
3Dモデルを作成することはできたので、今度は作成した3Dモデルの一覧を確認したくなり、その表示方法について調べてみることにしました。
環境
- Xcode 15.2
- iOS 17.3.1
- iPhone 15 Pro
3Dモデルを画面上に表示する
今回は画面上にリストを表示して端末に保存されている3Dモデルを一度に複数閲覧できる方法を探してみました。
SceneKitのSceneViewを使用することでSwiftUIでも手軽に3Dモデルを表示をすることができることが分かり、試してみます。
SceneView
SceneViewの第一引数には、SCNSceneを渡すことができる為、3Dモデルが保存されているパスからSCNSceneを生成しました。
生成したSCNSceneをSceneViewに渡してリスト表示をしてみました。
import SwiftUI
import SceneKit
struct ModelListView: View {
// モデルデータの保存先からパスを抽出してSceneを生成
private var modelScenes: [SCNScene] {
return CaptureFolderManager.getAllModelFilesPaths()
.compactMap({ URL(string: $0) })
.compactMap({ try? SCNScene(url: $0) })
}
var body: some View {
ScrollView {
VStack {
ForEach(modelScenes, id: \.self) {
SceneView(scene: $0)
.frame(width: 200, height: 200)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
}
}
}
}SceneViewにSCNSceneを渡すだけだと真っ黒で表示されてしまいました。
これは生成したScene自体が光源を持っていないことが原因です。
SceneView生成時、下記のようにoptionsにautoenablesDefaultLightingを設定すると、自動的に光源を追加してくれる為、モデルが意図した通りに表示されるようになりました。
SceneView(scene: $0,
options: .autoenablesDefaultLighting)
モデルの全体像を確認したい場合
SceneViewのoptionsには複数のオプションを設定することが出来ます。
そして、allowsCameraControlをoptionsに追加することでユーザーがそのScene内の視点を変更することが可能になります。
SceneView(scene: $0,
options: [
.autoenablesDefaultLighting,
.allowsCameraControl
])デモ
SceneView上に表示されている3Dモデルが指の操作で回転できるようになりました。
活用法
今回の3Dモデルを画面上にリストで表示させる機能の活用法としては、画面上にリストを表示して、選択したモデルの全体像を確認できたり、選択したモデルをAR空間上に配置できるようにしたりする機能に活用できそうです。
おわりに
今回はSceneViewの詳細な設定については省略しましたが、こちらのSwiftUI SceneViewによる3D表現がとても参考になりました。
引き続き、オンデバイスでの3Dモデル作成や作成したモデルの活用法について調査していきたいと思います。
6
