photo-sphere-viewer实现虚拟漫游功能开发

L1yuu__2025-12-10 16:09

一、依赖安装

1、photo-sphere-viewer依赖于threejs开发的所以要安装threejs

bash 复制代码

    pnpm add @photo-sphere-viewer/core
    pnpm add threejs

@photo-sphere-viewer/core 为核心模块，其他功能需要以插件形式使用。

其他功能插件官网查看 Introduction to plugins | Photo Sphere Viewer

二、初始化使用

html 复制代码

    <div ref="container"></div>

javascript 复制代码

   const viewer = new Viewer({
        container: document.querySelector('#container'), // 容器(必填) 支持传入dom/容器id:'container'
        panorama: '/img.jpg', // 默认加载的全景图路径，
        plugins: [MarkersPlugin] // 启用插件列表
    })

事件绑定

javascript 复制代码

    // ready 初始化完成
    viewer.addEventListener('ready', () => {})
    // click 点击事件
    viewer.addEventListener('click', () => {})

三、添加标记插件

通过viewer.getPlugin(MarkersPlugin)获取初始化时加载的插件

javascript 复制代码

    const markersPlugin = viewer.getPlugin(MarkersPlugin)
    markersPlugin.setMarkers(markers)
    markersPlugin.addEventListener('select-marker',({marker}) => {
        // 进行标记点击处理 切换全景图操作等...
        const markerData = marker.data
    })

marker数据格式：

javascript 复制代码

    // 单个标记数据格式 个人推荐使用html，可以很方便的自定义想要的标记样式
   const marker = {
        id: 'marker-1',
        html: `<div class="custom-marker"></div>`,
        position: {
          yaw: 5.796742238036393,
          pitch: -0.07873119086209468
        },
        data: {
          type: 'link',
          linkNodeId: 'scene-2'
        }
      }

四、删除标记

markersPlugin.clearMarkers()

五、更换全景图

javascript 复制代码

    viewer.setPanorama(linkNode.panorama).then(() => {
        // 更换完成的回调
    })