photo-sphere-viewer 全景图Vr 720全景查看（原生js）

Holly31

已于 2023-07-25 09:27:17 修改

阅读量1.1k

点赞数

分类专栏：第三方插件文章标签： vr javascript

于 2023-02-13 16:57:44 首次发布

本文链接：https://blog.csdn.net/holly31/article/details/129012522

版权

第三方插件专栏收录该内容

8 篇文章 1 订阅

订阅专栏

该文展示了如何使用HTML、JavaScript和PhotoSphereViewer库创建一个带有入场动画、标记和图库功能的全景图查看器。代码中包括了初始化全景图、添加和处理标记、以及切换图库时的场景更新逻辑。

摘要由CSDN通过智能技术生成

html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>photoShereViewer</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin/index.min.css" />
    <style></style>
</head>

<body>
    <div id="viewer" style="width: 98vw; height: 98vh;"></div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/autorotate-plugin/index.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin/index.min.js"></script>
<script src="js/data.js"></script>
<script>

</script>
<script src="js/index.js"></script>

index.js

//动画参数
const animatedValues = {
    pitch: {
        start: -Math.PI / 2,
        end: 0.2
    },
    yaw: {
        start: Math.PI,
        end: 0
    },
    zoom: {
        start: 0,
        end: 50
    },
    fisheye: {
        start: 2,
        end: 0
    },
};
var currIndex = 0;
var panoramaUrl = "";
//初始化实例
const viewer = new PhotoSphereViewer.Viewer({
    container: 'viewer',
    panorama: photos[0].panorama || 'images/1.jpg',
    caption: '江西憶源多媒体科技有限公司',
    loadingImg: 'images/loader.gif',
    touchmoveTwoFingers: true,
    mousewheelCtrlKey: false,
    defaultPitch: animatedValues.pitch.start,
    defaultYaw: animatedValues.yaw.start,
    defaultZoomLvl: animatedValues.zoom.start,
    fisheye: animatedValues.fisheye.start,
    navbar: [
        'autorotate',
        'zoom',
        'move',
        'download',
        'gallery',
        {
            title: 'Change points',
            content: '🔄',
            onClick: randomPoints,
        },
        'caption',
        'fullscreen',
    ],
    plugins: [
        [PhotoSphereViewer.GalleryPlugin, {
            /*图库*/
            visibleOnLoad: true,
            hideOnClick: false
        }],
        [PhotoSphereViewer.AutorotatePlugin, {
            /**自动旋转*/
            autostartDelay: 0,
            autorotatePitch: animatedValues.pitch.end,
            autostartOnIdle: false,
        }],
        [PhotoSphereViewer.MarkersPlugin, {
            /* 标记 */
            markers: []
        }],
    ],

});
/*****图片标记******/
const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

markersPlugin.addEventListener('select-marker', ({
    marker
}) => {
    if (marker.id == "new-marker1") {
        currIndex = 1;

    }
    if (marker.id == "new-marker2") {
        currIndex = 2;

    }
    if (marker.id == "new-marker3") {
        markersPlugin.updateMarker({id:marker.id,image:"images/bao.png"});

    } else {
        panoramaUrl = photos[currIndex].panorama;

        handelChangeViewer();
    }

});

function addMarker() { //增加标记点
    markersPlugin.addMarker({
        id: 'new-marker7',
        position: {
            yaw: '-171deg',
            pitch: '26deg'
        },
        image: 'images/local.png',
        size: {
            width: 35,
            height: 35
        },
    });
}

function setMarkers() { //设置标记点
    markersPlugin.setMarkers(markers);

}
//图库列表当前展示active更新
function handelGalleryActive() {
    const galleryBox = document.getElementsByClassName(
      "psv-gallery-container"
    )[0];
    const galleryItemEle =
      document.getElementsByClassName("psv-gallery-item")[this.currIndex];
    galleryBox.childNodes.forEach((item) => {
      item.className = "psv-gallery-item";
    });
    galleryItemEle.classList.add("psv-gallery-item--active");
  }
  //图库列表切换场景
document.addEventListener("click", function (e) {
    var element = document.elementFromPoint(e.clientX, e.clientY);
    var flag = false;
    var _sindex="";
    if (element && element.dataset && element.dataset.psvGalleryItem) {
        const id = element.dataset.psvGalleryItem;
         _sindex = photos.findIndex((data) => {
            return data.id == id;
        });
        flag = true;
    } else {
        if (element&&element.className == "psv-gallery-item-thumb") {
            const eleId =
                element.parentElement.parentElement.dataset.psvGalleryItem;
            _sindex = photos.findIndex((data) => {
                return data.id == eleId;
            });
            flag = true;
        }
    }
    if (flag) {
        if (currIndex == _sindex) {
            console.log("点击未切换");
        } else {
            currIndex = _sindex;
            panoramaUrl = photos[_sindex].panorama;
            handelChangeViewer("gallery");
        }
    }
});

function handelChangeViewer(type) {
    if (viewer) {
        clearMarker();
       
        viewer.setPanorama(panoramaUrl).then(() => {
            markersPlugin.setMarkers(
                photos[currIndex].markers
            );
        });
        if (type != "gallery") {
            handelGalleryActive();
          }
    }
}

function clearMarker() {
    markersPlugin.clearMarkers();
}
//全景图点击事件
viewer.addEventListener('click', ({
    data
}) => {
    if (!data.rightclick) {
        markersPlugin.addMarker({
            id: '#' + Math.random(),
            position: {
                yaw: data.yaw,
                pitch: data.pitch
            },
            image: 'images/local.png',
            size: {
                width: 32,
                height: 32
            },
            anchor: 'bottom center',
            tooltip: '新增标记',
            data: {
                generated: true,
            },
        });
    }
})
/**图库列表***/
const gallery = viewer.getPlugin(PhotoSphereViewer.GalleryPlugin);
gallery.setItems(photos);



/*****navbar 自定义图标（展示new-marker3的Tooltip）******/
function randomPoints() {
    markersPlugin.showMarkerTooltip('new-marker3');
    markersPlugin.toggleMarker();

}

//页面加载
const autorotate = viewer.getPlugin(PhotoSphereViewer.AutorotatePlugin);
viewer.addEventListener('ready', onloadFunction, {
    once: true
});

function onloadFunction() {
    autorotate.stop();
    new PhotoSphereViewer.utils.Animation({
        properties: animatedValues,
        duration: 2500,
        easing: 'inOutQuad',
        onTick: (properties) => {
            viewer.setOption('fisheye', properties.fisheye);
            viewer.rotate({
                yaw: properties.yaw,
                pitch: properties.pitch
            });
            viewer.zoom(properties.zoom);
        },
    }).then(() => {
        autorotate.start();
    });
    //添加标记
    setMarkers();
    addMarker();
}

比Vue版本的多了个入场动画效果

function onloadFunction() {
    autorotate.stop();
    new PhotoSphereViewer.utils.Animation({
        properties: animatedValues,
        duration: 2500,
        easing: 'inOutQuad',
        onTick: (properties) => {
            viewer.setOption('fisheye', properties.fisheye);
            viewer.rotate({
                yaw: properties.yaw,
                pitch: properties.pitch
            });
            viewer.zoom(properties.zoom);
        },
    }).then(() => {
        autorotate.start();
    });
    //添加标记
    setMarkers();
    addMarker();
}

模拟数据参考vue版本：https://blog.csdn.net/Holly31/article/details/129010808