码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2020-01-04 01:28:40      阅读：131      评论：0      收藏：0      [点我收藏+]

标签：efault   礼物   head   下载   back   控制   ros   cap   time   

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

线上demo：点击查看

需要引入的文件

<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: ‘??‘, //显示的文本
        onClick: (function() { //点击时触发的事件
          var i = 0;
          var loading = false;
 
          return function() {
            if (loading) {
              return;
            }
 
            i = 1 - i;
            loading = true;
            PSV.clearMarkers(); //清除所有标记
 
            PSV.setPanorama(panos[i].url, panos[i].target, true) //加载新的全景文件
              .then(function() {
                PSV.setCaption(panos[i].desc);
                loading = false;
              });
          }
        }())
      },
      {
        title  : ‘Random position‘,
        className: ‘custom-button‘,
        content: ‘??‘,
        onClick: function() {//点击时触发的事件
          PSV.animate({ //动画
            longitude: (Math.random() - 0.5) * 3 / 2 * Math.PI,
            latitude: (Math.random() - 0.5) * 3 / 4 * Math.PI,
            zoom: Math.random() * 60 + 20
          }, 1500);
        }
      },
      ‘caption‘, ‘gyroscope‘, ‘stereo‘, ‘fullscreen‘
    ],
    //标记，https://photo-sphere-viewer.js.org/markers.html
    markers: (function() {
      var a = [];
 
      for (var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
        for (var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
          a.push({
            id: ‘#‘ + a.length, //唯一标识
            tooltip: ‘#‘ + a.length,//定义工具提示的标记或对象的工具提示内容。
            latitude: j, //维度
            longitude: i, //经度
            image: ‘assets/pin1.png‘, //图片路径
            width: 32, //宽
            height: 32, //高
            anchor: ‘bottom center‘, //定义标记朝其位置放置的位置。任何CSS位置对于多边形/折线都是有效的，例如bottom center或被20% 80%
            data: { //您要附加到标记的任何自定义数据
              deletable: true
            }
          });
        }
      }
 
      a.push({
        id: ‘lorem‘,
        tooltip: {
          content: ‘Lorem ipsum dolor ist amet et consecturo.‘,
          position: ‘bottom right‘
        },
        content: document.getElementById(‘pin-content‘).innerHTML,
        latitude: 0,
        longitude: 0.20,
        image: ‘assets/pin2.png‘,
        width: 32,
        height: 32,
        anchor: ‘bottom center‘
      });
 
      a.push({
        id: ‘polygon-sky‘,
        svgStyle: {
          fill: ‘rgba(0, 190, 255, 0.1)‘
        },
        polygon_rad: (function() {
          var points = [];
 
          for (var i = 0; i < Math.PI * 2; i += Math.PI / 8) {
            points.push(i);
            points.push(Math.PI / 8);
          }
 
          return points;
        }())
      });
 
      a.push({
        id: ‘polygon‘,
        content: ‘This mountain is so great it has dots on it!‘,
        polygon_px: [3184, 794, 3268, 841, 3367, 1194, 3327, 1307, 3065, 1221, 3097, 847],
        svgStyle: {
          fill: ‘url(#points)‘, //‘rgba(255,0,0,0.3)‘,
          stroke: ‘rgba(255, 0, 50, 0.8)‘,
          strokeWidth: ‘2px‘
        },
        tooltip: {
          content: ‘This is a mountain‘,
          position: ‘right bottom‘
        }
      });
 
      a.push({
        id: ‘polyline‘,
        polyline_rad: [5.924, 0.064, 5.859, -0.061, 5.710, -0.132, 5.410, -0.287, 4.329, -0.490, 3.838, -0.370, 3.725, -0.241],
        svgStyle: {
          stroke: ‘rgba(80, 100, 50, 0.8)‘,
          strokeLinecap: ‘round‘,
          strokeLinejoin: ‘round‘,
          strokeWidth: ‘10px‘
        },
        tooltip: ‘This is a track‘
      });
 
      a.push({
        id: ‘html-img-demo‘,
        html: ‘HTML & Image‘,
        scale: [0.5, 1.5],
        className: ‘demo-label‘,
        longitude: 0.5,
        latitude: -0.48
      });
 
      a.push({
        id: ‘gif‘,
        image: ‘assets/photosphere-logo.gif‘,
        width: 100,
        height: 100,
        longitude: 0.60,
        latitude: -0.35
      });
 
      a.push({
        id: ‘text‘,
        html: ‘This <b>is</b> text <img src="assets/pin3.png" style="height: 24px; vertical-align: top;"/>‘,
        anchor: ‘bottom right‘,
        style: {
          color: ‘white‘,
          fontSize: ‘20px‘,
          fontFamily: ‘Helvetica, sans-serif‘,
          textAlign: ‘center‘
        },
        longitude: 0.45,
        latitude: -0.4
      });
 
      a.push({
        id: ‘svg-demo‘,
        html: ‘SVG marker demo‘,
        scale: [0.5, 1.5],
        className: ‘demo-label‘,
        longitude: -0.5,
        latitude: -0.48
      });
 
      a.push({
        id: ‘circle‘,
        tooltip: ‘A circle of radius 30‘,
        circle: 30,
        svgStyle: {
          fill: ‘rgba(255,255,0,0.3)‘,
          stroke: ‘yellow‘,
          strokeWidth: ‘2px‘
        },
        longitude: -0.5,
        latitude: -0.28,
        anchor: ‘center right‘
      });
 
      a.push({
        id: ‘ellipse‘,
        tooltip: ‘An ellipse of radius 60/30‘,
        ellipse: [60, 30],
        svgStyle: {
          fill: ‘rgba(255,255,0,0.3)‘,
          stroke: ‘yellow‘,
          strokeWidth: ‘2px‘
        },
        longitude: -0.5,
        latitude: -0.28,
        anchor: ‘center left‘
      });
 
      a.push({
        id: ‘rect‘,
        tooltip: ‘A square a side 60‘,
        rect: [60, 60],
        svgStyle: {
          fill: ‘rgba(255,255,0,0.3)‘,
          stroke: ‘yellow‘,
          strokeWidth: ‘2px‘
        },
        longitude: -0.5,
        latitude: -0.38,
        anchor: ‘center right‘
      });
 
      a.push({
        id: ‘path‘,
        tooltip: ‘A custom path‘,
        path: ‘M 0 0 L 60 60 L 60 0 L 0 60 L 0 0‘,
        svgStyle: {
          fill: ‘rgba(255,255,0,0.3)‘,
          stroke: ‘yellow‘,
          strokeWidth: ‘2px‘
        },
        longitude: -0.5,
        latitude: -0.38,
        anchor: ‘center left‘
      });
 
      a.push({
        id: ‘scale-demo‘,
        html: ‘Marker scale demo‘,
        scale: [0.5, 1.5],
        className: ‘demo-label‘,
        longitude: 0,
        latitude: -0.48
      });
 
      a.push({
        id: ‘scale-0‘,
        tooltip: ‘No scale‘,
        scale: false,
        circle: 20,
        svgStyle: {
          fill: ‘rgba(0, 0, 0, 0.5)‘
        },
        longitude: -0.1,
        latitude: -0.4
      });
 
      a.push({
        id: ‘scale-1‘,
        tooltip: ‘<code>zoom x2</code>‘,
        scale: 2,
        circle: 20,
        svgStyle: {
          fill: ‘rgba(0, 0, 0, 0.5)‘
        },
        longitude: 0,
        latitude: -0.4
      });
 
      a.push({
        id: ‘scale-2‘,
        tooltip: ‘<code>zoom x0.5 ; zoom x1.5</code>‘,
        scale: [0.5, 1.5],
        circle: 20,
        svgStyle: {
          fill: ‘rgba(0, 0, 0, 0.5)‘
        },
        longitude: 0.1,
        latitude: -0.4
      });
 
      return a;
    }())
  });
  //全局事件
  PSV.on(‘click‘, function(e) { //点击，则添加一个标记
    PSV.addMarker({
      id: ‘#‘ + Math.random(), //标记的唯一标识
      tooltip: ‘Generated marker‘,
      longitude: e.longitude,
      latitude: e.latitude,
      image: ‘assets/pin1.png‘,
      width: 32,
      height: 32,
      anchor: ‘bottom center‘,
      data: {
        deletable: true
      }
    });
  });
 
  PSV.on(‘select-marker‘, function(marker, dblclick) { //选择某个标记
    if (marker.data && marker.data.deletable) {
      if (dblclick) {
        PSV.removeMarker(marker);
      }
      else {
        PSV.updateMarker({
          id: marker.id,
          image: ‘assets/pin2.png‘
        });
      }
    }
  });
 
  PSV.on(‘over-marker‘, function(marker) { //划过
    console.log(‘over‘, marker.id);
  });
 
  PSV.on(‘leave-marker‘, function(marker) { //离开
    console.log(‘leave‘, marker.id);
  });
 
  PSV.on(‘select-marker-list‘, function(marker) {
    console.log(‘select-list‘, marker.id);
  });
 
  PSV.on(‘goto-marker-done‘, function(marker) {
    console.log(‘goto-done‘, marker.id);
  });
