前端使用photo-sphere-viewer.js 制作柱状全景图实践上海迅速网络

13916016158

关注迅速公众平台

关注微信联系人

企业电话：021-64391578

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

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>

————————————————
版权声明：本文为CSDN博主「qq_21191665」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_21191665/article/details/79608526