基于photo sphere viewer的360全景展示

最新推荐文章于 2023-02-13 16:16:35 发布

源辰_付

最新推荐文章于 2023-02-13 16:16:35 发布

阅读量2.9k

点赞数 1

分类专栏：前端

前端专栏收录该内容

154 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>360全景图展示</title>
    <link rel="stylesheet" type="text/css" href="https://os.alipayobjects.com/rmsportal/BfEgqbhITpXKmNcQqJmI.css" />
    <script src="https://os.alipayobjects.com/rmsportal/gvmIzdKRFvEjPqTBGyGe.js"></script>
    <script src="https://os.alipayobjects.com/rmsportal/gtITtPAuXpBIkABlxHkS.js"></script>
</head>


<body>
    <style>
    body {
        font-size: 16px;
        background-color: #E6E7EB;
        margin: 0;
    }
    
    #your-pano {
        position: relative;
        margin: 0 auto;
    }
    
    </style>
    <div class="container">
        <div id="your-pano"></div>
    </div>
    <script>
    var div = document.getElementById('your-pano');


        new PhotoSphereViewer({
            panorama: 'https://gw.alicdn.com/tfs/TB1WSInRFXXXXXlXpXXXXXXXXXX-1200-600.jpg',
            container: div,
            time_anim: false,
            navbar: true,
            size: {
                width: '600px',
                height: '400px'
            }
        });
    </script>
</body>


</html>

转载地址：http://www.qdfuns.com/notes/35185/e7e58990fd5b8f68462c8be25c38e93a.html

源辰_付

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于photo sphere viewer的360全景展示

360全景图展示 body { font-size: 16px; background-color: #E6E7EB; margin: 0; } #your-pano { position: relative; margin: 0 aut
复制链接

扫一扫