以前公司其他幾個前端做全景都是用軟件生成，由於本人比較懶，不想去折騰那個軟件，於是乎就有了下面的事......
這個是基於three.js的全景插件 photo-sphere-viewer.js
————————————————————————————————————————
1、能添加熱點；
2、能調用陀螺儀；
3、功能比較完善，能滿足大多數人的需求了；
4、最主要的是操作簡單，提供一長全景圖片即可（大多數手機都可以拍攝）。
直接上代碼：
var photosphere = document.getElementById('photosphere');
var PSV = new PhotoSphereViewer({
// 全景圖片路徑
// panorama: 'Bryce-Canyon-National-Park-Mark-Doliner.jpg',
panorama: 'sun.jpg',
// 容器
container: photosphere,
//標題
caption:"",
// 關閉動畫
time_anim: false,
//魚眼鏡頭
fisheye:true,
// 顯示導航欄
// navbar: true,
// 自定義導航的順序
navbar: [
'autorotate',
'zoom',
'gyroscope',
'markers',
'caption',
'fullscreen'
],
//按鈕提示
lang: {
autorotate: 'Automatic rotation',
zoom: 'Zoom',
zoomOut: 'Zoom out',
zoomIn: 'Zoom in',
download: 'Download',
fullscreen: 'Fullscreen',
markers: 'Markers',
gyroscope: 'Gyroscope'
},
// 設置畫布大小
size: {
width: '100%',
// height: '323px'
height: '603px'
},
// 啟用陀螺儀
gyroscope:true,
// 准備就緒就執行
// onready:Ready,
// 標記列表
markers: [{
// 當單擊時打開面板的圖像標記
id: 'image',
longitude: 5.69810,
latitude: -0.13770,
image: 'http://photo-sphere-viewer.js.org/assets/pin-blue.png',
width: 32,
height: 32,
anchor: 'bottom center',
tooltip: 'A image marker. <b>Click me!</b>',
content: document.getElementById('lorem-content').innerHTML
},
{
// 具有自定義樣式的html標記
id: 'text',
longitude: 0,
latitude: 0,
html: 'HTML <a href="javascript:;" onclick="top.hello();">markerd</a> ♥',
anchor: 'bottom right',
style: {
maxWidth: '100px',
color: 'white',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: 'An HTML marker',
position: 'right'
}
},
{
// 圓圈標記
id: 'circle',
circle: 20,
x: 2500,
y: 1000,
tooltip: 'A circle marker'
},
{
// 圓圈標記
id: 'circle2',
circle: 30,
x: 2000,
y: 1200,
tooltip: 'A circle marker'
}
]
});
注：調用陀螺儀需要 引用 DeviceOrientationControls.js；
最后附上 photo-sphere-viewer.js API-------http://photo-sphere-viewer.js.org/