vrimg.jpeg
此DEMO主要使用了
photo-sphere-viewer这个库，在此基础上配置参数，再加上自己的逻辑，开发一个全景导览程序要比直接写Three.js代码方便的多。
photo-sphere-viewer官网地址：https://photo-sphere-viewer.js.org/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="photo-sphere-viewer.min.css">
<title>全景导览DEMO</title>
<style>
* {
margin: 0;
padding: 0;
outline: 0;
letter-spacing:140%;
font-family: "Microsoft YaHei";
}
#container{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="three.min.js"></script>
<script src="doT.min.js"></script>
<script src="uevent.min.js"></script>
<script src="D.min.js"></script>
<script src="DeviceOrientationControls.js"></script>
<script src="photo-sphere-viewer.min.js"></script>
<script>
var PSV = new PhotoSphereViewer({
panorama: '替换成你自己的全景图片路径',
container: 'container',
time_anim: false,//关闭自动旋转
navbar: false,//关闭导航条
//loading_img: '',
move_speed: 0.8,//滑动的速度
default_fov: 100,//缩放视野
latitude_range: [Math.PI/4, -Math.PI/4],//上下可滑动范围
/*markers: [{
id: 'circle',
longitude: 2.8955010404014563,
latitude: 0,
html: '这是一个标记',
anchor: 'center center',
scale: [0.5, 1.5],
style: {
maxWidth: '100px',
color: 'white',
fontSize: '20px',
fontFamily: 'Helvetica, sans-serif',
textAlign: 'center'
},
tooltip: {
content: 'An HTML marker',
position: 'right'
}
}]*/
});
/*PSV.on('ready', function() {
console.log(PSV.isGyroscopeEnabled());
PSV.startGyroscopeControl();
});
PSV.on('select-marker', function (marker) {
console.log(marker.id)
});
PSV.on('position-updated',function(e){
console.log('经度:'+e.longitude+',纬度:'+e.latitude);
});*/
</script>
</body>
</html>
注意
1.一定要部署到服务器才可以看到效果
2.更多参数可以在官方网站上查API
3.DeviceOrientationControls为重力感应组件
4.注释部分为画标记点的内容
为了方便大家学习这里把所用到的js css一并打包
下载地址: https://pan.baidu.com/s/1QB4JdfRcOqGee0xlwV7qiw
提取码: ywkv
网友评论