【实例简介】
利用html5实现的360度全景图浏览(带天地)
【实例截图】
【核心代码】
// Load the predefined panorama
function loadPredefinedPanorama(evt) {
evt.preventDefault();
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
// Path to the panorama
panorama: 'sun.jpg',
// Container
container: div,
// Deactivate the animation
time_anim: false,
// Display the navigation bar
navbar: true,
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
}
// Load a panorama stored on the user's computer
function upload() {
// Retrieve the chosen file and create the FileReader object
var file = document.getElementById('pano').files[0];
var reader = new FileReader();
reader.onload = function() {
var div = document.getElementById('your-pano');
var PSV = new PhotoSphereViewer({
// Panorama, given in base 64
panorama: reader.result,
// Container
container: div,
// Deactivate the animation
time_anim: false,
// Display the navigation bar
navbar: true,
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
};
reader.readAsDataURL(file);
}