全景圖共分為三種：

①球面全景圖

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

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

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

②立方體全景圖

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

③柱狀全景圖

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

? ?

準(zhǔn)備

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

①支持WebGL和canvas的瀏覽器

②Three.js

? ?這里就不介紹這個插件了，所以閱讀本文需要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)顧時才自然。

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

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

?

開始

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

html部分：

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

?

js部分：

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

其中，前兩個選項panorama和container是必須的，其他都為可選項。

然后，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)位置，用戶看見的第一個點(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移動時每像素經(jīng)過的經(jīng)度值。

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

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

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

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

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

vertical_anim_target：（默認(rèn)值為0）當(dāng)自動旋轉(zhuǎn)時的維度，默認(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：按鈕激活時的背景色（默認(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()：縮小。

總結(jié)

以上是生活随笔為你收集整理的浏览器中实现3D全景浏览的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。