lyq
/
tpanorama


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>全景展示</title>
    <script src="js/three.js"></script>
    <script src="js/tpanorama.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        #panoramaConianer {
            overflow: hidden;
            position: absolute;
            height: 100%;
            width: 90%;
        }
        #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,//镜头最a小拉近距离
                maxFocalLength: 100,//镜头最大拉近距离
                showlable: 'show' // show,click
            }
            tp = new tpanorama(opt);
            tp.init();
        }

        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.clean();
            tp.config(opt);
            tp.init();
        }

    </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>