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