iOS全景效果實現

前言

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

1、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<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,下面也帖出運行效果圖吧：

問題解決

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

2、JAPanoView

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

3、Panorama

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

4、three.js

JavaScript 3D library。

5、本身實現

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

結語

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

參考文章

一、iOS全景
二、PanoramaGL在IOS的使用
三、iOS PanoramaGL（全景展現）用法