LoginSignup
5
2

【visionOS】3Dモデルにアニメーションを適用し、RealityViewで表示・再生する方法

Last updated at Posted at 2024-05-10

本記事では3DモデルにMixamoでアニメーションを適用し、RealityViewで表示・再生する方法を紹介します。
(※技適特例届け出済み)

デモ

3Dモデルをタップすると、アニメーションを再生するようにしています。

画面収録 2024-05-10 15.21.10.gif

アニメーションの編集方法

  1. フリーの3Dモデルをダウンロードします。
    (今回はこちらのサイトからゾンビのモデルをダウンロードしました。)

  2. Mixamoを使用して、ダウンロードしたモデルに好みのアニメーションを適用させます。
    画面収録 2024-05-07 12.04.32.gif
    今回は攻撃をするアニメーションを適用させました。
    (Mixamoは、3Dキャラクターにアニメーションを適用できるAdobe社のオンラインサービスです。)

  3. Reality Converterを使用して、アニメーション適用後のモデルにテクスチャを適用させ、USD*(Universal Scene Description)形式で出力します。
    画面収録 2024-05-07 12.07.17.gif

実装

Reality ConverterでエクスポートしたUSDZファイルをXcodeプロジェクトにインポートし、RealityKitを使用して表示させます。

struct ImmersiveView: View {
    @StateObject var vm: ImmersiveViewModel = ImmersiveViewModel()
    @State var entity = try! Entity.loadModel(named: "attack_zombie")
    
    var body: some View {
        RealityView { content in
            entity.generateCollisionShapes(recursive: false)
            entity.components.set(InputTargetComponent())
            content.add(entity)
        }
        .gesture(tapGesture)
    }
    
    private var tapGesture: some Gesture {
        TapGesture()
            .targetedToAnyEntity()
            .onEnded { value in
                let entity = value.entity
                entity.playAnimation(self.entity.availableAnimations[0])
            }
    }
}

RealityKit内でModelEntityを追加し、TapGestureを使用してEntityのアニメーションを再生する処理をしています。

また、RealitiyViewでイベントの入力を受け取るには、ModelEntityにInputTargetComponentとCollisionComponentの両方を設定する必要があります。

スクリーンショット 2024-05-10 16.33.28.png

You can add a gesture to a RealityView, like any other SwiftUI view, and it will hit test against entities in that view. To receive input, the entity must have both an input target component and a collision component. When a touch event is handled by RealityView, it will ignore any entities that don't have both collision and an input target. Only this last entity has both components, so gestures added to this RealityView will only react to input directed at this entity.

引用: Build spatial experiences with RealityKit - WWDC23

参考資料

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2