全景圖共分為三種：

①球面全景圖

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

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

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

②立方體全景圖

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

③柱狀全景圖

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

? ?

準備

在瀏覽器中實現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()：縮小。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。