【iOS + SwiftUI】DragGestureで動かすVR動画

1import SwiftUI
2import SceneKit
3
4struct ContentView: View {
5    let vrScene = VrScene()
6    
7    var body: some View {
8        SceneView(scene: vrScene)
9    }
10}

1import SwiftUI
2import AVFoundation
3import SceneKit
4import SpriteKit
5import CoreMotion
6
7/// VR動画を表示するクラス
8class VrScene: SCNScene {
9    /// VR動画内での視点となるカメラ
10    private let cameraNode: SCNNode
11    
12    override init() {
13        cameraNode = SCNNode()
14        super.init()
15
16        // カメラ
17        cameraNode.camera = SCNCamera()
18        self.rootNode.addChildNode(cameraNode)
19    }
20    
21    required init?(coder: NSCoder) {
22        fatalError("init(coder:) has not been implemented")
23    }
24}

1/// VR動画を表示するクラス
2class VrScene: SCNScene {
3    ...
4
5    /// 動画をループ再生する
6    private var playerLooper: AVPlayerLooper?
7    
8    override init() {
9       ...
10
11        // ループ動画プレイヤーの生成
12        let urlPath = Bundle.main.path(forResource: "動画ファイル名", ofType: "mp4")!
13        let asset = AVAsset(url: URL(fileURLWithPath: urlPath))
14        let playerItem = AVPlayerItem(asset: asset)
15        let queuePlayer = AVQueuePlayer(playerItem: playerItem)
16        queuePlayer.isMuted = true
17        playerLooper = AVPlayerLooper(player: queuePlayer, templateItem: playerItem)
18    }

1/// VR動画を表示するクラス
2class VrScene: SCNScene {
3    ...
4
5    override init() {
6       ...
7
8        // SKSceneを生成する
9        let videoScene = SKScene(size: .init(width: 1920, height: 1080))
10        // AVPlayerからSKVideoNodeの生成する
11        let videoNode = SKVideoNode(avPlayer: queuePlayer)
12        // シーンと同じサイズとし、中央に配置する
13        videoNode.position = .init(x: videoScene.size.width / 2.0, y: videoScene.size.height / 2.0)
14        videoNode.size = videoScene.size
15        videoNode.play()
16        videoScene.addChild(videoNode)

1/// VR動画を表示するクラス
2class VrScene: SCNScene {
3    ...
4
5    override init() {
6       ...
7
8        // カメラを囲う球体
9        let sphere = SCNSphere(radius: 20)
10        sphere.firstMaterial?.isDoubleSided = true
11        sphere.firstMaterial?.diffuse.contents = videoScene
12        let sphereNode = SCNNode(geometry: sphere)
13        self.rootNode.addChildNode(sphereNode)
14    }

1// 座標系を上下逆にする
2videoNode.yScale = -1.0
3videoNode.play()
4videoScene.addChild(videoNode)

1// カメラ
2cameraNode.camera = SCNCamera()
3// カメラの向きが後ほど追加する動画の中央に向くように変更
4cameraNode.orientation = .init(0, 1, 0, 0)
5self.rootNode.addChildNode(cameraNode)

1struct ContentView: View {
2    let vrScene = VrScene()
3    
4    var body: some View {
5        SceneView(scene: vrScene)
6            .gesture(
7                DragGesture()
8                    .onChanged(vrScene.drag(value:))
9            )
10    }
11}

1/// VR動画を表示するクラス
2class VrScene: SCNScene {
3    ...
4
5    /// 現在のカメラの位置
6    private var currentDragVlaue: DragGesture.Value?
7
8    /// カメラを回転させる
9    func drag(value: DragGesture.Value) {
10        // ドラッグの移動値を取得
11        if currentDragVlaue?.startLocation != value.startLocation { currentDragVlaue = nil }
12        let dragX = value.location.x - (currentDragVlaue?.location.x ?? value.startLocation.x)
13        let dragY = value.location.y - (currentDragVlaue?.location.y ?? value.startLocation.y)
14
15        // カメラを回転
16        cameraNode.orientation = 回転させたい値
17
18        currentDragVlaue = value
19    }
20}

1/// カメラを回転させる
2func drag(value: DragGesture.Value) {
3    // ドラッグの移動量を取得
4    if currentDragVlaue?.startLocation != value.startLocation { currentDragVlaue = nil }
5    let dragX = value.location.x - (currentDragVlaue?.location.x ?? value.startLocation.x)
6    let dragY = value.location.y - (currentDragVlaue?.location.y ?? value.startLocation.y)
7
8    // カメラを回転
9    cameraNode.orientation = rotateCamera(
10        q: cameraNode.orientation, // カメラの元々の姿勢
11        point: cameraDragPoint(dragOffset: .init(x: dragX, y: dragY)) // ドラッグした距離を角度に変換
12    )
13    currentDragVlaue = value
14}
15    
16    
17/// スクロール幅のxy移動量を角度に変換
18private func cameraDragPoint(dragOffset: CGPoint) -> CGPoint {
19    let angle = CGFloat(180)
20    let x = (dragOffset.x / UIScreen.main.bounds.width) * angle
21    let y = (dragOffset.y / UIScreen.main.bounds.height) * angle
22    return .init(x: x, y: y)
23}

1/// カメラの回転値を取得
2private func rotateCamera(q: SCNQuaternion, point: CGPoint) -> SCNQuaternion {
3    // カメラの元々の姿勢
4    let current = GLKQuaternionMake(q.x, q.y, q.z, q.w)
5    // y軸をドラッグのx移動量まで回転させる
6    let width = GLKQuaternionMakeWithAngleAndAxis(GLKMathDegreesToRadians(Float(point.x)), 0, 1, 0)
7    // x軸をドラッグのy移動量まで回転させる
8    let height = GLKQuaternionMakeWithAngleAndAxis(GLKMathDegreesToRadians(Float(point.y)), 1, 0, 0)
9    // 新しいカメラの姿勢を設定
10    let qp  = GLKQuaternionMultiply(GLKQuaternionMultiply(width, current), height)
11    return SCNQuaternion(qp.x, qp.y, qp.z, qp.w)
12}