您的位置：首页 > Web前端

前端使用photo-sphere-viewer.js 制作柱状全景图实践

2018-03-19 19:46 441 查看

1、需要引用的文件下载地址
国外下载比较慢，我都上传到自己百度云盘：
photoSphereViewer.min.css

three.min.js

D.min.js

doT.min.js

uEvent.min.js

photoSphereViewer.min.js

这里是官网API：photo-sphere-viewer官网
2、HTML文件
自己做的是移动端，详细的去官网看吧

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,

minimum-scale=1, user-scalable=no">
<title>柱状全景图</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<link rel="stylesheet" href="css/photoSphereViewer.min.css" inline>

</head>
<body>

<!--全景图-->
<div id="photosphere"></div>

<script src="js/three.min.js"></script>
<script src="js/D.min.js"></script>
<script src="js/doT.min.js"></script>
<script src="js/uEvent.min.js"></script>
<script src="js/photoSphereViewer.min.js"></script>

<script>
var psv = PhotoSphereViewer({
container: 'photosphere', //直接写id值
panorama: rootURL+'img/bg-slide.png',  //图片路径，要保证宽高2：1，才适合做柱状全景图
size: {      //全景图显示大小
width: '100%',
height: screen.availHeight
},
default_long: 180,    // 初始经度位置
default_lat: 0,       // 初始纬度位置
max_fov: 100,         // 最大缩放值
min_fov: 99,          // 最小缩放值
default_fov: 100,     // 默认缩放值，在1-179之间
latitude_range: [0,0],//禁止上下滑动
mousewheel: false,    // 禁止鼠标滚轮缩放
theta_offset: 1000,   //旋转速度
navbar: false,

markers: [  //在图片中加图片表示，比如地图图标，对话
{
id: 'image',
longitude: -40,
latitude: 0,
image: rootURL+'img/dialog-1.png',
width: 98,
height: 92,
anchor: 'bottom center'
}
]
});

//全景图加载完成后，显示提示和按钮
    psv.on('panorama-loaded',function () {
        $('.hint-container').css('display','block');
        $('.btn-container').css('display','block');

})

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航