Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
ChiChou

基于 WebGL 的 360°街景

  •   
  •   ChiChou · Apr 26, 2014 · 10436 views
    This topic created in 4432 days ago, the information mentioned may be changed or developed.
    今天搞到了几张我们学校的全景图，闲得蛋疼改了个仿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()
    Supplement 1  ·  Apr 28, 2014
    截图更换到这里：

    https://raw.githubusercontent.com/ChiChou/UJSCampusView/master/UJSCampusView.jpg
    Supplement 2  ·  Apr 29, 2014
    发现一个很奇葩的现象，在我的另一台笔记本（Windows 8）上Chrome居然无法加载纹理，这台笔记本上Firefox和Opera全正常。有同样遇到图片半天出不来的同学么？
    Supplement 3  ·  Jan 19, 2015
    纹理不显示的 bug 已修复，经测试 iOS 上也可以使用~

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

    项目地址搬迁到：https://github.com/ChiChou/StreetView/
    Supplement 4  ·  Jul 25, 2016
    旧站点已经弃用，此贴 URL 作废

    要是可以自己删掉就好了~
    Supplement 5  ·  Aug 20, 2016
    鉴于有人邮件提问，那我还是新开一个坑：
    https://github.com/ChiChou/vue-pano

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

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

    项目地址搬迁到： http://github.com/chichou/streetview
    ihuguowei
        32
    ihuguowei  
       Jan 28, 2015
    手里有个关于全景的任务，正好试试LZ的，谢谢。
    ChiChou
        33
    ChiChou  
    OP
       Feb 1, 2015
    @ihuguowei
    - -! 我就是前几天跟你的球面纹理转 skybox 算法提 issue 的那个人 从性能上考虑还是 skybox 靠谱
    ihuguowei
        34
    ihuguowei  
       Feb 1, 2015
    @ChiChou 额，不是我吧。
    ChiChou
        35
    ChiChou  
    OP
       Feb 1, 2015   ❤️ 1
    @ihuguowei 额，记错了...在 timeline 看到过你的 id 所以跟另一个人搞混了。不过我记得你是隔壁学校的，2013 年在我的博客留过言 ˊ_>ˋ
    ihuguowei
        36
    ihuguowei  
       Feb 4, 2015
    @ChiChou 是，是江坑大的。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2955 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 72ms · UTC 14:41 · PVG 22:41 · LAX 07:41 · JFK 10:41
    ♥ Do have faith in what you're doing.