iOS全景效果實現

前言

在我作一個商城類App的時候,遇到一個需求,就是須要把安裝師傅的項目效果圖360°全景展現出來,之前也歷來沒有接觸過,一開始也並無具體的實現思路,後來同事給我推薦了一個基於OpenGL支持球,立方體,圓柱的庫,這是一個很老的庫了,可是效果卻還不錯,最後工程也集成和使用了這個庫,順便也介紹幾種其餘的實現方式,以便之後作項目查閱。html

1、PanoramaGL

上面這個庫的連接是GitHub上一個大神skyfox維護的,他在原有基礎之上對一些問題進行了修復,這個庫沒有使用ARC,集成的時候相對麻煩一點,由於庫的做者沒有對庫進行維護,在有些效果上,性能開銷仍是挺大的,下面開始介紹集成與使用吧。ios

  • 集成,將PanoramaGL文件夾拖入工程,並在Build Phases Compile Source庫文件.m中添加-fno-objc-arc(注意:每一個庫文件.m都要添加,否則運行會報錯),以下圖所示:
    屏幕快照 2018-01-03 下午12.05.42.png
    屏幕快照 2018-01-03 下午12.08.58.png
  • 具體使用: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<PLIPanorama> *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);
        /**  < 一、第一種加載方式 >  */
//        [(PLSphericalPanorama *)panorama setTexture:[PLTexture textureWithImage:[PLImage imageWithBuffer:data]]];
        /**  < 二、第二種加載方式 >  */
        /**  < 是否緩存在磁盤 >  */
        [[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];
        });
    }];
}
複製代碼

到這裏全景圖效果都已經實現了,在項目中運用的也只有這麼多,若是還有更多需求,能夠查看相關頭文件提供的方法吧。具體詳情請看GitHub:PanoramaGLDemo,下面也帖出運行效果圖吧: git

Untitled.gif

問題解決

一、解決點擊 PLHotspot 不響應 didClickHotspot 代理方法的問題github

2、JAPanoView

JAPanoView是一個UIView子類,從立方全景圖像建立顯示360 - 180度全景,交互式平移和縮放。能夠添加任何UIView JAPanoView熱點。具體使用查看GitHub說明。json

3、Panorama

360°球形全景視圖,基於OpenGL實現,具體使用查看GitHub上的Demo。緩存

4、three.js

JavaScript 3D library。bash

5、本身實現

GLKit.framework 與OpenGLES實現,這個須要對OpenGL比較精通才能實現吧。網絡

結語

全景圖在通常的項目中也用不到,本身寫篇文章作下記錄,這篇文章主要對我在項目中實現全景圖代碼作了記錄,其餘方法只是爲了拓展和了解,但願能對你能有所幫助。app

參考文章

一、iOS全景
二、PanoramaGL在IOS的使用
三、iOS PanoramaGL(全景展現)用法dom

相關文章
相關標籤/搜索