项目里碰到了展示全景图的需求，以前没做过，google了一下已经有不少现成的库可以拿来用了，不过有前辈提到可以用SceneKit来实现，刚好去年做AR的时候用过SceneKit，一下子来了思路，在这里记录一下。

思路

思路就是在SceneKit的场景里放置一个球体，把全景图贴在球体表明，然后把相机放置在球体中心不就得了。

实现

实现起来很简单，往 ViewController 放一个 SCNView，一个相机，一个球体就好。

class PanoramaVC: UIViewController {let sceneView = SCNView()// 相机Nodelet cameraNode = SCNNode()// 球体let sphere = SCNSphere()...override func viewDidLoad() {super.viewDidLoad()sceneView.scene = SCNScene.init()sceneView.frame = self.view.frameself.addSubView(sceneView)sphere.radius = 50// 只渲染一面，从球体里面看，外面就不用渲染了sphere.firstMaterial?.isDoubleSided = false// 剔除外面sphere.firstMaterial?.cullMode = .front// 把全景图“贴”到球体上sphere.firstMaterial?.diffuse.contents = UIImage.init(named: "全景图名")// 球体Node，位置放到场景原点let sphereNode = SCNNode.init(geometry: sphere)sphereNode.position = SCNVector3Make(0, 0, 0)sceneView.scene?.rootNode.addChildNode(sphereNode)// 相机Node，位置放到场景原点cameraNode.camera = SCNCamera.init()cameraNode.position = SCNVector3Make(0, 0, 0)sceneView.scene?.rootNode.addChildNode(cameraNode)}
}
复制代码

到这里就成功了。但是这样有个问题：全景图左右是反的。这是因为全景图是从球体外面“贴”到球体上的，所以从球体内部看到的全景图是左右反向的。那我就把全图片给它左右反向就好啦。使用下面这个函数可以把图片左右反向。

func flipImageLeftRight(_ image: UIImage) -> UIImage? {UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)let context = UIGraphicsGetCurrentContext()!context.translateBy(x: image.size.width, y: image.size.height)context.scaleBy(x: -image.scale, y: -image.scale)context.draw(image.cgImage!, in: CGRect(origin:CGPoint.zero, size: image.size))let newImage = UIGraphicsGetImageFromCurrentImageContext()UIGraphicsEndImageContext()return newImage
}
复制代码

此时把左右反向的图片“贴”到球体上

sphere.firstMaterial?.diffuse.contents = flipImageLeftRight(UIImage.init(named: "全景图名"))
复制代码

全景图长这样：

快看下效果吧（实际还是很流畅的，gif 效果有卡顿）：

悬浮广告

除了全景图，还有个需求就是在全景图适当的位置显示广告图标，点击后会出现一张海报。要求广告图标在全景图视角变化的时候跟着动。

这个其实也不难，只要知道需要放置广告的位置坐标，在全景图视角变化的同时移动图标让图标和目标位置同步就好。

但是我怎么知道全景图视角怎样变化呢（其实是相机Node旋转角度在变化）？我想通过相机旋转时监听旋转角度但是没找到监听方法，如果有谁知道望告知，十分感谢！

那我干脆自己控制相机旋转角度。使用这句代码禁止通过 sceneView 来控制相机旋转：

sceneView.allowsCameraControl = false
复制代码

然后监听滑动手势来控制相机和广告图标旋转：

//相机旋转角度（单位是弧度，转一圈是 2pi）
var rotateAngle = CGPoint.zero
...override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {if touches.count == 1 {let touch = touches.first// 手指在x、y方向滑动距离let offsetX = (touch?.location(in: self.view).x)! - (touch?.previousLocation(in: self.view).x)!let offsetY = (touch?.location(in: self.view).y)! - (touch?.previousLocation(in: self.view).y)!// 手指滑动的距离和相机旋转弧度比值约等于800（这个值是我测试得到的可能不精确）rotateAngle.x += offsetX / 800rotateAngle.y += offsetY / 800// 把rotateAngle.x按2?取模rotateAngle.x = rotateAngle.x.truncatingRemainder(dividingBy: CGFloat.pi * 2)// 控制全景图上下旋转不颠倒if rotateAngle.y > 1 {rotateAngle.y = 1}if rotateAngle.y < -1 {rotateAngle.y = -1}// 旋转相机rotateCamera()// 旋转广告rotateAdvertisement()}
}/// 旋转相机
func rotateCamera() {let rotation = SCNAction.rotateTo(x: rotateAngle.y, y: rotateAngle.x, z: 0, duration: 0)cameraNode.runAction(rotation)
}
复制代码

要旋转广告图标就要先添加一个广告图标，这里使用一个 UIButton 作为示例。我想把广告图标放在右边的狮子头上，而狮子头的位置的x、y坐标与图片宽高比值为0.570和0.456。

...
var adPosition = CGPoint.init(x: 0.570, y: 0.456)
var adButton = UIButton()func addAdversisement() {adButton.setTitle("我是广告图标", for: .normal)adButton.backgroundColor = UIColor.init(white: 1, alpha: 0.5)adButton.layer.cornerRadius = 10adButton.frame = CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: 80, height: 40))self.view.addSubview(adButton)// 把图标放在屏幕上对应的位置adButton.center = positionInScreenOfAd(position: adPosition)
}/// 从广告图标在图片上的位置计算出在屏幕上的位置
///
/// - Parameter position: 图片上的位置
/// - Returns: 屏幕上的位置
func positionInScreenOfAd(position: CGPoint) -> CGPoint {//广告点相对于图片原点的偏移角度let diffToOrigin = CGPoint.init(x: position.x * CGFloat.pi, y: (position.y - 0.5) * CGFloat.pi)//转动过程中，广告点相对于屏幕中心点的偏移角度var offsetAngle = CGPoint.init(x: diffToOrigin.x + rotateAngle.x / 2, y: diffToOrigin.y + rotateAngle.y)offsetAngle.x = offsetAngle.x.truncatingRemainder(dividingBy: CGFloat.pi)//在显示范围内，就按角度比例显示在屏幕上let viewSize = self.view.frame.size// 全景图显示在屏幕上的范围为 -0.20453 < x < 0.20453, -0.53996 < y < 0.53996（单位为弧度），超出范围就不显示，其中 x 值正负要分开处理//（这个值是我测试得到的可能不精确）if abs(offsetAngle.y) > 0.53996 {return CGPoint.zero}if abs(offsetAngle.x) < 0.20453 {return CGPoint.init(x: viewSize.width / 2 * (1 + offsetAngle.x / 0.20453), y: viewSize.height / 2 * (1 + offsetAngle.y / 0.53996))}if abs(offsetAngle.x) >= CGFloat.pi - 0.20453 && abs(offsetAngle.x) < CGFloat.pi {return CGPoint.init(x: viewSize.width / 2 * (1 + (abs(offsetAngle.x) - CGFloat.pi) / 0.20453), y: viewSize.height / 2 * (1 + offsetAngle.y / 0.53996))}return CGPoint.zero
}
复制代码

接下来就是旋转广告图标：

/// 旋转广告
func rotateAdvertisement() {// 实时计算旋转过程中广告图标在屏幕上的位置let newP = positionInScreenOfAd(position: adPosition)// newP == CGPoint.zero 表示图标位置在屏幕之外adButton.isHidden = newP == CGPoint.zeroadButton.center = positionInScreenOfAd(position: adPosition)
}
复制代码

到这里就可以看到广告图标随全景图滑动了：

大功告成！