前言
在我做一個(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)行效果圖吧:
問(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(全景展示)用法