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

基于 WebGL 的 360°街景

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

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

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