Pannellum基于WEB的轻量级全景图阅读器

Posted on 2017-03-13 by 毛三胖

摘要

Pannellum是一款轻量级免费开源的WEB全景图阅读器,小编认为是最好的基于WEB全景图展示工具了,随着全景相机的普及,越来越多的全景图片及视频资源的出现,Pannellum会是你一个很好的选择,智慧如你快来动手试试吧!


1.Pannellum简介

全景图通过广角的表现手段,可以尽可能多的表现出周围环境,把二维的平面图模拟成真实的三维空间展示,给用户带来更好的用户体验。随着全景相机的应用普及,会有越来越多的全景资源的出现,而目前的浏览器还不能独立的支持全景图,这就需要一个全景图阅读器工具来辅助。

在本文中,小编为您推荐一款基于WEB的全景图阅读器Pannellum,它是免费开源的,目前的最新版本是2.3.2,下载的zip包大小只有18K。其具备一个优秀的工程的全部优点,开源,轻量,免费,美观,易用,轻晰的文档,简单的例子等。

展示:长城内外

上述例子,以长城的全景图为例,立体的展示了中国长城巍巍青山的雄伟壮阔。全景图片815K,宽高4096x882。

长城的全景图

强烈建议动手试一下和阅读官方文档。

官网:pannellum.org

2.Pannellum特性介绍

Pannellum有很多良好的特性,支持不同的需要。小编简单列举如下几个:

  1. 支持自动载入和手动载入全景图
  2. 支持全景图的自动旋转和手动旋转方式
  3. 支持预览图设定
  4. 支持标注作者和标题
  5. 支持罗盘指示
  6. 支持Cube map(定义多张图片,组成全景图)
  7. 支持初始视角的定义
  8. 支持部分全景展示
  9. 支持自定义的全景移动控制 10.支持自定义热点 11.支持多分辨率 12.支持tour模式(从一全景图切换到另一全景图) 13.支持全景视频

3.Pannellum兼容性

Pannellum兼容性良好,基本能支持主流的浏览器,基本能够完全支持的浏览器如下:

  • Firefox 10+
  • Chrome 15+
  • Safari 8+
  • Internet Explorer 11+
  • Edge

4.Pannellum演示程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="编程,学习,分享,记录生活的点点滴滴,热情42度。">
    <meta name="author" content="毛三胖">
    <title>【42度】Pannellum轻量级的基于WEB的全景图查看器</title>
    <link href="/media/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="pannellum.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="/media/js/html5shiv.js"></script>
    <script src="/media/js/respond.min.js"></script>
    <![endif]-->
    <style>
        #panorama {
            max-width:100%;
            min-height:200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="panorama"></div>
</div>
<script src="pannellum.js"></script>
<script>
    pannellum.viewer('panorama', {
        "type": "equirectangular",
        "panorama": "gw2.jpg",
        "autoLoad": true
    });
</script>
</body>
</html>

5.结语

Pannellum是一个十分优秀的开源工程,值得动手试一下。Pannellum不支持VR分屏,另外 WebGL 渲染效果一般。