[[171834]]

如果你用過網(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)在開始上代碼啦!!!

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