H5使用photo-sphere-viewer.js实现360°全景

官方网站：https://photo-sphere-viewer.js.org/

需要引入的文件

<link rel="stylesheet" href="./css/photo-sphere-viewer.min.css">
<!-- 3D -->
<script src="./js/three.min.js"></script>
<!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
<script src="./js/polyfill.js"></script>
<!-- 事件发射器库，它为javascript对象提供观察者模式 -->
<script src="./js/uevent.min.js"></script>
<!-- 模板引擎 -->
<script src="./js/doT.min.js"></script>
<!-- 阻止睡眠 -->
<script src="./js/NoSleep.js"></script>
<!-- 处理手机陀螺仪方向 -->
<script src="./js/DeviceOrientationControls.js"></script>
<!-- 双屏渲染 -->
<script src="./js/StereoEffect.js"></script>
<!-- 全景图插件 -->
<script src="./js/photo-sphere-viewer.js"></script>

创建一个div

<!-- 全景图 -->
<div id="photo-sphere">
    <div id="viewer"></div>
</div>

调用PhotoSphereViewer方法

<script>
  var viewer = new PhotoSphereViewer({
    container: \'viewer\',
    panorama: \'path/to/panorama.jpg\',
    size:{
            width:\'100%\',
            height:\'100%\'
        }
  });
</script>

写下面这些代码就可以加载全景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #photo-sphere {
            width: 80%;
            height: 500px;
            margin: 100px auto;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
        }
    </style>
 
    <link rel="stylesheet" href="css/photo-sphere-viewer.css">
 
    <script src="libs/three.js"></script>
    <script src="libs/D.js"></script>
    <script src="libs/uevent.js"></script>
    <script src="libs/doT.js"></script>
    <script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 -->
    <script src="libs/photo-sphere-viewer.js"></script>
</head>
<body>
<!-- 全景图 -->
<div id="photo-sphere">
    <div id="viewer"></div>
</div>
<script>
 
    var viewer = new PhotoSphereViewer({
        container: \'viewer\',
        panorama: \'img/3.jpg\',
        size:{
            width:\'100%\',
            height:\'100%\'
        }
    });
 
</script>
</body>
</html>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PhotoSphereViewer - equirectangular demo</title>
 
  <link rel="stylesheet" href="./css/photo-sphere-viewer.min.css">
 
  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
 
    #photosphere {
      width: 100%;
      height: 100%;
    }
 
    .psv-button.custom-button {
      font-size: 22px;
      line-height: 20px;
    }
 
    .demo-label {
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      text-align: center;
      padding: 5px;
      border: 1px solid white;
      background: rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>
 
<div id="photosphere"></div>
 
<!-- 3D -->
<script src="./js/three.min.js"></script>
<!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
<script src="./js/polyfill.js"></script>
<!-- 事件发射器库，它为javascript对象提供观察者模式 -->
<script src="./js/uevent.min.js"></script>
<!-- 模板引擎 -->
<script src="./js/doT.min.js"></script>
<!-- 阻止睡眠 -->
<script src="./js/NoSleep.js"></script>
<!-- 处理手机陀螺仪方向 -->
<script src="./js/DeviceOrientationControls.js"></script>
<!-- 双屏渲染 -->
<script src="./js/StereoEffect.js"></script>
<!-- 全景图插件 -->
<script src="./js/photo-sphere-viewer.js"></script>
 
<!-- 用于标记说明的文字 -->
<script type="text/template" id="pin-content">
  <h1>来自HTML的礼物</h1>
 
  <p><strong>说明文字1</strong> senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien
    ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a
      href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
 
  <h2>Header Level 2</h2>
 
  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>
 
  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
    congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus
    est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
 
  <h3>Header Level 3</h3>
 
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
 
  <img src="assets/pin2.png" style="width:100%"/>
 
  <pre><code>
#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
</code></pre>
</script>
 
<!-- 用于多边形标记的图案  -->
<svg id="patterns">
  <defs>
    <pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/>
    </pattern>
    <pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/>
    </pattern>
  </defs>
</svg>
 
<script>
  var panos = [
    {
      url: \'Bryce-Canyon-National-Park-Mark-Doliner.jpg\',
      desc: \'Bryce Canyon National Park <b>&copy; Mark Doliner</b>\',
      target: {
        longitude: 3.848,
        latitude: -0.244,
        zoom: 50
      }
    }, {
      url: \'Bryce-Canyon-By-Jess-Beauchemin.jpg\',
      desc: \'Bryce Canyon National Park <b>&copy; Jess Beauchemin</b>\',
      target: {
        longitude: 3.715,
        latitude: 0.574,
        zoom: 50
      }
    }
  ];
 
  var PSV = new PhotoSphereViewer({
    container: \'photosphere\', //必选，放置全景图的容器
    panorama: panos[0].url, //必选，全景图的路径
    caption: panos[0].desc, //描述
    loading_img: \'assets/photosphere-logo.gif\', //加载文件时的图片路径
    longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], //经度范围
    latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], //维度范围
    anim_speed: \'-2rpm\', //旋转速度
    default_fov: 50, //初始视野，最小视野和最大视野之间
    fisheye: true, //使用true启用鱼眼效果或指定效果强度（true=1.0）此模式可能会对标记渲染产生副作用。
    move_speed: 1.1, //移动速度
    time_anim: false, //全景图自动开始旋转之前的空闲时间（毫秒）。禁用为False。
//    touchmove_two_fingers: true, //需要两个手指来旋转全景。这允许在包含查看器的页面中进行标准的触摸滚动导航。如果启用，当仅检测到一次触摸时，将显示要求用户使用两个手指的覆盖。
//    mousemove_hover: true, //旋转全景只需移动光标，以查看是否需要点击+移动。
    navbar: [ //导航栏是一个数组，它可以包含以下核心按钮：自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏，以及用于创建自定义按钮的标题和对象
      \'autorotate\', \'zoom\', \'download\', \'markers\',
      {
        title: \'Change image\', //按钮的名字
        className: \'custom-button\', //添加到button元素的CSS类
        content: \'