VR视图插件Pannellum的简单使用总结

桐溪漂流

已于 2022-09-23 10:21:37 修改

阅读量2.5k

点赞数

分类专栏： js 文章标签： vr

于 2022-09-22 19:10:10 首次发布

本文链接：https://blog.csdn.net/qq564280420/article/details/126997788

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

简介

是什么 - Pannellum是一个可以利用全景图片来生成VR场景展示的插件。
特点 - 可以加载一张全景图片，也可以加载多张图片合成一个场景；可以设定hotSpots来进行标记场景中的特定事物，也可以来进行场景之间的切换来展示较大视图的不同部分；
使用场景 - VR看房

下载

pannellum下载地址: https://pannellum.org/download/

基本demo配置

这里是基本前提配置，后面demo省略这里，只展示js部分

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Compass</title>
  <link rel="stylesheet" href="./pannellum/pannellum.css" />
  <style>
    #panorama {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="panorama"></div>
</body>
<script src="./pannellum/pannellum.js"></script>
<script src="./index.js"></script>
</html>

加载全景图

只配置全景图来进行场景展示

// pannellum为暴露的全局方法
// viewer方法来生成场景视图 - pannellum.viewer(containerId, option);
// containerId - 容器ID
// option - 视图生成初始配置项
pannellum.viewer('panorama', {
  panorama: "https://pannellum.org/images/bloomberg.jpg"
});

效果图

自动加载

// autoLoad: 是否自动加载 true-自动加载全景图; false-不自动加载; 默认为false
pannellum.viewer('panorama', {
  autoLoad: true,
  panorama: "https://pannellum.org/images/bloomberg.jpg",
});

效果图

自动旋转

// autoRotate: 加载后的自动旋转速度，number类型，单位为deg/s; 正数-逆时针; 负数-顺时针; 默认为-
// autoRotateInactivityDelay: 用户活动停止后开始自动旋转全景图，毫秒为单位。
pannellum.viewer('panorama', {
  autoLoad: true,
  panorama: "https://pannellum.org/images/bloomberg.jpg",
  autoRotate: 10,
  autoRotateInactivityDelay: 1000,
});

效果图

热点配置

// hotSpots: 热点设置-也可称为标记
// hotSpots-pitch: 垂直位置, 单位deg
// hotSpots-yaw: 水平位置, 单位deg
// hotSpots-type: 类型, 可取值 - info, scene
// hotSpots-text: 悬浮提示内容
// hotSpots-URL: 链接url
// hotSpots-sceneId: 指定要链接到`scene`热点的场景ID
pannellum.viewer('panorama', {
  autoLoad: true,
  panorama: "https://pannellum.org/images/bloomberg.jpg",
  previewTitle: '我在右下角展示呢',
  hotSpots: [
    {
      pitch: 14.1,
      yaw: 1.5,
      type: "info",
      text: "外部链接",
      URL: "https://artbma.org/"
    },
    {
      pitch: -9.4,
      yaw: 222.6,
      type: "scene",
      text: "场景",
      sceneId: "切入场景id"
    },
    {
      pitch: -0.9,
      yaw: 144.4,
      type: "info",
      text: "信息"
    }
  ]
});

效果图

时间旅行

// 时间旅行
// sceneFadeDuration: 场景转换的时候，淡入淡出的时间设置，单位`ms`
// scenes: 多个场景配置，first, second-为场景ID
// scene-title: 标题
// scene-hfov: 水平视野, 单位deg, 默认100
// scene-pitch: 垂直位置, 单位deg, 默认100
// scene-yaw: 水平位置, 单位deg, 默认100
// scene-type: 场景图类型, 默认为equirectangular
pannellum.viewer('panorama', {
  default: {
    firstScene: "first",
    author: "作者在这里",
    sceneFadeDuration: 1000
  },
  scenes: {
    first: {
      title: "场景一",
      hfov: 110,
      pitch: -3,
      yaw: 117,
      type: "equirectangular",
      panorama: "https://pannellum.org/images/from-tree.jpg",
      hotSpots: [
        {
          pitch: -2.1,
          yaw: 132.9,
          type: "scene",
          text: "切入场景二",
          sceneId: "second"
        }
      ]
    },
    second: {
      title: "场景二",
      hfov: 110,
      yaw: 5,
      type: "equirectangular",
      panorama: "https://pannellum.org/images/bma-0.jpg",
      hotSpots: [
        {
          pitch: -0.6,
          yaw: 37.1,
          type: "scene",
          text: "切入场景一",
          sceneId: "first",
          targetYaw: -23,
          targetPitch: 2
        }
      ]
    }
  }
});