iOS全景效果實(shí)現(xiàn)

前言

在我做一個(gè)商城類App的時(shí)候朝蜘,遇到一個(gè)需求蚂四,就是需要把安裝師傅的項(xiàng)目效果圖360°全景展示出來(lái)歼疮,以前也從來(lái)沒(méi)有接觸過(guò)署咽,一開(kāi)始也并沒(méi)有具體的實(shí)現(xiàn)思路近顷,后來(lái)同事給我推薦了一個(gè)基于OpenGL支持球,立方體,圓柱的庫(kù)宁否,這是一個(gè)很老的庫(kù)了窒升,但是效果卻還不錯(cuò),最后工程也集成和使用了這個(gè)庫(kù)慕匠,順便也介紹幾種其他的實(shí)現(xiàn)方式饱须,以便以后做項(xiàng)目查閱。

一台谊、PanoramaGL

上面這個(gè)庫(kù)的鏈接是GitHub上一個(gè)大神skyfox維護(hù)的蓉媳,他在原有基礎(chǔ)之上對(duì)一些問(wèn)題進(jìn)行了修復(fù),這個(gè)庫(kù)沒(méi)有使用ARC锅铅,集成的時(shí)候相對(duì)麻煩一點(diǎn)酪呻,因?yàn)閹?kù)的作者沒(méi)有對(duì)庫(kù)進(jìn)行維護(hù),在有些效果上盐须,性能開(kāi)銷還是挺大的,下面開(kāi)始介紹集成與使用吧玩荠。

  • 集成,將PanoramaGL文件夾拖入工程丰歌,并在Build Phases Compile Source庫(kù)文件.m中添加-fno-objc-arc(注意:每個(gè)庫(kù)文件.m都要添加姨蟋,不然運(yùn)行會(huì)報(bào)錯(cuò)),如下圖所示:
    屏幕快照 2018-01-03 下午12.05.42.png

    屏幕快照 2018-01-03 下午12.08.58.png
  • 具體使用:PanoramaGL的demo主要提供了六種效果展示,有六張圖片拼接立帖,也有直接使用一張全景圖片眼溶,我項(xiàng)目里使用的是Sphere這種效果,圖片支持大小是2048x1024晓勇。在構(gòu)建PLImage的時(shí)候堂飞,我不得不吐槽下自己,因?yàn)閐emo都是通過(guò)圖片路徑得到PLImage绑咱,于是我就想到用AFN封裝一個(gè)圖片下載方法绰筛,下載圖片后,獲取圖片保存在本地路徑描融,來(lái)構(gòu)建PLImage铝噩。之后SDWebImage了解和使用的比較多,發(fā)現(xiàn)SDWebImage可以直接下載圖片并緩存窿克,好了骏庸,不多說(shuō)了毛甲,直接上代碼吧。
- (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"]]];
    /**  < 設(shè)置代理 >  */
    plView.delegate = self;
    /**  < 設(shè)置靈敏度 >  */
    /**  <
     #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;
//    /**  < 三指恢復(fù)初始化 >  */
//    plView.isResetEnabled = NO;
    
    /**  < 加載本地 >  */
    [self selectPanorama:0];
    
    /**  < 加載網(wǎng)絡(luò)全景圖 >  */
//    [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);
        /**  < 1具被、第一種加載方式 >  */
//        [(PLSphericalPanorama *)panorama setTexture:[PLTexture textureWithImage:[PLImage imageWithBuffer:data]]];
        /**  < 2玻募、第二種加載方式 >  */
        /**  < 是否緩存在磁盤(pán) >  */
        [[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];
            /**  < 設(shè)置角度 >  */
            PLRotation ro = PLRotationMake(40.0, 0.0, 0.0);
            [plView.camera resetCurrentC:ro Pitch:ro.pitch yaw:ro.yaw];
        });
    }];
}

到這里全景圖效果都已經(jīng)實(shí)現(xiàn)了,在項(xiàng)目中運(yùn)用的也只有這么多一姿,如果還有更多需求七咧,可以查看相關(guān)頭文件提供的方法吧。具體詳情請(qǐng)看GitHub:PanoramaGLDemo,下面也帖出運(yùn)行效果圖吧:

Untitled.gif

問(wèn)題解決

1叮叹、解決點(diǎn)擊 PLHotspot 不響應(yīng) didClickHotspot 代理方法的問(wèn)題

二艾栋、JAPanoView

JAPanoView是一個(gè)UIView子類,從立方全景圖像創(chuàng)建顯示360 - 180度全景,交互式平移和縮放蛉顽」粒可以添加任何UIView JAPanoView熱點(diǎn)。具體使用查看GitHub說(shuō)明蜂林。

三遥诉、Panorama

360°球形全景視圖,基于OpenGL實(shí)現(xiàn)噪叙,具體使用查看GitHub上的Demo矮锈。

四、three.js

JavaScript 3D library睁蕾。

五苞笨、自己實(shí)現(xiàn)

GLKit.framework 與OpenGLES實(shí)現(xiàn),這個(gè)需要對(duì)OpenGL比較精通才能實(shí)現(xiàn)吧子眶。

結(jié)語(yǔ)

全景圖在一般的項(xiàng)目中也用不到瀑凝,自己寫(xiě)篇文章做下記錄,這篇文章主要對(duì)我在項(xiàng)目中實(shí)現(xiàn)全景圖代碼做了記錄臭杰,其他方法只是為了拓展和了解粤咪,希望能對(duì)你能有所幫助。

參考文章

1渴杆、iOS全景
2寥枝、PanoramaGL在IOS的使用
3、iOS PanoramaGL(全景展示)用法

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末磁奖,一起剝皮案震驚了整個(gè)濱河市囊拜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌比搭,老刑警劉巖冠跷,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡蜜托,警方通過(guò)查閱死者的電腦和手機(jī)弟疆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)盗冷,“玉大人,你說(shuō)我怎么就攤上這事同廉∫翘牵” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵迫肖,是天一觀的道長(zhǎng)锅劝。 經(jīng)常有香客問(wèn)我,道長(zhǎng)蟆湖,這世上最難降的妖魔是什么故爵? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮隅津,結(jié)果婚禮上诬垂,老公的妹妹穿的比我還像新娘。我一直安慰自己伦仍,他們只是感情好结窘,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著充蓝,像睡著了一般隧枫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谓苟,一...
    開(kāi)封第一講書(shū)人閱讀 51,578評(píng)論 1 305
  • 那天官脓,我揣著相機(jī)與錄音,去河邊找鬼涝焙。 笑死卑笨,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仑撞。 我是一名探鬼主播湾趾,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼派草!你這毒婦竟也來(lái)了搀缠?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤近迁,失蹤者是張志新(化名)和其女友劉穎艺普,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡歧譬,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年岸浑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瑰步。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡矢洲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出缩焦,到底是詐尸還是另有隱情读虏,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布袁滥,位于F島的核電站盖桥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏题翻。R本人自食惡果不足惜揩徊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望嵌赠。 院中可真熱鬧塑荒,春花似錦、人聲如沸姜挺。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)初家。三九已至偎窘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間溜在,已是汗流浹背陌知。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留掖肋,地道東北人仆葡。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像志笼,于是被迫代替她去往敵國(guó)和親沿盅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容