js实现全景图预览


<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="../css/view.min.css">
        <script src="../libs/zepto_1.1.3.js">script>

        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }

            #photosphere {
                width: 100%;
                height: 100%;
            }

            .psv-button.custom-button {
                font-size: 22px;
                line-height: 20px;
            }

            .psv-loader {
                overflow: hidden;
                -webkit-border-radius: 170px;
                -moz-border-radius: 170px;
                border-radius: 170px;
            }

            .psv-loader canvas {
                display: none;
            }

            .psv-loader img {
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                max-width: 400px!important;
                width: 400px;
                max-height: 290px!important;
                height: 290px!important;
                -webkit-border-radius: 200px!important;
                -moz-border-radius: 200px!important;
                border-radius: 200px!important;
            }

            .playBtn {
                position: fixed;
                right: 10px;
                top: 10px;
                width: 34px;
                height: 34px;
                background: url(../img/pause.png);
                background-size: 100% 100%;
                z-index: 999999999;
                display: none;
            }

            .pause {
                background: url(../img/play.png);
                background-size: 100% 100%;
            }
        style>
        <style>

            .scene {
                width: 100%;
                height: 100%;
                -webkit-perspective: 600;
                perspective: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                left: 0;
                top: 0;
                background: url(../img/timg.jpg);
                background-size: 100% 100%;
            }

            .scene svg {
                width: 240px;
                height: 240px;
            }

            .dc-logo {
                position: fixed;
                right: 10px;
                bottom: 10px;
            }

            .dc-logo:hover svg {
                -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                -webkit-animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
                animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            }

            .dc-logo:hover:hover:before {
                content: '\2764';
                padding: 6px;
                font: 10px/1 Monaco, sans-serif;
                font-size: 10px;
                color: #00fffe;
                text-transform: uppercase;
                position: absolute;
                left: -70px;
                top: -30px;
                white-space: nowrap;
                z-index: 20px;
                box-shadow: 0px 0px 4px #222;
                background: rgba(0, 0, 0, 0.4);
            }

            .dc-logo:hover:hover:after {
                content: 'Digital Craft';
                padding: 6px;
                font: 10px/1 Monaco, sans-serif;
                font-size: 10px;
                color: #6E6F71;
                text-transform: uppercase;
                position: absolute;
                right: 0;
                top: -30px;
                white-space: nowrap;
                z-index: 20px;
                box-shadow: 0px 0px 4px #222;
                background: rgba(0, 0, 0, 0.4);
                background-image: none;
            }

            @-webkit-keyframes arrow-spin {
                50% {
                    -webkit-transform: rotateY(360deg);
                    transform: rotateY(360deg);
                }
            }

            @keyframes arrow-spin {
                50% {
                    -webkit-transform: rotateY(360deg);
                    transform: rotateY(360deg);
                }
            }
        style>
    head>

    <body>
        <div class="playBtn">div>
        <audio src="../libs/source.mp3" id="audios" style="position: absolute;left: 99999999999999px;top: 999999999px;" loop="true">audio>
        <div id="photosphere">div>
        <div style="position: fixed;z-index: 99999999;top: 10px;left: 10px;display: none;color: greenyellow;" class="back">返回div>
        <script src="../libs/three.js">script>
        <script src="../libs/D.min.js">script>
        <script src="../libs/uEvent.js">script>
        <script src="../libs/doT.js">script>
        <script src="../libs/CanvasRenderer.js">script>
        <script src="../libs/Projector.js">script>
        <script src="../libs/DeviceOrientationControls.js">script>
        <script src="../libs/view.min.js">script>
        <div class="scene">
            <svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width: "38"="" height: "38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
                <text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="#99cc33">LOADING
     <animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite">animate>
  text>
                <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
    C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
    C34.797,11.841,28.159,5.203,20,5.203z">
                path>

                <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
    S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
    S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
                path>

                <path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
            c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z" transform="rotate(7.50829 20 20)">
                    <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite">animateTransform>
                path>

                <path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
  c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
  C12.875,32.922,7.078,27.125,7.078,20z" transform="rotate(276.329 20 20)">
                    <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite">animateTransform>
                path>
            svg>
        div>
        <script>
        $(function(){
            var panos = [{
                url: '../img/1.jpg',
                desc: '全景主页',
                target: {
                    longitude: 3.848,
                    latitude: -0.244
                }
            }, {
                url: '../img/2.jpg',
                desc: '全景详情',
                target: {
                    longitude: 0,
                    latitude: 0
                }
            }];
            var isCahe = true;
            var PSV = new PhotoSphereViewer({
                container: 'photosphere',
                panorama: panos[0].url,
                caption: panos[0].desc,
                time_anim: false,
                default_long: Math.PI / 2,
                loading_img: '',
                loading_txt: '',
                cache_texture:10,
                navbar: [
                    'autorotate', 'zoom', 'markers',
                    'spacer-1',
                    'caption', 'gyroscope', 'fullscreen'
                ],
                markers: (function() {

                    return common();
                }())
            });

            PSV.on('ready',function(){
                PSV.toggleAutorotate();
                $('#audios')[0].play();
                $('.scene').hide();
                $('.playBtn').show();
            });

            PSV.on('select-marker', function(marker) {
                if(marker.data && marker.data.deletable) {
                    if(isCahe){
                        $('.scene').show();
                        isCahe = false;
                    }

                    PSV.clearMarkers();
                    PSV.setPanorama(panos[1].url, panos[1].target, true)
                        .then(function() {
                            $('.back').show();
                            $('.scene').hide();
                            PSV.setCaption(panos[1].desc);
                        });
                }
            });

            $('.back').click(function() {
                $(this).hide();
                var len = common().length;

                PSV.setPanorama(panos[0].url, panos[0].target, true)
                    .then(function() {
                        for(var k = 0; k < len; k++) {
                            PSV.addMarker(common()[k]);
                        }
                        PSV.setCaption(panos[0].desc);
                    });
            });
            $('.playBtn').click(function() {
                if($(this).hasClass('pause')) {
                    $(this).removeClass('pause')
                    $('#audios')[0].play()
                } else {
                    $(this).addClass('pause')
                    $('#audios')[0].pause()
                }
            });

            function common() {
                var a = [];
                for(var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
                    for(var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
                        a.push({
                            id: '#' + a.length,
                            tooltip: '点我啊',
                            latitude: j,
                            longitude: i,
                            image: '../img/pin2.png',
                            width: 32,
                            height: 32,
                            anchor: 'bottom center',
                            data: {
                                deletable: true
                            }
                        });
                    }

                }
                a.push({
                    id: 'text',
                    longitude: -0.5,
                    latitude: -0.28,
                    html: '♥来啊♥',
                    anchor: 'bottom right',
                    style: {
                        maxWidth: '320px',
                        color: 'red',
                        fontSize: '20px',
                        fontFamily: 'Helvetica, sans-serif',
                        textAlign: 'center'
                    },
                    tooltip: {
                        content: 'An HTML marker',
                        position: 'right'
                    }
                });
                a.push({
                    id: 'circle',
                    tooltip: 'A circle of radius 30',
                    circle: 20,
                    svgStyle: {
                        fill: 'rgba(255,255,0,0.3)',
                        stroke: 'yellow',
                        strokeWidth: '2px'
                    },
                    //                      longitude: 0.14842681258549928,
                    //                      latitude: -0.8678522571819425,
                    x: 8395,
                    y: 6827,
                    anchor: 'center right'
                });
                return a
            }

            function transToThreeCoord(x, y) {
                let mouse = new THREE.Vector3();
                mouse.x = (x / 14620) * 2 - 1;
                mouse.y = -(y / 7310) * 2 + 1;
                return mouse;
            }
        })
        script>

    body>

html>
做个更新,增加图片的缓存
源码下载https://download.csdn.net/download/susuzhe123/10450711

你可能感兴趣的:(js,web前端开发,前端开发)