</script>
 
<script>
  document.write(‘<script src="//‘ + location.host.split(‘:‘)[0] + ‘:35729/livereload.js" async defer><‘ + ‘/script>‘);
</script>
</body>
</html>

一些常用配置参数介绍

panorama：（必选）全景图的路径。
container：（必选）放置全景图的容器。
autoload：（默认为true）true为自动加载全景图，false为迟点加载全景图（通.过load方法）。
usexmpdata：（默认值为true）photo sphere viewer是否必须读入xmp数据，false为不必须。
cors_anonymous：（默认值为true）true为不能通过cookies获得用户
pano_size：（默认值为null）全景图的大小，是否裁切。
default_position：（默认值为0）定义默认位置，用户看见的第一个点，例如：{long: math.pi, lat: math.pi/2}。
min_fov：（默认值为30）观察的最小区域，单位degrees，在1-179之间。
max_fov：（默认值为90）观察的最大区域，单位degrees，在1-179之间。
allow_user_interactions：（默认值为true）设置为false，则禁止用户和全景图交互（导航条不可用）。
allow_scroll_to_zoom：（默认值为true）若设置为false，则用户不能通过鼠标滚动进行缩放图片。
tilt_up_max：（默认值为math.pi/2）向上倾斜的最大角度，单位radians。
tilt_down_max：（默认值为math.pi/2）向下倾斜的最大角度，单位radians。
min_longitude：（默认值为0）能够展示的最小经度。
max_longitude：（默认值为2PI）能够展示的最大维度。
zoome_level：（默认值为0）默认的缩放级别，值在0-100之间。
long_offset：（默认值为PI/360）mouse/touch移动时每像素经过的经度值。
lat_offset：（默认值为pi/180）mouse/touch移动时每像素经过的纬度值。
time_anim（默认值为2000）全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）
reverse_anim：（默认值为true）当水平方向到达最大/最小的经度时，动画方向是否反转（仅仅是不能看到完整的圆）。
anim_speed：（默认值为2rpm）动画每秒/分钟多少的速度。
vertical_anim_speed：（默认值为2rpm）垂直方向的动画每秒/分钟多少的速度。
vertical_anim_target：（默认值为0）当自动旋转时的维度，默认为赤道。
navbar：（默认为false）显示导航条。
navbar_style：（默认值为false）导航条的样式。有效的属性：
    backgroundColor：导航条背景色（默认值rgba(61, 61, 61, 0.5)）；
    buttonsColor：按钮前景色（默认值 rgba(255, 255, 255, 0.7)）；
    buttonBackgroundColor：按钮激活时的背景色（默认值 rgba(255, 255, 255, 0.1)）；
    buttonsHeight：按钮高度，单位px（默认值 20）；
    autorotateThickness：自动旋转图片的层（默认值 1）；
    zoomRangeWidth：缩放游标的宽度，单位px（默认值 50）；
    zoomRangeThickness：缩放游标的层（默认值 1）；
    zoomRangeDisk：缩放游标的放大率，单位px（默认值 7）；
    fullscreenRatio：全屏图标的比例（默认值 4/3）；
    fullscreenThickneee：全屏图片的层，单位px（默认值 2）
