记录-小程序720°VR（跳转H5页面实现）_小程序接入 pannellum.js

全景浏览

提前准备

1 拍照支架/照片合成软件（Kolor Autopano Giga 4.0）或者全景相机

2 pannellum （pannellum是一个轻量级、免费和开源的 Web 全景查看器。它使用 HTML5、CSS3、JavaScript 和 WebGL 构建，没有插件。）

3 H5页面 引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax请求）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"
 />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"
 />
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.2.2/js/swiper.min.js"
 />
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.2/jquery.min.js"
/>
1
2
3
4
5
6
7
8

4 实现步骤

（1）获取全景图数据
（2）拿到数据后，渲染出轮播图

	list.forEach((item, index) => {
          let html = `<div class="swiper-slide"><img class="swiper_item" src="`;
          html += item.thumbnail;
          html += `"><div class="swiper-title">`;
          html += item.name;
          html += `</div></div>`;
          $(html).appendTo(".swiper-wrapper");
          console.log(item);
        });
1
2
3
4
5
6
7
8
9

（3）初始化pannellum（这里可以去官网看一下对应的api）

	function init() {
        viewer = pannellum.viewer("panorama", {
          firstScene: nowUrl, //首次加载那个图片
          sceneFadeDuration: 1000, //全景图场景切换时的持续时间
          autoLoad: true, //自动加载
          orientationOnByDefault: setstate.nowGyroscopeFlag, //是否开启重力感应查看全景图，默认false
          showControls: false, //是否显示控制按钮，默认true；
          autoRotate: -2, //是否自动旋转，在加载之后，全景图会水平旋转显示，负数为往右边旋转，整数为往左边旋转，值为数字类型；
          autoRotateInactivityDelay: 5000, //在autoRotate设定的情况下，用户停止操作多长时间后继续自动旋转，单位为毫秒；
          mouseZoom: true,

          hfov: 100,
          minHfov: 60,
          maxHfov: 120,
          scenes: setstate.scenes,
        });
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（4）demo效果图 （720°预览）