Pannellum
在项目中,导师让模拟百度地图的全景功能,为我们的项目加上全景功能。而我们的项目是基于web开发的,因此需要基于web的全景预览功能。而Pannellum,恰好可以满足这一需求。
Pannellum 由 “ panorama”和“ vellum ” 组合而来。
1. What is Pannellum?
官网给出的答案是:
简而言之,Pannellum是基于HTML5,CSS3,JavaScript和WebGL,一款用于web项目的,轻量级的免费全景查看器。
2. Features
- 轻量级、体积小(15k)
- 支持不同类型的全景图(等角,部分,立方和多分辨率)
- 基于WebGL和CSS 3D的渲染器
- 全景标注(Hotspot)
- 全景漫游(Tour)
- 全景视频(Video)
- 图片方向定位(罗盘)
- 添加图片场景、作者信息
- 无插件
- 无框架
- API
- 压缩后仅21kB
Pannellum对于各个浏览器的兼容性如下:
完全兼容:Firefox 10+ ,Chrome 15+,Safari 8+,Internet Explorer 11+,Edge。
不完全兼容(无法使用全屏功能):Firefox 4+,Chrome 9+。
不兼容:Internet Explorer 10 及其早期版本。
3. Pannellum下载
点击上面的下载= =
4. Web全景图
全景图是一种广角图。通过全景播放器可以让观看者身临其境地进入到全景图所记录的场景中去。
通常标准的全景图是一张2:1的图像,其背后的实质就是等距圆柱投影。等距圆柱投影是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式,投影完之后再将它展开就是一张2:1的长方形的图像。比较常见的就是应用在地图上的投影。
而在对全景图进行展示之前就需要得到一张这样的图像,这种图像可以自己用普通相机拍摄再自己合成,也可以直接使用专门的全景相机进行拍摄。或者说,可以用手机QQ自带的特效拍摄鱼眼照片,然后iji再进行后期合成。
5. 例子
准好好全景照片以后,可以开始Pannellum学习了
首先,让我们把案例过一遍: