360全景圖three.js與Photo-Sphere-Viewer-master 3D全景瀏覽開發

1.支持WebGL和canvas的瀏覽器 (IE10, IE11支持, 但在IE里移動圖片時很卡, 不一定是全部人都有這情況)

2.Three.js (文件較大, 有官網demo, 可不下載, 下載photo-sphere-viewer.js時也有three.js)

下載地址：https://github.com/mrdoob/three.js

3.photo-sphere-viewer.js (這是基於Three.js開發的柱狀全景圖插件)

下載地址：https://github.com/JeremyHeleine/Photo-Sphere-Viewer

4.360度全景圖，是左右能夠完美拼接的

參考: 圖片尺寸 3600 * 1800 (最佳尺寸) http://www.360pano.eu/show/?id=400

5.引入js

6.js調用

var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
    // Path to the panorama
    panorama: 'images/0398.jpg',

    // Container
    container: div,

    // Deactivate the animation
    time_anim: false,

    // Display the navigation bar
    navbar: true,       

    // Resize the panorama
    size: {
        width: '800px',
        height: '400px'
    },

    // 限制頂部
    // tilt_up_max: Math.PI / 7,        

    // 限制底部
    // tilt_down_max: Math.PI / 7      
});

7.API選擇, 配置參數介紹

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