720度全景 html5代码,720web全景demo

【实例简介】

720度web全景展示,需要放到iis，或tomcate下面才能在浏览器中看到

【实例截图】

【核心代码】

html, body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

padding: 0;

}

#chartdiv {

width: 100%;

height: 100%;

}

.psv-button.custom-button {

font-size: 22px;

line-height: 20px;

}

.demo-label {

color: white;

font-size: 20px;

font-family: Helvetica, sans-serif;

text-align: center;

padding: 5px;

border: 1px solid white;

background: rgba(0,0,0,0.4);

}

HTML Ipsum Presents

       

var panos = [

{

url: 'newimg/cs.jpg',

desc: '底部导航描述标题',

target: {

longitude: 180.848,

latitude: -0.244,

zoom: 50

}

}, {

url: 'newimg/Bryce-Canyon-By-Jess-Beauchemin.jpg',

desc: 'Bryce Canyon National Park © Jess Beauchemin',

target: {

longitude: 3.715,

latitude: 0.574,

zoom: 50

}

}

];

var PSV = new PhotoSphereViewer({

container: 'chartdiv', //必选，放置全景图的容器

panorama: panos[0].url, //必选，全景图的路径

caption: panos[0].desc, //描述

cache_texture:15000,　//缓存

loading_img: 'newimg/photosphere-logo.gif', //加载文件时的图片路径

longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], //经度范围

latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], //维度范围

anim_speed: '-2rpm', //旋转速度

default_fov: 100, //初始视野，最小视野和最大视野之间

fisheye: true, //使用true启用鱼眼效果或指定效果强度(true=1.0)此模式可能会对标记渲染产生副作用。

move_speed: 1.1, //移动速度   拖动图片转动速度

time_anim: false, //全景图自动开始旋转之前的空闲时间(毫秒)。禁用为False。

//    touchmove_two_fingers: true, //需要两个手指来旋转全景。这允许在包含查看器的页面中进行标准的触摸滚动导航。如果启用，当仅检测到一次触摸时，将显示要求用户使用两个手指的覆盖。

//    mousemove_hover: true, //旋转全景只需移动光标，以查看是否需要点击 移动。

navbar: [ //导航栏是一个数组，它可以包含以下核心按钮：自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏，以及用于创建自定义按钮的标题和对象

'autorotate', 'zoom', 'download', 'markers',

{

title: 'Change image', //按钮的名字

className: 'custom-button', //添加到button元素的CSS类

content: '🔄', //显示的文本

onClick: (function() { //点击时触发的事件

var i = 0;

var loading = false;

return function() {

if (loading) {

return;

}

if(PSV.getPanoramaCache(panos[i].url)){

PSV.clearPanoramaCache(panos[i].url);//清楚缓存

}

i = 1 - i;

loading = true;

PSV.clearMarkers(); //清除所有标记

PSV.setPanorama(panos[i].url, true, true) //加载新的全景文件

.then(function () {

PSV.setCaption(panos[i].desc);

loading = false;

});

}

}())

},

{

title  : 'Random position',

className: 'custom-button',

content: '🔀',

onClick: function() {//点击时触发的事件

PSV.animate({ //动画

longitude: (Math.random() - 0.5) * 3 / 2 * Math.PI,

latitude: (Math.random() - 0.5) * 3 / 4 * Math.PI,

zoom: Math.random() * 60 20

}, 1500);

}

},

'caption', 'gyroscope', 'stereo', 'fullscreen'

],

//标记，https://photo-sphere-viewer.js.org/markers.html

markers: (function() {

var a = [];

a.push({

id: 'lorem',

tooltip: {

content: 'Lorem ipsum dolor ist amet et consecturo.',

position: 'bottom right'

},

//content: document.getElementById('pin-content').innerHTML,//添加内容

latitude: 5,

longitude: 0.20,

image: 'newimg/pin2.png',

width: 32,

height: 32,

anchor: 'bottom center'

});

return a;

}())

});

function asd() {

alert(1);

}

PSV.on('select-marker', function (marker, dblclick) { //选择某个标记

alert("跳转");

location.href = '/html/HtmlPage2.html';

//if (marker.data && marker.data.deletable) {

//  if (dblclick) {

//    PSV.removeMarker(marker);

//  }

//  else {

//    PSV.updateMarker({

//      id: marker.id,

//      image: 'newimg/pin2.png'

//    });

//  }

//}

});

//PSV.on('over-marker', function(marker) { //划过

//  console.log('over', marker.id);

//});

//PSV.on('leave-marker', function(marker) { //离开

//  console.log('leave', marker.id);

//});

//PSV.on('select-marker-list', function(marker) {

//  console.log('select-list', marker.id);

//});

//PSV.on('goto-marker-done', function(marker) {

//  console.log('goto-done', marker.id);

//});