iOS全景漫游

前言

最近在做个房地产的项目,需要有全景的效果。在网上google了一番,发现了PanoramaGL这个库,但是好久没更新了。尝试着拖到工程中用了下,更改了一些PLConstants.h的最大图片尺寸的参数,便可以跑起来了。

但是

不幸的是,设置scrollEnable=YES后,滑动一下,便会一直不停的旋转。因为滑一下,在PLViewBase中,就会启动个timer/CADisplaylink进行刷新,不断调用drawViewInternally。后来想了个粗暴的办法,就是在drawViewInternally里面,延迟0.4s将其stop。但是这样一来,停的有点突然,不够平滑。╮(╯▽╰)╭,又不知道怎么去改源码,所以寻找另外的解决方法。

新发现

还是google,发现有pano2vr可以将全景图片转换成html,并且切换的很平顺。然后在app里面,弄个webview就够了。要吐槽一下的是,它是个付费软件,没找到mac的破解版,而mac的试用版,会打水印,没法用。后来还是切到了win版,下了个破解的。

简单实用

用起来还是蛮方便的,将图片拖进去,支持一张全景图,或者6张立体的。然后设置参数,一般都不需要怎么设置,我只是将html设置了全屏。

还可设置hotspot,并且可以编辑皮肤,使用自定义的图片。总体还是比较方便的。视频1视频2

qq有一篇讲实现全景星球的文章,里面有比较详细的对各种全景工具的分析对比,可戳这里

接入到app

其实在这一步,还是有点坎坷的。主要是图片路径惹的祸。因为是以黄色文件夹加进去的,所以所有的资源都在mainbundle下面,没有层级了,而它自动生成的xml里面的image路径,是images/xx.jpg的。所以需要手动修改路径,将images/去掉,直接引用xx.jpg。

还有一点要注意,就是加载本地html时,baseURL的设定。需要设置为[[NSBundle mainBundle] bundleURL]。如果设置为nil,会出现提示。因为它找不js文件和img。

This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.

  NSString *path = [[NSBundle mainBundle] pathForResource:@"A5_cube" ofType:@"html"];
  NSString *data = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

  [_webView loadHTMLString:data baseURL:[[NSBundle mainBundle] bundleURL]];

最后,如果还遇到js找不到或没有执行的情况,请检查build phase-->compile source里有没有它的身影。如有,将其拖至copy bundle resource中。

不过我用xcode 7.3直接拖进去,是正常的。

呼哈哈,坑,终于填满了。

6.25更新

=======
Demo在此

7.25更新

前段时间请教过一个前辈,关于自动停止滑动的问题。解决方案是设置一个摩擦因子(0-1),在滑动是不断的乘以该因子,以达到减速的目的。简单的贴下代码吧。

在PLViewBase.m里面,drawViewInternally

-(void)drawViewInternally
{
    if(scene && !isValidForFov && !isSensorialRotationRunning)
    {
        PLCamera *camera = scene.currentCamera;

        [camera rotateWithVelocity:self.velocity];

        if (touchStatus==PLTouchEventTypeEnded) {
            //在PLCamera自定义一个转动方法,手指离开触摸屏的时候按画面按最后产生的速度及方向转动
            [camera rotateWithVelocity:self.velocity];
        }
        else {
            [camera rotateWithStartPoint:startPoint endPoint:endPoint];
        }

        if(delegate && [delegate respondsToSelector:@selector(view:didRotateCamera:rotation:)])
            [delegate view:self didRotateCamera:camera rotation:[camera getAbsoluteRotation]];
    }
    if(renderer)
        [renderer render];

    //利用摩擦因子减速
    if (touchStatus==PLTouchEventTypeEnded) {
        //摩擦因子
        float friction = 0.9;

        if (fabs(self.velocity.x)>1||fabs(self.velocity.y)>1) {

            self.velocity=CGPointMake(self.velocity.x*friction, self.velocity.y*friction);
        }
        else
        {
            [self stopAnimationInternally];
        }
    }
}

然后self.velocity需要自己计算,在move的时候根据touch移动的距离除以时间。

- (CGPoint)calculateVelocity:(NSSet *)touches {

    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self];
    CGPoint prevLocation = [touch previousLocationInView:self];

    CGFloat xDistance = location.x - prevLocation.x;
    CGFloat yDistance = location.y - prevLocation.y;

  // self.curTimestamp,self.previousTimestamp自己定义
    NSTimeInterval time = self.curTimestamp - self.previousTimestamp;
    if (time != 0) {
        CGFloat xSpeed = xDistance/time;
        CGFloat ySpeed = yDistance/time;

        return CGPointMake(xSpeed, ySpeed);
    }

    return CGPointZero;
}

最后在PLObject中添加rotateWithVelocity的方法

-(void)rotateWithVelocity:(CGPoint)velocity
{
    float sensitivity = 900;

    self.pitch += velocity.y/ sensitivity;
    self.yaw += -velocity.x/sensitivity;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容