当先锋百科网

首页 1 2 3 4 5 6 7

前端使用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 >
<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" target="_blank" rel="external nofollow"  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>