如何使用平移手势和四元数在SceneKit中旋转相机

Question

我正在使用iOS SceneKit框架构建一个360度视频查看器。

我想使用UIPanGestureRecognizer来控制相机的方向。

SCNNode有几个属性可用于指定它们的旋转： rotation（旋转矩阵）、orientation（四元数）、eulerAngles（每个轴的角度）。

我所读的所有内容都说要避免使用欧拉角以避免gimbal lock。

我想出于一些原因使用四元数，这里不再赘述。

我在这个问题上遇到了困难。相机控制几乎达到了我想要的效果，但是有些问题。看起来相机正在绕 Z 轴旋转，尽管我只想影响 X 和 Y 轴。

我相信问题与我的四元数乘法逻辑有关。我已经很多年没有做过任何与四元数相关的事情了 :( 我的平移手势处理程序在此处：

func didPan(recognizer: UIPanGestureRecognizer)
{
    switch recognizer.state
    {
    case .Began:
        self.previousPanTranslation = .zero

    case .Changed:
        guard let previous = self.previousPanTranslation else
        {
            assertionFailure("Attempt to unwrap previous pan translation failed.")

            return
        }

        // Calculate how much translation occurred between this step and the previous step
        let translation = recognizer.translationInView(recognizer.view)
        let translationDelta = CGPoint(x: translation.x - previous.x, y: translation.y - previous.y)

        // Use the pan translation along the x axis to adjust the camera's rotation about the y axis.
        let yScalar = Float(translationDelta.x / self.view.bounds.size.width)
        let yRadians = yScalar * self.dynamicType.MaxPanGestureRotation

        // Use the pan translation along the y axis to adjust the camera's rotation about the x axis.
        let xScalar = Float(translationDelta.y / self.view.bounds.size.height)
        let xRadians = xScalar * self.dynamicType.MaxPanGestureRotation

        // Use the radian values to construct quaternions
        let x = GLKQuaternionMakeWithAngleAndAxis(xRadians, 1, 0, 0)
        let y = GLKQuaternionMakeWithAngleAndAxis(yRadians, 0, 1, 0)
        let z = GLKQuaternionMakeWithAngleAndAxis(0, 0, 0, 1)
        let combination = GLKQuaternionMultiply(z, GLKQuaternionMultiply(y, x))

        // Multiply the quaternions to obtain an updated orientation
        let scnOrientation = self.cameraNode.orientation
        let glkOrientation = GLKQuaternionMake(scnOrientation.x, scnOrientation.y, scnOrientation.z, scnOrientation.w)
        let q = GLKQuaternionMultiply(combination, glkOrientation)

        // And finally set the current orientation to the updated orientation
        self.cameraNode.orientation = SCNQuaternion(x: q.x, y: q.y, z: q.z, w: q.w)
        self.previousPanTranslation = translation

    case .Ended, .Cancelled, .Failed:
        self.previousPanTranslation = nil

    case .Possible:
        break
    }
}

我的代码在这里开源：https://github.com/alfiehanssen/360Player/

特别是检查pan-gesture分支： https://github.com/alfiehanssen/360Player/tree/pan-gesture

如果你拉下来代码，我相信你需要在设备上运行它而不是模拟器。

我在这里发布了一个演示错误的视频（请原谅视频文件的低分辨率）： https://vimeo.com/174346191

非常感谢您的帮助！

- Alfie Hanssen

Answer 1

我能够使用四元数使其正常工作。完整的代码在这里：ThreeSixtyPlayer。这里是一个示例：

    let orientation = cameraNode.orientation

    // Use the pan translation along the x axis to adjust the camera's rotation about the y axis (side to side navigation).
    let yScalar = Float(translationDelta.x / translationBounds.size.width)
    let yRadians = yScalar * maxRotation

    // Use the pan translation along the y axis to adjust the camera's rotation about the x axis (up and down navigation).
    let xScalar = Float(translationDelta.y / translationBounds.size.height)
    let xRadians = xScalar * maxRotation

    // Represent the orientation as a GLKQuaternion
    var glQuaternion = GLKQuaternionMake(orientation.x, orientation.y, orientation.z, orientation.w)

    // Perform up and down rotations around *CAMERA* X axis (note the order of multiplication)
    let xMultiplier = GLKQuaternionMakeWithAngleAndAxis(xRadians, 1, 0, 0)
    glQuaternion = GLKQuaternionMultiply(glQuaternion, xMultiplier)

    // Perform side to side rotations around *WORLD* Y axis (note the order of multiplication, different from above)
    let yMultiplier = GLKQuaternionMakeWithAngleAndAxis(yRadians, 0, 1, 0)
    glQuaternion = GLKQuaternionMultiply(yMultiplier, glQuaternion)

    cameraNode.orientation = SCNQuaternion(x: glQuaternion.x, y: glQuaternion.y, z: glQuaternion.z, w: glQuaternion.w)

- Alfie Hanssen

---

多年后，这非常有用。谢谢伙计。 - Cristiano Coelho

我想知道“减缓”Pan Responder的正确方法是什么。它似乎移动得太快了。 - Cristiano Coelho

Answer 2

抱歉，这里使用的是 SCNVector4 而不是四元数，但对我的用途效果很好。我将其应用于我的根几何节点容器（“rotContainer”）而不是相机，但简短的测试似乎表明它也适用于相机使用。

func panGesture(sender: UIPanGestureRecognizer) {
    let translation = sender.translationInView(sender.view!)

    let pan_x = Float(translation.x)
    let pan_y = Float(-translation.y)
    let anglePan = sqrt(pow(pan_x,2)+pow(pan_y,2))*(Float)(M_PI)/180.0
    var rotationVector = SCNVector4()

    rotationVector.x = -pan_y
    rotationVector.y = pan_x
    rotationVector.z = 0
    rotationVector.w = anglePan

    rotContainer.rotation = rotationVector

    if(sender.state == UIGestureRecognizerState.Ended) {
        let currentPivot = rotContainer.pivot
        let changePivot = SCNMatrix4Invert(rotContainer.transform)
        rotContainer.pivot = SCNMatrix4Mult(changePivot, currentPivot)
        rotContainer.transform = SCNMatrix4Identity
    }
}

- bpedit

Answer 3

bbedit的解决方案与环绕摄像机非常配合。设置建议中链接答案中所述的相机，然后使用bbedit的想法旋转“轨道”节点。我已修改了他的代码的Swift 4版本，它确实可以工作：

@IBAction func handlePan(_ sender: UIPanGestureRecognizer) {
    print("Called the handlePan method")
    let scnView = self.view as! SCNView
    let cameraOrbit = scnView.scene?.rootNode.childNode(withName: "cameraOrbit", recursively: true)
    let translation = sender.translation(in: sender.view!)
    let pan_x = Float(translation.x)
    let pan_y = Float(-translation.y)
    let anglePan = sqrt(pow(pan_x,2)+pow(pan_y,2))*(Float)(Double.pi)/180.0
    var rotationVector = SCNVector4()
    rotationVector.x = -pan_y
    rotationVector.y = pan_x
    rotationVector.z = 0
    rotationVector.w = anglePan
    cameraOrbit!.rotation = rotationVector
    if(sender.state == UIGestureRecognizerState.ended) {
        let currentPivot = cameraOrbit!.pivot
        let changePivot = SCNMatrix4Invert(cameraOrbit!.transform)
        cameraOrbit!.pivot = SCNMatrix4Mult(changePivot, currentPivot)
        cameraOrbit!.transform = SCNMatrix4Identity
    }
}

- Tim