前言
在我做一個(gè)商城類(lèi)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)銷(xiāo)還是挺大的,下面開(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子類(lèi),從立方全景圖像創(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ì)你能有所幫助。
