examples/page1.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>全景展示</title>
    <script src="three.js"></script>
    <script src="/origin/tpanorama.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #panoramaConianer {
            overflow: hidden;
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #tool {
            position: absolute;
            right: 0px;
            width: 10%;
            height: 100%;
            background-color: cadetblue;
            color: white;
        }
    </style>

    <script>
        var opt, tp;
        window.onload = function () {
            opt = {
                container: 'panoramaConianer',//容器
                url: 'img/p3.png',
                lables: [
                    { position: { lon: -72.00, lat: 9.00 }, logoUrl: '', text: '蓝窗户' },
                    { position: { lon: 114.12, lat: 69.48 }, logoUrl: '', text: '一片云彩' },
                    { position: { lon: 132.48, lat: -12.24 }, logoUrl: '', text: '大海' }
                ],
                widthSegments: 60,//水平切段数
                heightSegments: 40,//垂直切段数（值小粗糙速度快，值大精细速度慢）
                pRadius: 1000,//全景球的半径，推荐使用默认值
                minFocalLength: 6,//镜头最小拉近距离
                maxFocalLength: 100,//镜头最大拉近距离
            }
            tp = new tpanorama(opt);
        }

        function changeImg(name) {
            opt.lables = [];
            if (name == "p1") {
                opt.lables = [{ position: { lon: 178.56, lat: -15.84 }, text: '神像' }]
            }
            if (name == "p2") {
                opt.lables = [{ position: { lon: -80.64, lat: -16.92 }, text: '蓝色' }, { position: { lon: 46.80, lat: 10.44 }, text: '绿色' }]
            }
            if (name == "p4") {
                opt.lables = [{ position: { lon: 48.96, lat: -20.16 }, text: '樱花' }]
            }
            opt.url = 'img/' + name + '.png';
            tp.render(opt);
        }

    </script>
</head>

<body>

    <div id="panoramaConianer"></div>

    <!-- <div id="tool">
        </br>
        </br>
        <button onclick="changeImg('p1')">图1</button>
        </br>
        </br>
        <button onclick="changeImg('p2')">图2</button>
        </br>
        </br>
        <button onclick="changeImg('p4')">图4</button>
        </br>
        </br>
    </div> -->

</body>

</html>