iOS-全景效果实现

一、PanoramaGL

上面这个库的链接是GitHub上一个大神skyfox维护的,他在原有基础之上对一些问题进行了修复,这个库没有使用ARC,集成的时候相对麻烦一点,因为库的作者没有对库进行维护,在有些效果上,性能开销还是挺大的,下面开始介绍集成与使用吧。

集成,将PanoramaGL文件夹拖入工程,并在Build Phases Compile Source库文件.m中添加-fno-objc-arc(注意:每个库文件.m都要添加,不然运行会报错),如下图所示:

具体使用:PanoramaGL的demo主要提供了六种效果展示,有六张图片拼接,也有直接使用一张全景图片,我项目里使用的是Sphere这种效果,图片支持大小是2048x1024。在构建PLImage的时候,我不得不吐槽下自己,因为demo都是通过图片路径得到PLImage,于是我就想到用AFN封装一个图片下载方法,下载图片后,获取图片保存在本地路径,来构建PLImage。之后SDWebImage了解和使用的比较多,发现SDWebImage可以直接下载图片并缓存,好了,不多说了,直接上代码吧。

- (void)setupPLView {

    //JSON loader example (see json.data, json_s2.data and json_cubic.data)

    //[plView load:[PLJSONLoader loaderWithPath:[[NSBundle mainBundle] pathForResource:@"json_cubic" ofType:@"data"]]];

    /**  < 设置代理 >  */

    plView.delegate = self;

    /**  < 设置灵敏度 >  */

    /**  <

     #define kDefaultAccelerometerSensitivity    7.0f

     #define kDefaultAccelerometerInterval        1.0f/60.0f

     #define kAccelerometerSensitivityMinValue    1.0f

     #define kAccelerometerSensitivityMaxValue    10.0f

     #define kAccelerometerMultiplyFactor        100.0f

     >  */

//    plView.accelerometerSensitivity = 10;

//

//    /**  < 加速更新频率 >  */

//    plView.accelerometerInterval = 1 / 45.0;

//    /**  < 加速度 >  */

//    plView.isAccelerometerEnabled = NO;

//    /**  < X轴加速度 >  */

//    plView.isAccelerometerLeftRightEnabled = NO;

//    /**  < Y轴加速度 >  */

//    plView.isAccelerometerUpDownEnabled = NO;

//    /**  < 惯性 >  */

//    plView.isInertiaEnabled = NO;

//    /**  < 三指恢复初始化 >  */

//    plView.isResetEnabled = NO;


    /**  < 加载本地 >  */

    [self selectPanorama:0];


    /**  < 加载网络全景图 >  */

//    [self loadData];

}

- (void)loadData {

    NSObject *panorama = [PLSphericalPanorama panorama];

    [[SDWebImageManager sharedManager] loadImageWithURL:[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514970914547&di=2eb3de621ad48c0f9961e99e3176ad65&imgtype=0&src=http%3A%2F%2Fbpic.ooopic.com%2F16%2F00%2F89%2F16008943-6247a25ba16e2cd1e23842d461d60fa5.jpg"] options:SDWebImageRetryFailed progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {


    } completed:^(UIImage * _Nullable image, NSData * _Nullable data, NSError * _Nullable error, SDImageCacheType cacheType, BOOL finished, NSURL * _Nullable imageURL) {

        NSLog(@"%@",imageURL);

        /**  < 1、第一种加载方式 >  */

//        [(PLSphericalPanorama *)panorama setTexture:[PLTexture textureWithImage:[PLImage imageWithBuffer:data]]];

        /**  < 2、第二种加载方式 >  */

        /**  < 是否缓存在磁盘 >  */

        [[SDWebImageManager sharedManager] diskImageExistsForURL:imageURL completion:^(BOOL isInCache) {

            if(isInCache) {

                /**  < 获取缓存key >  */

                NSString *cacheImageKey = [[SDWebImageManager sharedManager]  cacheKeyForURL:imageURL];

                /**  < 获取缓存路径 >  */

                NSString *cacheImagePath = [[SDImageCache sharedImageCache] defaultCachePathForKey:cacheImageKey];

                 [(PLSphericalPanorama *)panorama setTexture:[PLTexture textureWithImage:[PLImage imageWithPath:cacheImagePath]]];

            }

        }];


        //Add a hotspot

        PLTexture *hotspotTexture = [PLTexture textureWithImage:[PLImage imageWithPath:[[NSBundle mainBundle] pathForResource:@"hotspot"ofType:@"png"]]];

        PLHotspot *hotspot = [PLHotspot hotspotWithId:(kIdMin + random() % ((kIdMax + 1) - kIdMin)) texture:hotspotTexture atv:0.0f ath:0.0f width:0.08f height:0.08f];

        [panorama addHotspot:hotspot];

        dispatch_async(dispatch_get_main_queue(), ^{

            [plView setPanorama:panorama];

            /**  < 设置角度 >  */

            PLRotation ro = PLRotationMake(40.0, 0.0, 0.0);

            [plView.camera resetCurrentC:ro Pitch:ro.pitch yaw:ro.yaw];

        });

    }];

}

到这里全景图效果都已经实现了,在项目中运用的也只有这么多,如果还有更多需求,可以查看相关头文件提供的方法吧。具体详情请看PanoramaGLDemo,下面也帖出运行效果图吧:

问题解决

1、解决点击 PLHotspot 不响应 didClickHotspot 代理方法的问题

二、JAPanoView

JAPanoView是一个UIView子类,从立方全景图像创建显示360 - 180度全景,交互式平移和缩放。可以添加任何UIView JAPanoView热点。具体使用查看GitHub说明。

三、Panorama

360°球形全景视图,基于OpenGL实现,具体使用查看GitHub上的Demo。

四、three.js

JavaScript 3D library。

五、自己实现

GLKit.framework 与OpenGLES实现,这个需要对OpenGL比较精通才能实现吧。

结语

全景图在一般的项目中也用不到,自己写篇文章做下记录,这篇文章主要对我在项目中实现全景图代码做了记录,其他方法只是为了拓展和了解,希望能对你能有所帮助。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,417评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,921评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,850评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,945评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,069评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,188评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,239评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,994评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,409评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,735评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,898评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,578评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,205评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,916评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,156评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,722评论 2 363
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,781评论 2 351

推荐阅读更多精彩内容

  • 前言 在我做一个商城类App的时候,遇到一个需求,就是需要把安装师傅的项目效果图360°全景展示出来,以前也从来没...
    WenBo丨星空灬阅读 3,073评论 1 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,907评论 25 707
  • 14/06/2016 周二故事: 听了更多爱情故事,在那些故事里,“跟我在一起一个礼拜就给我买了三个香奈儿”是深爱...
    春风十里难如你阅读 477评论 0 0
  • 最喜欢雨夜,最喜欢蜷缩着静静观雨。 落地窗外的世界被雨水从头到脚刷洗了一遍, 色彩被晕染,冷空气中泛着潮。 淅淅沥...
    愿你与美好不期而遇阅读 278评论 0 1
  • 平均3.5天读一本 20170916 学习知识经济 得到app 财务自由之路音频版
    最大化阅读 196评论 0 0