瀏覽器中實現3D全景瀏覽

若是你用過網頁版的百度地圖，你大概3D全景圖瀏覽是一種怎樣的酷炫體驗：在一個點能夠360度環顧周圍的建築、景色，固然也能夠四周移動，就像身臨其境。

 

科普

全景圖共分爲三種：

①球面全景圖

   利用一張全景圖圍成一個球，自身位置位於球體內。因爲圖片是矩形，因此最上和最下的縫合處很明顯就可以看得出來。

   球面全景圖是最接近人眼的構建模式，若利用多個立面構建，拼接方法繁瑣，性能消耗高。

   所以，本文介紹的是上述經過一張全景圖構成的球面全景圖。

②立方體全景圖

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

③柱狀全景圖

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

   

準備

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

①支持WebGL和canvas的瀏覽器

②Three.js

   這裏就不介紹這個插件了，因此閱讀本文須要Three.js簡單的基礎 O(∩_∩)O~

   下載地址：https://github.com/mrdoob/three.js

③photo-sphere-viewer.js

   這是基於Three.js開發的柱狀全景圖插件

   下載地址：https://github.com/JeremyHeleine/Photo-Sphere-Viewer

④全景圖

  

  像上圖那樣的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()：縮小。

 例子代碼：https://github.com/lerhxx/x_x/blob/gh-pages/photo-sphere-viewer.html

效果：https://lerhxx.github.io/x_x/photo-sphere-viewer.html