如果你用過網(wǎng)頁版的百度地圖，你大概3D全景圖瀏覽是一種怎樣的酷炫體驗：在一個點可以360度環(huán)顧周圍的建筑、景色，當然也可以四周移動，就像身臨其境。
科普
全景圖共分為三種：
①球面全景圖
利用一張全景圖圍成一個球，自身位置位于球體內。由于圖片是矩形，所以最上和最下的縫合處很明顯就能夠看得出來。
球面全景圖是最接近人眼的構建模式，若利用多個立面構建，拼接方法繁瑣，性能消耗高。
因此，本文介紹的是上述通過一張全景圖構成的球面全景圖。
②立方體全景圖
一個立方體，有六個面組成，所以就需要六張圖片啦。自身的位置位于立方體中間。這也是最常見的全景圖構建模式。
③柱狀全景圖
這個則是前兩種構建模式的結合版啦。
準備
在瀏覽器中實現(xiàn)3D全景瀏覽開發(fā)，首先需要幾樣東西：
①支持WebGL和canvas的瀏覽器
②Three.js
這里就不介紹這個插件了，所以閱讀本文需要Three.js簡單的基礎 O(∩_∩)O~
下載地址：https://github.com/mrdoob/three.js
③photo-sphere-viewer.js
這是基于Three.js開發(fā)的柱狀全景圖插件
下載地址：https://github.com/JeremyHeleine/Photo-Sphere-Viewer
④全景圖
像上圖那樣的360度全景圖，最好是左右能夠完美拼接的，這樣環(huán)顧時才自然。
現(xiàn)在也有能夠生成全景圖的工具，這里就不介紹啦。
全景圖素材站點：http://www.tupian114.com/tupian/quanjing.html
開始
現(xiàn)在開始上代碼啦?。。?/p>
html部分：
需要一個標簽元素做為全景圖的容器,并引入所需的兩個插件。
js部分：
初始化插件，創(chuàng)建一個photosphereviewer對象。
其中，前兩個選項panorama和container是必須的，其他都為可選項。
然后，3D全景效果就這樣實現(xiàn)啦，簡單吧。
那接下來就介紹一下配置參數(shù)及方法吧。
配置參數(shù)介紹
panorama：（必選）全景圖的路徑。
container：（必選）放置全景圖的容器。
autoload：（默認為true）true為自動加載全景圖，false為遲點加載全景圖（通.過load方法）。
usexmpdata：（默認值為true）photo sphere viewer是否必須讀入xmp數(shù)據(jù)，false為不必須。
cors_anonymous：（默認值為true）true為不能通過cookies獲得用戶
pano_size：（默認值為null）全景圖的大小，是否裁切。
default_position：（默認值為0）定義默認位置，用戶看見的第一個點，例如：{long: math.pi, lat: math.pi/2}。
min_fov：（默認值為30）觀察的最小區(qū)域，單位degrees，在1-179之間。
max_fov：（默認值為90）觀察的最大區(qū)域，單位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）能夠展示的最小經(jīng)度。
max_longitude：（默認值為2PI）能夠展示的最大維度。
zoome_level：（默認值為0）默認的縮放級別，值在0-100之間。
long_offset：（默認值為PI/360）mouse/touch移動時每像素經(jīng)過的經(jīng)度值。
lat_offset：（默認值為pi/180）mouse/touch移動時每像素經(jīng)過的緯度值。
time_anim（默認值為2000）全景圖在time_anim毫秒后會自動進行動畫。（設置為false禁用它）
reverse_anim：（默認值為true）當水平方向到達最大/最小的經(jīng)度時，動畫方向是否反轉（僅僅是不能看到完整的圓）。
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）全景圖準備好并且第一張圖片展示出來后的回調函數(shù)。
方法介紹
addAction()：添加事件（插件沒有提供執(zhí)行事件的方法，似乎是提供給插件內部使用的）。
fitToContainer()：調整全景圖容器大小為指定大小。
getPosition()：獲取坐標經(jīng)緯度。
getPositionInDegrees()：獲取經(jīng)緯度度數(shù)。
getZoomLevel()：獲取縮放級別。
load()：加載全景圖（）。
moveTo(longitude, latitude)：根據(jù)經(jīng)緯度移動到某一點。
rotate(dlong, dlat)：根據(jù)經(jīng)緯度度數(shù)移動到某一點。
toggleAutorotate()：是否開啟全景圖自動旋轉。
toggleDeviceOrientation()：是否開啟重力感應方向控制。
toggleFullscreen()：是否開啟全景圖全屏。
toggleStereo()：是否開啟立體效果（可用于WebVR哦）。
zoom(level)：設置縮放級別。
zoomIn()：放大。
zoomOut()：縮小。
