我的第一个 Photo Sphere Viewer Demo

最新推荐文章于 2024-06-04 14:08:20 发布

废柴小z

最新推荐文章于 2024-06-04 14:08:20 发布

阅读量389

点赞数

分类专栏： Three&webGL&laya&babylon&Unity

本文链接：https://blog.csdn.net/qq_34568700/article/details/118542448

版权

Three&webGL&laya&babylon&Unity 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css"/>

    <style>
        /* the viewer container must have a defined size */
        #viewer {
          width: 100vw;
          height: 50vh;
        }
      </style>
</head>
<body>
    <div id="viewer">
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js">
</script><script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js"></script>
<script>
(function(){
    const goMarkerStyle = {
                        fill: "rgba(255,255,0,0.3)",
                        stroke: "#ccc",
                        strokeWidth: "2px", //边框
                    };
    const tipMarkerStyle = {
                        fill: "rgba(255,0,0,0.3)",
                        stroke: "#ccc",
                        strokeWidth: "2px", //边框
                    }
                    
    var viewer = new PhotoSphereViewer.Viewer({
        container: document.querySelector('#viewer'),
        // container: 'viewer',
        panorama: './imgs/1.jpg',
        caption: '我的第一个全景项目',
        minFov: 30,
        maxFov: 90,
        defaultZoomLvl: 50,
        panoData: {
            fullWidth: 11300,
            fullHeight: 5650,
            croppedWidth: 12432,
            croppedHeight: 3504,
            croppedX: 0,
            croppedY: 1356,
            poseHeading: 0, // 0 to 360
            posePitch: 0, // -90 to 90
            poseRoll: 0, // -180 to 180
        },
        navbar: [
            'autorotate',
            'zoom',
            'caption',
            'fullscreen'
        ],
        plugins: [
            [PhotoSphereViewer.MarkersPlugin, {
                markers: [ 
                    {
                        id: "go1", //标记的唯一标识符
                        tooltip: "去1501", //提示的内容
                        circle: 30, //直径
                        svgStyle: goMarkerStyle,
                        visible: true, //标记的初始可见性。默认true
                        longitude: -1.5, //位置
                        latitude: -0.28, //位置
                        anchor: "center right"
                    },
                    {
                        id: "tip1",
                        tooltip: "讲解1",
                        circle: 10,
                        svgStyle: tipMarkerStyle,
                        visible: true,
                        longitude: -1,
                        latitude: -0.28,
                        anchor: "center right",
                        content: "这里是1501前台", //点击标记后侧边列表框显示的内容

                    },
                    {
                        id: "go2", 
                        tooltip: "去1502", 
                        circle: 30, 
                        svgStyle: goMarkerStyle,
                        longitude: -1.6, 
                        latitude: -0.28,
                        anchor: "center right",
                        visible: false,
                    },
                    {
                        id: "tip2",
                        tooltip: "讲解2",
                        circle: 10, 
                        svgStyle: tipMarkerStyle,
                        visible: false,
                        longitude: -1,
                        latitude: -0.28,
                        anchor: "center right",
                        content: "这里是1502",

                    },
                    {
                        id: "go3",
                        tooltip: "去1502前台", 
                        circle: 30,
                        svgStyle: goMarkerStyle,
                        longitude: -1.6,
                        latitude: -0.28,
                        anchor: "center right",
                        visible: false,
                    },
                ],
            }], 
        ],
    });

    const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
    markersPlugin.on('select-marker', (e, marker) => {
        const markerid = marker.id; 
        console.log(markerid);
        if (markerid == 'go1') {
            markersPlugin.hideMarker(markerid);//隐藏点击的marker
            markersPlugin.hideMarker('tip1');//隐藏点击的marker
            go1501();
        }
        if (markerid == 'go2') {
            markersPlugin.hideMarker(markerid);//隐藏点击的marker
            markersPlugin.hideMarker('tip2');//隐藏点击的marker
            go1502()
        }
        
        if (markerid == 'go3') {
            markersPlugin.hideMarker(markerid);//隐藏点击的marker
            goFirst();
        }
    });

    function go1501(){
        viewer.setPanorama('./imgs/2.jpg',{
                panoData: {
                    fullWidth: 10800,
                    fullHeight: 5650,
                    croppedWidth: 12432,
                    croppedHeight: 3504,
                    croppedX: 0,
                    croppedY: 1356,
                    poseHeading: 0, // 0 to 360
                    posePitch: 0, // -90 to 90
                    poseRoll: 0, // -180 to 180
                },
            }).then(() => {
                    markersPlugin.showMarker("go2")//显示你需要显示的marker
                    markersPlugin.showMarker("tip2")//显示你需要显示的marker
            })
    }
    function go1502(){
        viewer.setPanorama('./imgs/3.jpg',{
                panoData: {
                    fullWidth: 12100,
                    fullHeight: 5650,
                    croppedWidth: 12432,
                    croppedHeight: 3504,
                    croppedX: 0,
                    croppedY: 1356,
                    poseHeading: 0, // 0 to 360
                    posePitch: 0, // -90 to 90
                    poseRoll: 0, // -180 to 180
                },
            }).then(() => {
                    markersPlugin.showMarker("go3")//显示你需要显示的marker
            })
    }
    function goFirst(){
        viewer.setPanorama('./imgs/1.jpg',{
                panoData: {
                    fullWidth: 11300,
                    fullHeight: 5650,
                    croppedWidth: 12432,
                    croppedHeight: 3504,
                    croppedX: 0,
                    croppedY: 1356,
                    poseHeading: 0, // 0 to 360
                    posePitch: 0, // -90 to 90
                    poseRoll: 0, // -180 to 180
                },
            }).then(() => {
                    markersPlugin.showMarker("go1")//显示你需要显示的marker
                    markersPlugin.showMarker("tip1")//显示你需要显示的marker
            })
    }
})()
</script>
</html>

废柴小z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一个 Photo Sphere Viewer Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫

专栏目录