这是一个创建于 4195 天前的主题，其中的信息可能已经有所发展或是发生改变。
今天搞到了几张我们学校的全景图，闲得蛋疼改了个仿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()
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/
新版彻底重写了一遍，部署了更多的图片场景，在地图上标注相关地点的经纬度，并使用 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
https://github.com/ChiChou/vue-pano
用 ES6 和 vue 重写了一个体验更好的全景展示组件，功能开发中，最大的亮点是不需要依赖 three.js
36 条回复 2015-02-04 12:51:27 +08:00
 | 1 l0wkey 2014-04-26 16:30:35 +08:00 反人类的鼠标拖动方向... |
 | 2 liaa 2014-04-26 16:49:03 +08:00 网站乱码了... 反人类的鼠标拖动方向... |
 | 4 200 2014-04-26 16:51:35 +08:00 看见0ginr才发现是吃粥同学 = = |
 | 7 ChiChou OP @liaa 把streetView.js里233和234行的第一个+改成-就可以反过来了~~可能是个人习惯不同~ = = |
 | 8 loading 2014-04-26 17:40:39 +08:00 有用，感谢 |
 | 9 jingwentian 2014-04-26 17:50:03 +08:00 感谢分享 |
 | 10 lanstonpeng 2014-04-26 17:51:10 +08:00 - animate这个run loop开销太大了，为什么不在mousemove的时候处理 - 后续可以尝试实现正方体模型，球形even better |
| 11 ChiChou OP @lanstonpeng 那不是loop，是WEGBL渲染帧时生成插值的一个辅助回调函数，本来就是这样设计的。js是单线程的，不可能用run loop好嘛～～ |
| 12 lanstonpeng 2014-04-26 20:40:07 +08:00 @ChiChou 为什么不是呢，rAF这个anmiate函数了，你在animate里面console一点东西出来看看吧 |
| 13 ChiChou OP @lanstonpeng 的确在不停地调用这个函数，但是本质不是循环，而是消息队列。跟timer和loop的区别是，在系统资源不够的情况下，浏览器是会丢弃一些帧（降低函数的调用频率）。全世界的WebGL程序都在用这个模式，本来就是这样设计的啊。如果光处理mousemove就无法实现插值动画，只能在拖动的时候硬邦邦地跟着鼠标移动。 |
 | 14 lwjef 2014-04-26 21:25:56 +08:00 点开来居然是江苏大学！惊！ |
| 15 lanstonpeng 2014-04-26 22:15:00 +08:00 @ChiChou 可能我表述得不清，应该说在街景停止转动的时候，animate函数中某些开销大的部分就不需要运行了(如render),等在需要render的时候(如键盘，鼠标拖动等)将一个flag打开，可以重新进入render 那个code block那里; 关于run loop 方面我确实是说错了,大家的context可能不一致,happy coding~ |
 | 16 lincanbin 2014-04-26 22:44:15 +08:00 资源消耗真有够大的…… 我的旧电脑根本跑不动 |
| 17 ChiChou OP @lanstonpeng 优化是有做的余地，但是恐怕前后差别不大~具体怎么样还得跑一下基准测试。打算再加一些功能之后再考虑优化的事情。我之前做另一个WebGL的工具，最大的瓶颈不是运算速度，而是凶残的内存占用。因为这个函数调用频率很快，每次只申请一丁点内存都会导致内存居高不下，GC非常频繁。 |
 | 19 no13bus 2014-04-27 07:59:49 +08:00 不错。 |
| 20 no13bus 2014-04-27 08:00:19 +08:00 做的好的话可以用到楼盘展示 |
 | 23 MingZhe 2014-04-29 12:59:38 +08:00 chrome 半天刷不出来 |
 | 24 fengdragon 2014-04-29 13:37:09 +08:00 我也是 根本刷不开。。 |
 | 25 Rico 2014-04-29 17:11:42 +08:00 Windows 32 chrome32.0 打不开 |
| 26 ChiChou OP @MingZhe @fengdragon @Rico 其实图片已经下载完毕了，我调试的时候无论怎样在canvas上输出东西，都是一片黑。而且Opera和Firefox没事，看来应该是Chrome的问题。 |
 | 27 quake0day 2014-05-03 08:51:48 +08:00 @ChiChou 我这边貌似Chrome和Firefox的OSX和Windows版本都没法正常显示图片 查看了下你的commit历史，貌似是这次更新引入的bug https://github.com/ChiChou/UJSCampusView/commit/385c6e095407fa8a66f8f8c1cf05aa0444f15378 |
 | 29 Biwood 2014-05-17 22:16:50 +08:00 上下方向的部分为什么是拉伸的？ |
| 31 ChiChou OP @lanstonpeng 虽然挖坟是不道德的，但是我想说现在已经修复这个问题了…… 现在还加上了移动设备和重力感应支持！ 项目地址搬迁到： http://github.com/chichou/streetview |
 | 32 ihuguowei 2015-01-28 10:56:34 +08:00 手里有个关于全景的任务，正好试试LZ的，谢谢。 |
| 33 ChiChou OP @ihuguowei - -! 我就是前几天跟你的球面纹理转 skybox 算法提 issue 的那个人 从性能上考虑还是 skybox 靠谱 |
1
Select Language