[[171834]]

如果你用過網(wǎng)頁版的百度地圖，你大概3D全景圖瀏覽是一種怎樣的酷炫體驗(yàn)：在一個(gè)點(diǎn)可以360度環(huán)顧周圍的建筑、景色，當(dāng)然也可以四周移動，就像身臨其境。

科普

全景圖共分為三種：

①球面全景圖

利用一張全景圖圍成一個(gè)球，自身位置位于球體內(nèi)。由于圖片是矩形，所以最上和最下的縫合處很明顯就能夠看得出來。

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

因此，本文介紹的是上述通過一張全景圖構(gòu)成的球面全景圖。

②立方體全景圖

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

③柱狀全景圖

這個(gè)則是前兩種構(gòu)建模式的結(jié)合版啦。

準(zhǔn)備

在瀏覽器中實(shí)現(xiàn)3D全景瀏覽開發(fā)，首先需要幾樣?xùn)|西：

①支持WebGL和canvas的瀏覽器

②Three.js

這里就不介紹這個(gè)插件了，所以閱讀本文需要Three.js簡單的基礎(chǔ) 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)顧時(shí)才自然。

現(xiàn)在也有能夠生成全景圖的工具，這里就不介紹啦。

全景圖素材站點(diǎn)：http://www.tupian114.com/tupian/quanjing.html

開始

現(xiàn)在開始上代碼啦!!!

html部分：

需要一個(gè)標(biāo)簽元素做為全景圖的容器,并引入所需的兩個(gè)插件。

js部分：

初始化插件，創(chuàng)建一個(gè)photosphereviewer對象。

其中，前兩個(gè)選項(xiàng)panorama和container是必須的，其他都為可選項(xiàng)。

然后，3D全景效果就這樣實(shí)現(xiàn)啦，簡單吧。

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

配置參數(shù)介紹

panorama：(必選)全景圖的路徑。

container：(必選)放置全景圖的容器。

autoload：(默認(rèn)為true)true為自動加載全景圖，false為遲點(diǎn)加載全景圖(通.過load方法)。

usexmpdata：(默認(rèn)值為true)photo sphere viewer是否必須讀入xmp數(shù)據(jù)，false為不必須。

cors_anonymous：(默認(rèn)值為true)true為不能通過cookies獲得用戶

pano_size：(默認(rèn)值為null)全景圖的大小，是否裁切。

default_position：(默認(rèn)值為0)定義默認(rèn)位置，用戶看見的***個(gè)點(diǎn)，例如：{long: math.pi, lat: math.pi/2}。

min_fov：(默認(rèn)值為30)觀察的最小區(qū)域，單位degrees，在1-179之間。

max_fov：(默認(rèn)值為90)觀察的***區(qū)域，單位degrees，在1-179之間。

allow_user_interactions：(默認(rèn)值為true)設(shè)置為false，則禁止用戶和全景圖交互(導(dǎo)航條不可用)。

allow_scroll_to_zoom：(默認(rèn)值為true)若設(shè)置為false，則用戶不能通過鼠標(biāo)滾動進(jìn)行縮放圖片。

tilt_up_max：(默認(rèn)值為math.pi/2)向上傾斜的***角度，單位radians。

tilt_down_max：(默認(rèn)值為math.pi/2)向下傾斜的***角度，單位radians。

min_longitude：(默認(rèn)值為0)能夠展示的最小經(jīng)度。

max_longitude：(默認(rèn)值為2PI)能夠展示的***維度。

zoome_level：(默認(rèn)值為0)默認(rèn)的縮放級別，值在0-100之間。

long_offset：(默認(rèn)值為PI/360)mouse/touch移動時(shí)每像素經(jīng)過的經(jīng)度值。

lat_offset：(默認(rèn)值為pi/180)mouse/touch移動時(shí)每像素經(jīng)過的緯度值。

time_anim(默認(rèn)值為2000)全景圖在time_anim毫秒后會自動進(jìn)行動畫。(設(shè)置為false禁用它)

reverse_anim：(默認(rèn)值為true)當(dāng)水平方向到達(dá)***/最小的經(jīng)度時(shí)，動畫方向是否反轉(zhuǎn)(僅僅是不能看到完整的圓)。

anim_speed：(默認(rèn)值為2rpm)動畫每秒/分鐘多少的速度。

vertical_anim_speed：(默認(rèn)值為2rpm)垂直方向的動畫每秒/分鐘多少的速度。

vertical_anim_target：(默認(rèn)值為0)當(dāng)自動旋轉(zhuǎn)時(shí)的維度，默認(rèn)為赤道。

navbar：(默認(rèn)為false)顯示導(dǎo)航條。

navbar_style：(默認(rèn)值為false)導(dǎo)航條的樣式。有效的屬性：

backgroundColor：導(dǎo)航條背景色(默認(rèn)值rgba(61, 61, 61, 0.5));

buttonsColor：按鈕前景色(默認(rèn)值 rgba(255, 255, 255, 0.7));

buttonBackgroundColor：按鈕激活時(shí)的背景色(默認(rèn)值 rgba(255, 255, 255, 0.1));

buttonsHeight：按鈕高度，單位px(默認(rèn)值 20);

autorotateThickness：自動旋轉(zhuǎn)圖片的層(默認(rèn)值 1);

zoomRangeWidth：縮放游標(biāo)的寬度，單位px(默認(rèn)值 50);

zoomRangeThickness：縮放游標(biāo)的層(默認(rèn)值 1);

zoomRangeDisk：縮放游標(biāo)的放大率，單位px(默認(rèn)值 7);

fullscreenRatio：全屏圖標(biāo)的比例(默認(rèn)值 4/3);

fullscreenThickneee：全屏圖片的層，單位px(默認(rèn)值 2)

loading_msg：(默認(rèn)值為Loading...)加載信息。

loading_img：(默認(rèn)值 為null)loading圖片的路徑。

loading_html：(默認(rèn)值 為null)html加載器(添加到容器中的元素或字符串)。

size：(默認(rèn)值為null)全景圖容器的最終尺寸，例如{width: 500, height: 300}。

onready：(默認(rèn)值為null)全景圖準(zhǔn)備好并且***張圖片展示出來后的回調(diào)函數(shù)。

方法介紹

addAction()：添加事件(插件沒有提供執(zhí)行事件的方法，似乎是提供給插件內(nèi)部使用的)。

fitToContainer()：調(diào)整全景圖容器大小為指定大小。

getPosition()：獲取坐標(biāo)經(jīng)緯度。

getPositionInDegrees()：獲取經(jīng)緯度度數(shù)。

getZoomLevel()：獲取縮放級別。

load()：加載全景圖()。

moveTo(longitude, latitude)：根據(jù)經(jīng)緯度移動到某一點(diǎn)。

rotate(dlong, dlat)：根據(jù)經(jīng)緯度度數(shù)移動到某一點(diǎn)。

toggleAutorotate()：是否開啟全景圖自動旋轉(zhuǎn)。

toggleDeviceOrientation()：是否開啟重力感應(yīng)方向控制。

toggleFullscreen()：是否開啟全景圖全屏。

toggleStereo()：是否開啟立體效果(可用于WebVR哦)。

zoom(level)：設(shè)置縮放級別。

zoomIn()：放大。

zoomOut()：縮小。