Kudan AR SDK で AR iOS アプリを作ってみよう〜オブジェクトを回転させる

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの Kudan AR SDK のエントリーです。

SDK のダウンロードはこちらからお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。

前回は、マーカー上に表示したオブジェクトをピンチできるようにしました。その他の記事については Kudan AR SDK チュートリアル記事まとめで、まとめていますのでご覧ください。

今回はピンチに続き、回転をできるようにしたいと思います。

現時点でのサンプルは ytabuchi の GitHub に置いてあります。開発を継続していくので現時点でのスナップショットです。

ViewController の編集
この後は
Kudan AR SDK エントリー一覧

ViewController の編集

MarkerViewController.swift を編集していきます。

Pinch と同様に回転を検知するメソッド UIRotationGestureRecognizer が用意されています。が、操作を簡単にするために UIPanGestureRecognizer を使います。同じように cameraView にアタッチします。

override func setupContent() {
    // ...略...
    
    // ジェスチャーの生成と cameraView へのアタッチ
    let pinchGestureRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(pinchNode(sender:)))
    self.cameraView.addGestureRecognizer(pinchGestureRecognizer)
    let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(rotateNode(sender:)))
    self.cameraView.addGestureRecognizer(panGestureRecognizer)
}

Pinch と同様にパン（スライド）を検知すると、action に指定した rotateNode に UIPanGestureRecognizer が飛んできます。この translation(in: View?) でどれくらい移動したか？の値が取得できるので、開始時点からの移動距離を角度に変換して各ノードに渡しています。

// パンにより表示ノードを回転
@objc func rotateNode(sender: UIPanGestureRecognizer) {
    let x = sender.translation(in: self.cameraView).x

    if (sender.state == UIGestureRecognizer.State.began) {
        lastPanX = x
    }
    
    if let panX = lastPanX {
        let diff = x - panX
        let degree = diff * 0.25
        
        switch shownNode {
        case .Image:
            self.imageNode?.rotate(byDegrees: Float(degree), axisX: 0, y: 0, z: 1)
        case .Model:
            self.modelNode?.rotate(byDegrees: Float(degree), axisX: 0, y: 1, z: 0)
        case .Video:
            self.videoNode?.rotate(byDegrees: Float(degree), axisX: 0, y: 0, z: 1)
        case .AlphaVideo:
            self.alphaVideoNode?.rotate(byDegrees: Float(degree), axisX: 0, y: 0, z: 1)
        default:
            NSLog("Panned: \(sender.translation(in: self.view))")
        }
    }
}

動作イメージ：