Photo Sphere Viewer 全景圖

Photo Sphere Viewer  一款基於 three.js 的簡易3D插件，方便，實用，友好，看到網上有些API有錯誤，所以自己寫一個修正版的

該js插件可以360度旋轉查看全景圖，也可以上下180度查看圖片。使用該插件的唯一要求是瀏覽器支持canvas或WebGL。

https://github.com/JeremyHeleine/Photo-Sphere-Viewer

DEMO：http://www.html5cn.org/article-8621-1.html

使用該全景圖插件時要引入three.min.js和photo-sphere-viewer.min.js文件。

1. <script src="js/three.min.js"></script>
2. <script src="js/photo-sphere-viewer.min.js"></script>        

復制代碼

 

HTML結構

可以創建一個空的<div> 來放置全景圖，通過CSS來設置它的尺寸。

1. <div id="container"></div>        

復制代碼

初始化插件

要初始化該全景圖插件，可以創建一個新的PhotoSphereViewer對象，然后在這個對象中插入一個參數對象，有兩個參數是必須設置的：

1. var PSV = new PhotoSphereViewer({
2.     // 圖片路徑
3.     panorama: 'images/photo.jpg',
4.     // 容器
5.     container: div
6. });      

復制代碼

配置參數

下面是該全景圖插件的所有可用配置參數： 

• panorama：必填參數，全景圖的路徑。
• container：必填參數，放置全景圖的div元素。
• autoload：可選，默認值為true，true為自動調用全景圖，false為在后面加載全景圖(通過.load()方法)。
• us empdata：可選，默認值為true，如果Photo Sphere Viewer必須讀入XMP數據則為true。
• default_position：可選，默認值為{}，定義默認的位置，及用戶看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。
• min_fov：可選，默認值為30，觀察的最小區域，單位degrees，在1-179之間。
• max_fov：可選，默認值為90，觀察的最大區域，單位degrees，在1-179之間。
• allow_user_interactions：可選，默認值為true，設置為false則禁止用戶和全景圖交互(導航條不可用)。
• tilt_up_max：可選，默認值為Math.PI/2，向上傾斜的最大角度，單位radians。
• tilt_down_max：可選，默認值為Math.PI/2，向下傾斜的最大角度，單位radians。
• zoom_level：可選，默認值為0，默認的縮放級別，值在0-100之間。
• long_offset：可選，默認值為 Math.PI/360，mouse/touch移動時每像素經過的經度值。
• lat_offset：可選，默認值為 Math.PI/180，mouse/touch移動時每像素經過的緯度值。
• time_anim：可選，默認值為2000，全景圖在time_anim毫秒后會自動進行動畫。(設置為false禁用它)
• theta_offset：過時的選項，可選，默認值為1440，自動動畫時水平方向的速度。
• anim_speed：可選，默認值為2rpm，動畫的速度，每秒/分鍾多少radians/degrees/revolutions。
• navbar：可選值，默認為false。顯示導航條。
• navbar_style：可選值，默認為{}。導航條的自定義樣式。下面是可用的樣式列表：
• backgroundColor：導航條的背景顏色，默認值為rgba(61, 61, 61, 0.5)。
• buttonsColor：按鈕的前景顏色，默認值為transparent。
• activeButtonsBackgroundColor：按鈕激活狀態的背景顏色，默認值為rgba(255, 255, 255, 0.1)。
• buttonsHeight：按鈕的高度，單位像素，默認值為20。
• autorotateThickness：autorotate圖標的厚度，單位像素，默認值為1。
• zoomRangeWidth：縮放的范圍，單位顯示，默認值50。
• zoomRangeThickness：縮放的范圍的厚度，單位像素，默認值1。
• zoomRangeDisk：縮放范圍的圓盤直徑，單位像素，默認值為7。
• fullscreenRatio：全屏圖標的比例，默認值為3/4。
• fullscreenThickness：全屏圖標的厚度，單位像素，默認值為2。
• loading_msg：可選，默認值為Loading…，圖片加載時的提示文字。
• loading_img：可選，默認值為null，在加載時顯示的圖片的路徑。
• size：可選，默認值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。
• onready：可選值，默認值為null。當全景圖准備就緒並且第一張圖片顯示時的回調函數。

• 科普

  全景圖共分為三種：

  1 球面全景圖

  利用一張全景圖圍成一個球，自身位置位於球體內。由於圖片是矩形，所以最上和最下的縫合處很明顯就能夠看得出來。
  
  球面全景圖是最接近人眼的構建模式，若利用多個立面構建，拼接方法繁瑣，性能消耗高。
  
  因此，本文介紹的是上述通過一張全景圖構成的球面全景圖。
  

  2 立方體全景圖

  一個立方體，有六個面組成，所以就需要六張圖片啦。自身的位置位於立方體中間。這也是最常見的全景圖構建模式。
  

  3 柱狀全景圖

  這個則是前兩種構建模式的結合版啦。
  

  准備

  在瀏覽器中實現3D全景瀏覽開發，首先需要幾樣東西：

  1 支持WebGL和canvas的瀏覽器

  2 Three.js

   這里就不介紹這個插件了，所以閱讀本文需要Three.js簡單的基礎 O(∩_∩)O~
  
  下載地址：<https://github.com/mrdoob/three.js> 

  3 photo-sphere-viewer.js

  這是基於Three.js開發的柱狀全景圖插件
  
  下載地址：<https://github.com/JeremyHeleine/Photo-Sphere-Viewer> 

  4 全景圖

  

  像上圖那樣的360度全景圖，最好是左右能夠完美拼接的，這樣環顧時才自然。 現在也有能夠生成全景圖的工具，這里就不介紹啦。 全景圖素材站點：<http://www.tupian114.com/tupian/quanjing.html> 

  　開始

  現在開始上代碼啦！！！

  html部分：

  

  需要一個標簽元素做為全景圖的容器,並引入所需的兩個插件。

  js部分：

  初始化插件，創建一個photosphereviewer對象。

  

  其中，前兩個選項panorama和container是必須的，其他都為可選項。

  然后，3D全景效果就這樣實現啦，簡單吧。

  那接下來就介紹一下配置參數及方法吧。

  配置參數介紹

  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()：縮小。