探究全景展示库Pannellum

发布时间：2023-05-20

一、Pannellum.js

Pannellum.js 是一个免费的、开源的全景展示库，可用于在网站上嵌入全景图像。该库支持在桌面端和移动端上的主流浏览器。此外，它还允许您在全景图像上添加标签和热点，并提供对全景图像的各种控制选项。 使用 Pannellum.js 非常简单，您只需引入相关的 js 和 css 文件，然后在页面上添加 div 标记即可。下面是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>使用Pannellum展示全景图像</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.5.0/pannellum.css"/>
    <script src="https://cdn.pannellum.org/2.5.0/pannellum.js"></script>
  </head>
  <body>
    <div id="panorama"></div>
    <script>
      pannellum.viewer('panorama', {
        "type": "equirectangular",
        "panorama": "panorama.jpg"
      });
    </script>
  </body>
</html>

上面的示例中，我们将 Pannellum.js 库和相关的 CSS 文件引入，并在 body 中添加一个 id 为 panorama 的 div 标记。接下来，在 JavaScript 中使用 pannellum.viewer 创建一个全景图像。在这个例子中，我们使用 equirectangular 类型的全景图像（也是最常用的类型），并通过 panorama 参数指定了要显示的图像。

二、Pannellum 怎么读

对于中文用户，Pannellum 的读音可能是一个问题。实际上，Pannellum 是拉丁单词 pannellus 的变体，这个词意味着镶板或小板。在计算机术语中，Pannellum 一词用于指代在网站上嵌入全景图像的库。因此，在中文环境下，大多数人选择将其发音为 pan-nel-lum 或 pan-el-lum。

三、Pannellum 介绍

作为一个全景展示库，Pannellum 具有许多功能和优点。下面列出了其中的一些：

  • 跨平台：Pannellum 支持在桌面电脑和移动设备上的主流浏览器中展示全景图像。
  • 多种投影类型：Pannellum 支持多种投影类型，包括 equirectangular、cube、pyramid、fisheye 等。
  • 高度自定义：Pannellum 提供了灵活的选项，可用于自定义全景图像的外观和行为。例如，您可以更改展示外观、镜头角度、镜头模糊度、场景初始角度等等。
  • 标签和热点：Pannellum 允许您在全景图像上添加标签和热点。标签通常用于展示场景的相关信息，而热点可以用于链接到其他场景或其他网页。
  • 小巧高效：尽管具有如此丰富的功能，Pannellum 仍保持了小巧高效的特点。该库的源代码大小仅为 400KB 左右。

四、Pannellum 切换场景选取

对于包含多个全景图像的网站，用户需要在它们之间进行切换。Pannellum 在这个方面也提供了简单易用的功能。 使用 Pannellum 切换场景，您需要将全景图像的信息存储在 JSON 文件中，然后使用相关的 JavaScript 函数进行加载。下面是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>全景场景切换示例</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.5.0/pannellum.css"/>
    <script src="https://cdn.pannellum.org/2.5.0/pannellum.js"></script>
  </head>
  <body>
    <div id="panorama"></div>
    <script>
      var scenes = {
        "scene1": {
          "title": "Panorama 1",
          "hfov": 110,
          "yaw": 200,
          "type": "equirectangular",
          "panorama": "panorama1.jpg"
        },
        "scene2": {
          "title": "Panorama 2",
          "hfov": 110,
          "yaw": 180,
          "type": "equirectangular",
          "panorama": "panorama2.jpg"
        }
      };
      pannellum.viewer('panorama', {
        "default": {
          "firstScene": "scene1",
          "sceneFadeDuration": 1000
        },
        "scenes": scenes
      });
    </script>
  </body>
</html>

上面的示例中，我们定义了两个全景场景，分别称为 scene1 和 scene2，并将它们的信息存储在一个名为 scenes 的 JavaScript 对象中。接下来，我们在 JavaScript 中使用 pannellum.viewer 创建一个全景图像，使用 default 参数定义了默认的场景，使用 scenes 参数指定了场景的信息。在这个例子中，我们使用第一个场景作为默认的场景。 总之，Pannellum 是一个非常强大的全景展示库，可以用于在网站上嵌入全景图像。它支持多种投影类型、多种定制选项、标签和热点功能以及场景切换等功能。使用该库非常简单，只需几行 JavaScript 代码即可轻松实现。

推荐文章