Photo sphere viewer-一个博客

Photo sphere viewer

photo-sphere-viewer.js 是一个用于显示 360° 全景图的 JavaScript 库

接口演示

接口说明

http://qj.blans.top/index.php?p1=全景图URL（http协议）

1、p1参数为全景图图片文件地址，值为URL链接，注意为http协议。

例：http://qj.blans.top/index.php?p1=http://76-bl.blans.top/qj/panorama/qj.jpg

2、图片要求为2/1比例尺寸全景图片

14000×7000

接口解释

网页代码:

<head>
    <!-- for optimal display on high DPI devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    //css文件
    <link rel="stylesheet" href="css/index.min.css" />
</head>

<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

<script type="importmap">
    {
        "imports": {
            // js库
            "three": "three.module.js",
            "@photo-sphere-viewer/core": "index.module.js"
        }
    }
</script>

<?php
// 读取GET数据并赋值给变量
// 例 http://blans.top/bl/qj/index.php?p1=link1
$param1 = $_GET['p1'];
?>
<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';

    const viewer = new Viewer({
        container: document.querySelector('#viewer'),
        // PHP读取Get变量的值赋值给js变量
        // 注意图片尺寸2/1
        panorama: '<?php echo $param1; ?>',
    });
</script>