碼上歡樂
相關內容    簡體    繁體

H5使用photo-sphere-viewer.js實現360°全景

本文轉載自   查看原文   2020-01-03 23:07   2162    canvas/ js

官方網站：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, true, 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()：縮小。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 photo-sphere-viewer.js實現全景圖 基於Three.js的360度全景--photo-sphere-viewer--簡介 360全景圖three.js與Photo-Sphere-Viewer-master 3D全景瀏覽開發 vue three.js photo-sphere-viewer 720全景 基於Three.js的全景---photo-sphere-viewer 探索photo-sphere-viewer全景插件 Photo Sphere Viewer 全景圖 探索photo-sphere-viewer全景插件 Vue 全景圖 photo-sphere-viewer的使用以及改變圖片 photo-sphere-viewer 圖片跨域問題 The panorama can't be loaded
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM