全景组件Pannellum解析与实践【转】

转自www.jianshu.com/p/fdbcb551d…

简介

Pannellum是一款基于WebGL和JavaScript的轻量级开源全景组件，能用作在网页端和移动端展示全景图片或者是全景视频。GitHub地址，官网地址。官方图演示如下：

Pannellum特性：

轻量、体积小（15kb）

不同投影类型全景图片

全景标注（Hotspot）

全景漫游（Tour）

全景视频（video）

多清晰度图片（full-resolution）

图片方向定位（指南针）

添加图片场景、作者信息。

Pannellum对于各个浏览器的兼容性如下：

完全兼容：Firefox 10+ ，Chrome 15+，Safari 8+，Internet Explorer 11+，Edge。

不完全兼容（无法使用全屏功能）：Firefox 4+，Chrome 9+。

不兼容：Internet Explorer 10 及其早期版本。

使用

准备图片

要使用Pannellum来展示全景图片，首先需要有用来展示的全景图片，现在有很多网站提供免费的全景图片下载，读者可自行百度下载合成好的全景图片或者也可以使用Hugin等软件合成自己的全景图片。并且Pannellum不仅可以展示单张合成好的图片，也可以将不同方向的若干张非全景图片直接展示为全景图片，笔者这里准备了两种图片：

合成好的全景图片：

单张全景图

由合成好的全景图拆分出的不同方向的鱼眼图片：

拆分全景图

这里使用已合成好的图片来拆分成不同方向的图片，获取拆分全景图的方法有两种：

1、读者可以直接使用广角鱼眼镜头分别拍摄六个方向（前后左右上下）的图片来作为源图片。拍摄广角图片的目的是为了拍摄后将各个图片进行“缝合”的时候能够找到更多的缝合点，如下图

全景图缝合

2、可以直接使用Pannellum提供的generate.py工具，该工具需要安装Python和Hugin，因为generate.py工具使用的nona程序是Hugin的一部分，并且还需要将hugin的bin路径添加进系统环境变量中，然后运行

python generate.py pano_image.jpg

就可以生成一个multires目录，里面存放着拆分后的图片。pano_image.jpg是需要拆分的全景图

3、因为方法2里面的工具也是依赖Hugin的nona程序，所以也可以直接在命令行里操作nona程序将全景图进行拆分而不需要Python。这样还能设置拆分后的图片大小、宽高、像素等额外的参数，nona的特性可以看官方介绍，使用API可以参考这里。

下载组件

在