首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ChiChou
V2EX  ›  分享创造

基于 WebGL 的 360°街景

  •  
  •   ChiChou · 2014-04-26 16:29:08 +08:00 · 8314 次点击
    这是一个创建于 2103 天前的主题,其中的信息可能已经有所发展或是发生改变。
    今天搞到了几张我们学校的全景图,闲得蛋疼改了个仿Google街景的东西~

    Live DEMO(不保证以后没有变动,代码以GitHub为准):

    http://chichou.0ginr.com/app/ujs-campus-view

    截图

    https://raw.githubusercontent.com/ChiChou/UJSCampusView/remote/UJSCampusView.png

    基于WEBGL,Safari需要手动开启,IE11和以上版本才支持哦。

    源代码放在GitHub

    https://github.com/ChiChou/UJSCampusView

    想替换成自己的图片,或者二次开发的,请参考下面的内容~

    因为跨域问题,直接用file:///协议打开index.htm是无法看到图片的。请用python -m SimpleHTTPServer运行一个静态站点。

    图片要求

    场景图片使用鱼眼镜头拍摄,若要达到最佳效果,需要满足宽高比为 2:1。目前使用的规格为3200x1600像素。如果不能满足 2:1 的比例,调整到天空和地面等极端视角时将出现黑边现象。

    浏览器要求

    目前最新版Chrome,Opera,Firefox 和 IE11 都支持 WEBGL。对于低版本的浏览器嘛,为了保证自己的体验,还是赶紧升级吧!

    交互

    支持键盘方向键(上下左右)导航
    支持鼠标拖动视角
    支持鼠标滚轮放大/缩小
    支持按钮点击控制视角

    编程接口

    初始化

    var streetView = street('viewport').view('img/scene.jpg');

    切换贴图 streetView.toggle('img/new/path/to/texture.jpg')

    镜头相关

    拉近 streetView.zoomIn()
    拉远 streetView.zoomOut()
    左移 streetView.panLeft()
    右移 streetView.panRight()
    第 1 条附言  ·  2014-04-28 00:50:22 +08:00
    第 2 条附言  ·  2014-04-29 12:35:17 +08:00
    发现一个很奇葩的现象,在我的另一台笔记本(Windows 8)上Chrome居然无法加载纹理,这台笔记本上Firefox和Opera全正常。有同样遇到图片半天出不来的同学么?
    第 3 条附言  ·  2015-01-19 13:04:04 +08:00
    纹理不显示的 bug 已修复,经测试 iOS 上也可以使用~

    新版彻底重写了一遍,部署了更多的图片场景,在地图上标注相关地点的经纬度,并使用 node 环境搭建 dev 服务器方便修改。

    项目地址搬迁到:https://github.com/ChiChou/StreetView/
    第 4 条附言  ·  2016-07-25 22:49:54 +08:00
    旧站点已经弃用,此贴 URL 作废

    要是可以自己删掉就好了~
    第 5 条附言  ·  2016-08-20 23:31:23 +08:00
    鉴于有人邮件提问,那我还是新开一个坑:
    https://github.com/ChiChou/vue-pano

    用 ES6 和 vue 重写了一个体验更好的全景展示组件,功能开发中,最大的亮点是不需要依赖 three.js
    36 回复  |  直到 2015-02-04 12:51:27 +08:00
    l0wkey
        1
    l0wkey   2014-04-26 16:30:35 +08:00
    反人类的鼠标拖动方向...
    liaa
        2
    liaa   2014-04-26 16:49:03 +08:00
    网站乱码了...
    反人类的鼠标拖动方向...
    ChiChou
        3
    ChiChou   2014-04-26 16:50:17 +08:00
    @l0wkey 不会吧,难道我的习惯比较奇葩= =
    200
        4
    200   2014-04-26 16:51:35 +08:00
    看见0ginr才发现是吃粥同学 = =
    ChiChou
        5
    ChiChou   2014-04-26 16:54:42 +08:00
    @liaa 脑抽了,忘了改成utf8
    ChiChou
        6
    ChiChou   2014-04-26 16:55:02 +08:00
    @200 = =
    ChiChou
        7
    ChiChou   2014-04-26 17:01:08 +08:00
    @liaa 把streetView.js里233和234行的第一个+改成-就可以反过来了~~可能是个人习惯不同~ = =
    loading
        8
    loading   2014-04-26 17:40:39 +08:00
    有用,感谢
    jingwentian
        9
    jingwentian   2014-04-26 17:50:03 +08:00
    感谢分享
    lanstonpeng
        10
    lanstonpeng   2014-04-26 17:51:10 +08:00
    - animate这个run loop开销太大了,为什么不在mousemove的时候处理
    - 后续可以尝试实现正方体模型,球形even better
    ChiChou
        11
    ChiChou   2014-04-26 18:38:27 +08:00 via Android
    @lanstonpeng 那不是loop,是WEGBL渲染帧时生成插值的一个辅助回调函数,本来就是这样设计的。js是单线程的,不可能用run loop好嘛~~
    lanstonpeng
        12
    lanstonpeng   2014-04-26 20:40:07 +08:00
    @ChiChou 为什么不是呢,rAF这个anmiate函数了,你在animate里面console一点东西出来看看吧
    ChiChou
        13
    ChiChou   2014-04-26 21:04:22 +08:00 via Android
    @lanstonpeng 的确在不停地调用这个函数,但是本质不是循环,而是消息队列。跟timer和loop的区别是,在系统资源不够的情况下,浏览器是会丢弃一些帧(降低函数的调用频率)。全世界的WebGL程序都在用这个模式,本来就是这样设计的啊。如果光处理mousemove就无法实现插值动画,只能在拖动的时候硬邦邦地跟着鼠标移动。
    lwjef
        14
    lwjef   2014-04-26 21:25:56 +08:00
    点开来居然是江苏大学!惊!
    lanstonpeng
        15
    lanstonpeng   2014-04-26 22:15:00 +08:00
    @ChiChou 可能我表述得不清,应该说在街景停止转动的时候,animate函数中某些开销大的部分就不需要运行了(如render),等在需要render的时候(如键盘,鼠标拖动等)将一个flag打开,可以重新进入render 那个code block那里;
    关于run loop 方面我确实是说错了,大家的context可能不一致,happy coding~
    lincanbin
        16
    lincanbin   2014-04-26 22:44:15 +08:00
    资源消耗真有够大的……
    我的旧电脑根本跑不动
    ChiChou
        17
    ChiChou   2014-04-27 00:06:32 +08:00
    @lanstonpeng 优化是有做的余地,但是恐怕前后差别不大~具体怎么样还得跑一下基准测试。打算再加一些功能之后再考虑优化的事情。我之前做另一个WebGL的工具,最大的瓶颈不是运算速度,而是凶残的内存占用。因为这个函数调用频率很快,每次只申请一丁点内存都会导致内存居高不下,GC非常频繁。
    ChiChou
        18
    ChiChou   2014-04-27 00:07:02 +08:00
    @lincanbin 我看了下内存占用还行吧……我以前做过另一个更凶残的,内存占用飙到500M
    no13bus
        19
    no13bus   2014-04-27 07:59:49 +08:00
    不错。
    no13bus
        20
    no13bus   2014-04-27 08:00:19 +08:00
    做的好的话可以用到楼盘展示
    ChiChou
        21
    ChiChou   2014-04-28 00:16:45 +08:00
    @lwjef 嗯,我就是江大的 :D
    lwjef
        22
    lwjef   2014-04-28 00:25:16 +08:00
    @ChiChou 难得,我也是江大。
    MingZhe
        23
    MingZhe   2014-04-29 12:59:38 +08:00
    chrome 半天刷不出来
    fengdragon
        24
    fengdragon   2014-04-29 13:37:09 +08:00
    我也是 根本刷不开。。
    Rico
        25
    Rico   2014-04-29 17:11:42 +08:00
    Windows 32 chrome32.0 打不开
    ChiChou
        26
    ChiChou   2014-04-29 18:34:50 +08:00
    @MingZhe @fengdragon @Rico 其实图片已经下载完毕了,我调试的时候无论怎样在canvas上输出东西,都是一片黑。而且Opera和Firefox没事,看来应该是Chrome的问题。
    quake0day
        27
    quake0day   2014-05-03 08:51:48 +08:00
    @ChiChou 我这边貌似Chrome和Firefox的OSX和Windows版本都没法正常显示图片
    查看了下你的commit历史,貌似是这次更新引入的bug

    https://github.com/ChiChou/UJSCampusView/commit/385c6e095407fa8a66f8f8c1cf05aa0444f15378
    ChiChou
        28
    ChiChou   2014-05-03 22:03:29 +08:00
    @quake0day 我曾经在我机器上去掉这段东西,同样是黑屏
    Biwood
        29
    Biwood   2014-05-17 22:16:50 +08:00
    上下方向的部分为什么是拉伸的?
    ChiChou
        30
    ChiChou   2014-05-17 23:58:17 +08:00
    @Biwood 因为图片不是完整视角的……以后的版本打算根据长宽比计算最大角度,限制一下拖动
    = =。。。
    ChiChou
        31
    ChiChou   2015-01-19 13:00:35 +08:00
    @lanstonpeng 虽然挖坟是不道德的,但是我想说现在已经修复这个问题了……
    现在还加上了移动设备和重力感应支持!

    项目地址搬迁到: http://github.com/chichou/streetview
    ihuguowei
        32
    ihuguowei   2015-01-28 10:56:34 +08:00
    手里有个关于全景的任务,正好试试LZ的,谢谢。
    ChiChou
        33
    ChiChou   2015-02-01 13:35:09 +08:00
    @ihuguowei
    - -! 我就是前几天跟你的球面纹理转 skybox 算法提 issue 的那个人 从性能上考虑还是 skybox 靠谱
    ihuguowei
        34
    ihuguowei   2015-02-01 15:32:39 +08:00
    @ChiChou 额,不是我吧。
    ChiChou
        35
    ChiChou   2015-02-01 23:20:17 +08:00   ♥ 1
    @ihuguowei 额,记错了...在 timeline 看到过你的 id 所以跟另一个人搞混了。不过我记得你是隔壁学校的,2013 年在我的博客留过言 ˊ_>ˋ
    ihuguowei
        36
    ihuguowei   2015-02-04 12:51:27 +08:00
    @ChiChou 是,是江坑大的。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   800 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 27ms · UTC 22:28 · PVG 06:28 · LAX 14:28 · JFK 17:28
    ♥ Do have faith in what you're doing.