全景照片做成html,html5实现3D全景图

【实例简介】

利用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);

}