在我作一個商城類App的時候,遇到一個需求,就是須要把安裝師傅的項目效果圖360°全景展現出來,之前也歷來沒有接觸過,一開始也並無具體的實現思路,後來同事給我推薦了一個基於OpenGL支持球,立方體,圓柱的庫,這是一個很老的庫了,可是效果卻還不錯,最後工程也集成和使用了這個庫,順便也介紹幾種其餘的實現方式,以便之後作項目查閱。html
上面這個庫的連接是GitHub上一個大神skyfox維護的,他在原有基礎之上對一些問題進行了修復,這個庫沒有使用ARC,集成的時候相對麻煩一點,由於庫的做者沒有對庫進行維護,在有些效果上,性能開銷仍是挺大的,下面開始介紹集成與使用吧。ios
-fno-objc-arc
(注意:每一個庫文件.m都要添加,否則運行會報錯),以下圖所示:
- (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
一、解決點擊 PLHotspot 不響應 didClickHotspot 代理方法的問題github
JAPanoView是一個UIView子類,從立方全景圖像建立顯示360 - 180度全景,交互式平移和縮放。能夠添加任何UIView JAPanoView熱點。具體使用查看GitHub說明。json
360°球形全景視圖,基於OpenGL實現,具體使用查看GitHub上的Demo。緩存
JavaScript 3D library。bash
GLKit.framework 與OpenGLES實現,這個須要對OpenGL比較精通才能實現吧。網絡
全景圖在通常的項目中也用不到,本身寫篇文章作下記錄,這篇文章主要對我在項目中實現全景圖代碼作了記錄,其餘方法只是爲了拓展和了解,但願能對你能有所幫助。app
一、iOS全景
二、PanoramaGL在IOS的使用
三、iOS PanoramaGL(全景展現)用法dom