项目里碰到了展示全景图的需求,以前没做过,google了一下已经有不少现成的库可以拿来用了,不过有前辈提到可以用SceneKit来实现,刚好去年做AR的时候用过SceneKit,一下子来了思路,在这里记录一下。
思路
思路就是在SceneKit的场景里放置一个球体,把全景图贴在球体表明,然后把相机放置在球体中心不就得了。
实现
实现起来很简单,往 ViewController 放一个 SCNView,一个相机,一个球体就好。
class PanoramaVC: UIViewController {
let sceneView = SCNView()
// 相机Node
let cameraNode = SCNNode()
// 球体
let sphere = SCNSphere()
...
override func viewDidLoad() {
super.viewDidLoad()
sceneView.scene = SCNScene.init()
sceneView.frame = self.view.frame
self.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 / 800
rotateAngle.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 = 10
adButton.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.zero
adButton.center = positionInScreenOfAd(position: adPosition)
}
到这里就可以看到广告图标随全景图滑动了:
大功告成!