720web全景demo

Ajax框架/RIA

下载此实例

开发语言：js
实例大小：27.53M
下载次数：72
浏览次数：710
发布时间：2021-01-04
实例类别：Ajax框架/RIA
发布人：135792468
文件格式：.rar
所需积分：2

相关标签： demo web 720 20 全景 Javascript

网友评论举报投诉收藏该页

下载此实例

实例介绍

[下载地址]

【实例简介】

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

【实例截图】

【核心代码】

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="newjsandcss/photo-sphere-viewer.min.css" rel="stylesheet" />
<style>
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);
}
</style>
</head>
<body>

<div id="chartdiv"></div>
<script src="js/three.min.js"></script>



<script src="./newjsandcss/polyfill.js"></script>

<script src="./newjsandcss/uevent.min.js"></script>

<script src="./newjsandcss/doT.min.js"></script>

<script src="./newjsandcss/NoSleep.js"></script>

<script src="./newjsandcss/DeviceOrientationControls.js"></script>

<script src="./newjsandcss/StereoEffect.js"></script>

<script src="./newjsandcss/photo-sphere-viewer.js"></script>


<script type="text/template" id="pin-content">
<h1>HTML Ipsum Presents</h1>
<img src="newimg/pin2.png" style="width:100%" />
</script>

<script>
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 <b>© Jess Beauchemin</b>',
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);
//});
</script>
</body>
</html>

标签： demo web 720 20 全景 Javascript

实例下载地址