loading_msg：（默认值为Loading...）加载信息。
loading_img：（默认值 为null）loading图片的路径。
loading_html：（默认值 为null）html加载器（添加到容器中的元素或字符串）。
size：（默认值为null）全景图容器的最终尺寸，例如{width: 500, height: 300}。
onready：（默认值为null）全景图准备好并且第一张图片展示出来后的回调函数。
 
方法介绍
addAction()：添加事件（插件没有提供执行事件的方法，似乎是提供给插件内部使用的）。
fitToContainer()：调整全景图容器大小为指定大小。
getPosition()：获取坐标经纬度。
getPositionInDegrees()：获取经纬度度数。
getZoomLevel()：获取缩放级别。
load()：加载全景图（）。
moveTo(longitude, latitude)：根据经纬度移动到某一点。
rotate(dlong, dlat)：根据经纬度度数移动到某一点。
toggleAutorotate()：是否开启全景图自动旋转。
toggleDeviceOrientation()：是否开启重力感应方向控制。
toggleFullscreen()：是否开启全景图全屏。
toggleStereo()：是否开启立体效果（可用于WebVR哦）。
zoom(level)：设置缩放级别。
zoomIn()：放大。
zoomOut()：缩小。

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

标签：efault   礼物   head   下载   back   控制   ros   cap   time   

原文地址：https://www.cnblogs.com/linfblog/p/12147380.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！