基于 WebGL 的 360°街景

[ChiChou]

今天搞到了几张我们学校的全景图，闲得蛋疼改了个仿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()

[ChiChou]

@lwjef 嗯，我就是江大的 :D

[lwjef]

@ChiChou 难得，我也是江大。

[MingZhe]

chrome 半天刷不出来

[fengdragon]

我也是 根本刷不开。。

[Rico]

Windows 32 chrome32.0 打不开

[ChiChou]

@MingZhe @fengdragon @Rico 其实图片已经下载完毕了，我调试的时候无论怎样在canvas上输出东西，都是一片黑。而且Opera和Firefox没事，看来应该是Chrome的问题。

[quake0day]

@ChiChou 我这边貌似Chrome和Firefox的OSX和Windows版本都没法正常显示图片
查看了下你的commit历史，貌似是这次更新引入的bug

https://github.com/ChiChou/UJSCampusView/commit/385c6e095407fa8a66f8f8c1cf05aa0444f15378

[ChiChou]

@quake0day 我曾经在我机器上去掉这段东西，同样是黑屏

[Biwood]

上下方向的部分为什么是拉伸的？

[ChiChou]

@Biwood 因为图片不是完整视角的……以后的版本打算根据长宽比计算最大角度，限制一下拖动
= =。。。

[ChiChou]

@lanstonpeng 虽然挖坟是不道德的，但是我想说现在已经修复这个问题了……
现在还加上了移动设备和重力感应支持！

项目地址搬迁到： http://github.com/chichou/streetview

[ihuguowei]

手里有个关于全景的任务，正好试试LZ的，谢谢。

[ChiChou]

@ihuguowei
- -! 我就是前几天跟你的球面纹理转 skybox 算法提 issue 的那个人 从性能上考虑还是 skybox 靠谱

[ihuguowei]

@ChiChou 额，不是我吧。

[ChiChou]

@ihuguowei 额，记错了...在 timeline 看到过你的 id 所以跟另一个人搞混了。不过我记得你是隔壁学校的，2013 年在我的博客留过言 ˊ_>ˋ

[ihuguowei]

@ChiChou 是，是江坑大的。