💪

SwiftUIとARKitでUSDZ表示アプリ

2022/03/06に公開

作ったもの

SwiftUIを使ったARKitアプリの情報があまりないので備忘録的に書いていきます。
作ったものはこんな感じ。

ソースコード

https://github.com/soh92/PlacementUSDZ

プロジェクト作成

Augmented Reality App を選びます。
content TechnologyはRealityKit
InterfaceはSwiftUI

新規フォルダを作成して、その中にUSDZファイルを入れます。

Assets.xcassetsにサムネイルを入れます。

コード概説

ContentView

メインコンテンツ部分です。モデルの読み込みとARview, ButtonView, PickerViewを行います。

ARViewContainer

CustomARViewを呼び出す構造体です。

CustomARView

FocusEntityというサードパーティライブラリを呼び出す構造体です。FocusEntityはARViewにモデル設置場所を矩形で表示するライブラリです。FocusEntityだけでなく、ARWorldTrackingConfigurationもここで定義しています。

ModelPickerView

USDZモデルを選択するScrollViewで構成された構造体です。

PlacementButtonsView

モデルの設置、キャンセルボタンを定義した構造体です。

Model.swift

Modelクラスを定義したファイルです。

状態の管理

ContentViewにおいて以下のコードで状態管理を定義しています。

@State private var isPlacementEnabled = false
@State private var selectedModel: Model?
@State private var modelConfirmedForPlacement: Model?

モデルを選択したらisPlacementEnabledがtrueになりPlacementButtonsViewが呼び出されます。
同時に、ModelPickerViewのself.selectedModel = self.models[index]により、どのモデルが選択されたかをselectedModelに定義します。
続いてmodelConfirmedForPlacementにselectedModelが定義され、modelEntityとなります。modelEntityはanchorEntityに.addChildされ、ARKitで検出された平面上にモデルが表示されます。

所感

RealityKitとARKit自体はそれほど難しいことはありませんが、SwiftUIと組み合わせた情報が少ないので苦労しました。

Discussion