JINMUSOFTWARE

JINMUSOFTWARE

SwiftUIで3Dモデルを表示する

公開日: / 最終更新日: / カテゴリ: SwiftUI / 投稿者: matsuda

SwiftUIで3Dモデルを表示する方法を探索しました。

SwiftUIで3Dモデルを扱う技術選択

現在（2026年6月）SwiftUIで3Dモデルを扱うためには「RealityKit」を使用するようです。

従来は「SceneKit」を使用していたようですが、今は非推奨になっています。

他に「Model3D」というものもありますが、これはVisionOS用です。

「SpriteKit」 は、2D用のようです。

よって「RealityKit」を選択します。

環境

開発環境

  • Mac mini M4
  • macOS Tahoe 26.5.1
  • xcode 26.5

動作環境 Target

  • iOS 18, 26

3Dモデル形式

RealityKitで使用するファイル形式は「USDZ」形式のファイルです。

「USDZ」形式ファイルを入手する

Apple公式に「USDZ」ファイルのサンプルが置いてあります。

https://developer.apple.com/jp/augmented-reality/quick-look

Blenderでも出力が可能。

File -> Export -> Universal Scene Description(.usd*)

export時のデフォルトのファイル拡張子が「*.usdc」なので「*.usdz」に変更して保存します。

今回はBlenderで出力したものを使用します。適当な青色の四角形を出力しました。ファイル名は「td1.usdz」です。

Reality Converter で変換する

Reality Converterの紹介

BlenderでUSDZ形式ファイルを出力する方法

SwiftUI、RealityKit、RealityView向けに出力する方法です。

普通に出力してSwiftUIで表示すると座標軸が違うことに気づきます。Export時の設定を見直しましょう。

Export方法：

  • File -> Export -> Universal Scene Description(.usd*)
  • 出力するオブジェクトを選択しておく。
    • オブジェクトを選択するとオレンジ色の枠で囲まれますね

Export設定：

  • 「選択物のみ」をチェックする
  • 「座標軸を変換」をチェックする
  • 「前方の軸」を「-Z」に変更する
  • 「上向きの軸」を「Y」に変更する
  • 拡張子を「.usdc」から「.usdz」に変更する

3Dモデルの準備

3Dモデルファイル（.usdz）をxcodeのproject navigator（ファイルツリー）にD&Dしてください。

Assetsにはいれません。

swiftファイルと同じ扱いです。

コーディング

3Dモデルの表示

まずは表示するだけをやってみましょう。

3Dモデルのファイル名は「td1.usdz」です。

Swift
import SwiftUI
import RealityKit // 忘れずに！

struct Case1: View {
    var body: some View {
        RealityView { content in
            if let entity = try? await Entity(named: "td1") {
                // シーンへ追加
                content.add(entity)
            }
        }
    }
}

#Preview {
    Case1()
}

表示されました。正面です。

位置調整

次にすこし位置を調整してみましょう。

Swift
RealityView { content in
    if let entity = try? await Entity(named: "td1") {
        // シーンへ追加
        content.add(entity)
        
        // 位置調整
        // [x, y, z]
        entity.position = [0.1, 0.1, -1]
    }
}

すこし右上の奥に配置されました。

座標は、[x, y, z] で指定します。

座標系は以下です。右手座標系と呼ばれている様です。

  • 横軸x（＋方向は右）
  • 縦軸y（上）
  • 奥行きz（手前）

傾き

ずっと正面を向いていますね。少し傾けてみましょう。

Swift
RealityView { content in
    if let entity = try? await Entity(named: "td1") {
        // シーンへ追加
        content.add(entity)

        // 位置調整
        entity.position = [0.1, 0.1, -1]

        // 傾き
        entity.transform.rotation = simd_quatf(
            angle: .pi / 12,
            axis: [1, 1, 1]
        )
    }
}

ちょっと傾きましたね。

対象の軸を中心に回転します。右回転します。

axis: [1, 1, 1]　は、正規化されます。

自動回転

自動で回転させてアニメーションさせてみましょう。

Swift
RealityView { content in
    if let entity = try? await Entity(named: "td1") {
        // シーンへ追加
        content.add(entity)

        // 位置調整
        entity.position = [0.1, 0.1, -1]

        // 傾き
        entity.transform.rotation = simd_quatf(
            angle: .pi / 12,
            axis: [1, 1, 1]
        )

        // 自動回転
        _ = content.subscribe(to: SceneEvents.Update.self) { event in
            // 毎秒45°回転
            let angle = Float(event.deltaTime) * (.pi / 4)
            entity.orientation *= simd_quatf(
                angle: angle,
                axis: [0, 1, 0]
            )
        }
    }
}

以下Previewの様子です。

どうですか？回転しましたか？

スザンヌさんも回転できました。

おわり

参照