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