实例介绍
【实例简介】
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>
<!-- 3D -->
<!--<script src="./newjsandcss/three.min.js"></script>-->
<!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
<script src="./newjsandcss/polyfill.js"></script>
<!-- 事件发射器库，它为javascript对象提供观察者模式 -->
<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>
<!-- text used for the marker description -->
<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>
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论