SceneKit - 打造全景+VR 播放框架

功能介绍

1.全景模式和VR模式
2.支持滑动切换视角
3.支持捏合放大缩小
4.支持重力感应
5.包含头控功能(上一曲,下一曲,暂停和播放,以及音量键)
6.播放到指定的时间
7.播放时长缓冲以及总时间回调
8.视角恢复(当你手势移动视角发生变化时,想要恢复到初始视角时)

使用的核心技术

SceneKit
SpriteKit

先来看一个头文件

#import 
#import 
/// 播放的类型
typedef enum : NSUInteger {
  Panorama, // 全景
  VR        // VR
} PlayerType;

typedef enum : NSUInteger {
    PlayerStatueLoading, // 加载中
    PlayerStatueLoadingAvailable // 可播放
} PlayerStatueType;
// 头控回调协议
@protocol ZBPlayerViewDelegate
@required
/*************以下是VR模式下头控开关回调的方式  *****************/
/// 播放下一个视频回调
-(void)next;
/// 播放上一个视频回调
-(void)previous;
/// 降低声音回调
-(void)lowVoice;
/// 增高声音回调
-(void)highVoice;
/// 全景模式下有手势滑动,此时显示恢复按钮,当用户点击恢复按钮后,可隐藏掉按钮,用户下次滑动后,仍然回调此方法
-(void)slideInPanoramaMode;
/// 是否可播状态检测 加载中 或者 可播放
-(void)playerStatusChange:(PlayerStatueType)status;
-(void)handleTapGesture:(UITapGestureRecognizer*)tapGesture;
/************* 以下是所有模式都会触发回调的方法 *****************/
@optional
// 播放完毕
-(void)stop;
/// 视频播放失败回调
-(void)failure;
/// 视频相关时间回调
-(void)currentTime:(double)currentTime cacheTime:(double)cacheTime duration:(double)duration;
@end
@interface ZBPlayerView : UIView
@property(nonatomic,weak) id delegate;
/// 重力感应开关 默认为关闭
@property(nonatomic)BOOL enableMotion;
/// 视频总时长
@property(nonatomic,readonly)double duration;
/// 设置gif动画,元素可以为 xxx.png/jpg 或者UIImage 都可以
@property(nonatomic,strong)NSArray *gif;
@property(nonatomic,strong)AVPlayer *player;
@property(assign,nonatomic,readonly)bool     isPlaying; /// 播放器是否是正在播放的状态
/// 初始化设置 必须先执行这个
-(void)setup;
/// 播放视频本地/网络都可以
-(void)play:(NSURL*)url;
/// 播放当前视频
-(void)play;
/// 暂停
-(void)pause;
/// 设置播放类型  不设置默认为全景
-(void)setPlayerType:(PlayerType)type;
/// 滑动播放时使用这个方法
-(void)seekToTime:(double)time;
/// 当手势移动此视频时,使用此方法可定位到起始位置
-(void)reset;
/// 释放资源
-(void)releaseResource;
@end

运行效果如下

VR模式

全景模式

头控开关演示

技术难点分析

1.渲染全景的模型

1.其实是一个球体模型
2.模型渲染的时候, 一般会渲染两个面,我们需要进行优化,只让它渲染内变表面

2.如何将视频渲染到球体上

1.通过AVPlayer 获取视频流
2.通过SKVedioNode 渲染视频
3.将SKVedioNode添加到SKScene场景上
4.将场景作为球体渲染的对象渲染出来

3.头控技术

1.在球体中间创建一个头控根节点,通过控制其的角度,改变菜单的位置
2.头控节点的上面添加子节点,即每个功能节点

4.摄像机节点改变视角

1.创建一个节点绑定一个照相机,一定要放在场景的中心
2.改变照相机的视角来决定呈现出球体的那部分是可见的

...

更多技术细节

a.怎么实现分屏?
b.重力感应怎么改变视角
c.滑动手势怎么改变视角
d.悬停动画怎么实现

完整代码以及详细讲解请前往App Store 搜索SceneKit

使用QQ扫码下载Scenekit教程