使用 photo-sphere-viewer.js 浏览单张和六张的全景图

photo-sphere-viewer.js是一个用于显示照片球面全景图的JavaScript库，是一个基于three.js的全景插件。
示例
http://ithanmang.com/taskdata/photo-sphere-viewer/index.html
效果
这里写图片描述
特点
1、能添加锚点
2、可以调用陀螺仪
3、可以加载单张和六张的全景图
4、功能丰富，使用简单

调用陀螺仪需要引用 DeviceOrientationControls.js 这是three.js的一个js插件

需要依赖的文件

使用步骤
引入下面文件

<link rel="stylesheet" href="css/photo-sphere-viewer.css">
<script src="libs/three.js"></script>
<script src="libs/D.js"></script>
<script src="libs/uevent.js"></script>
<script src="libs/doT.js"></script>
<script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 -->
<script src="libs/photo-sphere-viewer.js"></script>

创建一个div

<!-- 全景图 -->
<div id="photo-sphere">
    <div id="viewer"></div>
</div>

调用PhotoSphereViewer方法

<script>
  var viewer = new PhotoSphereViewer({
    container: 'viewer',
    panorama: 'path/to/panorama.jpg',
    size:{
            width:'100%',
            height:'100%'
        }
  });
</script>

写下面这些代码就可以加载全景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #photo-sphere {
            width: 80%;
            height: 500px;
            margin: 100px auto;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
        }
    </style>

    <link rel="stylesheet" href="css/photo-sphere-viewer.css">

    <script src="libs/three.js"></script>
    <script src="libs/D.js"></script>
    <script src="libs/uevent.js"></script>
    <script src="libs/doT.js"></script>
    <script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 -->
    <script src="libs/photo-sphere-viewer.js"></script>
</head>
<body>
<!-- 全景图 -->
<div id="photo-sphere">
    <div id="viewer"></div>
</div>
<script>

    var viewer = new PhotoSphereViewer({
        container: 'viewer',
        panorama: 'images/Bryce-Canyon.jpg',
        size:{
            width:'100%',
            height:'100%'
        }
    });

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

具体功能可以查看官方文档：
https://photo-sphere-viewer.js.org/api/
示例代码

<!DOCTYPE html>
<html lang="en">
<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, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #photo-sphere {
            width: 100%;
            height: 500px;
            margin: 0 auto;
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
        }
    </style>

    <link rel="stylesheet" href="css/photo-sphere-viewer.css">

    <script src="libs/three.js"></script>
    <script src="libs/D.js"></script>
    <script src="libs/uevent.js"></script>
    <script src="libs/doT.js"></script>
    <script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 -->
    <script src="libs/photo-sphere-viewer.js"></script>

</head>
<body>
<!-- 全景图 -->
<div id="photo-sphere">
    <div id="viewer"></div>
</div>
<script>

    let config = [

        {
            url:{
                left: 'images/siximg/left.jpg',
                front: 'images/siximg/front.jpg',
                right: 'images/siximg/right.jpg',
                back: 'images/siximg/back.jpg',
                top: 'images/siximg/top.jpg',
                bottom: 'images/siximg/bottom.jpg',
            },
            desc:'太阳神庙 ( 虚幻 4 )'
        }

    ];

    let PSV = PhotoSphereViewer({

        container:'viewer', // 直接写 id 值
        // panorama:'images/Bryce-Canyon.jpg',
        panorama:config[0].url,
        caption:config[0].desc,
        default_long: Math.PI / 2,
        default_fov: 90,
        size:{
            width:'100%',
            height:isMobile()? screen.availHeight : '100%',
        },
        loading_msg:'images/photosphere-logo.gif',
        time_anim:false,

        markers:[
            {
                id:'image',
                image:'images/pin2.png',
                width:35,
                height:35,
                longitude: 100,
                latitude: 0,
                anchor:'bottom center',
                tooltip:'雕像',
            },
            {
                id:'image2',
                image:'images/pin1.png',
                width:35,
                height:35,
                longitude: 20,
                latitude: -0.15,
                anchor:'bottom center',
                tooltip:'灯',
            }
        ]
    });

    /* 判断设备是否为移动端 */
    function isMobile() {

        let ua = navigator.userAgent;

        let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

            isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

            isAndroid = ua.match(/(Android)\s+([\d.]+)/),

            isMobile = isIphone || isAndroid;

        return isMobile;

    }
    if (!isMobile()) {
        document.getElementById('photo-sphere').style.marginTop = '100px';
        document.getElementById('photo-sphere').style.marginBottom = '100px';
        document.getElementById('photo-sphere').style.marginLeft = 'auto';
        document.getElementById('photo-sphere').style.marginRight = 'auto';
        document.getElementById('photo-sphere').style.width = '80%';
    }
</script>

</body>
</html>

使用 photo-sphere-viewer.js 浏览单张和六张的全景图

猜你喜欢