見出し画像

Apple Vision Pro の3Dキャラクターのモーション切り替え

npaka

「Apple Vision Pro」の3Dキャラクターのモーション切り替えを試したので、まとめました。


前回

1. モーションの準備

「usdz」内の1モデルに複数のモーションを登録したかったのですが、まだできなさそうだったので、モーションの数だけusdzを用意しました。

「Walking」(モデルとしても利用)と「Waving」(モーションのみ利用)の2つの「usdz」を用意して、「Reality Composer」に追加します。

2. モーションを切り替える

タップジェスチャーを追加して、タップ時にモーションを切り替えます。

(1) 「ImmersiveView.swift」の編集。

import SwiftUI
import RealityKit
import RealityKitContent

struct ImmersiveView: View {   
    @State private var action = 0
    @State var animationResource: [AnimationResource] = []
    @State var model: Entity!;
    
    // ボディ
    var body: some View {
        RealityView { content in
            if let scene = try? await Entity(named: "Immersive", in: realityKitContentBundle) {
                content.add(scene)
 
                // モデルの取得
                let walking: Entity! = scene.findEntity(named: "Walking")
                let waving: Entity! = scene.findEntity(named: "Waving")
                waving.isEnabled = false
                self.animationResource.append(walking.availableAnimations[0])
                self.animationResource.append(waving.availableAnimations[0])
                
                //モデルの準備
                self.model = walking
                    
                // 入力ターゲットコンポーネントの追加
                scene.components.set(InputTargetComponent())

                // コリジョンコンポーネントの追加
                var collision = CollisionComponent(shapes: [.generateSphere(radius: 0.1)])
                collision.filter = CollisionFilter(group: [], mask: [])
                scene.components.set(collision)
                
                // アニメーションの開始
                playAnimation(0)
            }
        }
        // タップジェスチャー
        .gesture(TapGesture().targetedToAnyEntity().onEnded { _ in
            // アニメーションの切り替え
            playAnimation((self.action + 1) % 2)
        })
    }
    
    // アニメーションの切り替え
    func playAnimation(_ action: Int) {
        self.action = action
        self.model.playAnimation(
            self.animationResource[action].repeat(),
            transitionDuration:0.5
        )
    }
}

#Preview {
    ImmersiveView()
        .previewLayout(.sizeThatFits)
}

エンティティ「Walking」「Waving」からアニメーションリソースを取得し、「Waving」のモデルは非表示にしています。

入力ターゲットコンポーネントとコリジョンコンポーネントは、タップジェスチャーに必要なため追加しています。今回のコリジョンは、半径0.1の球なので、モデルの足元(原点)をタップするとイベントが発生します。

playAnimation()のtransitionDurationでトランジションを効かせてます。

(2) 実行。

関連



この記事が気に入ったらサポートをしてみませんか？