Photo Sphere Viewer 全景用法记录

1. 初始化

const viewer = new PhotoSphereViewer.Viewer({
  container: document.querySelector('#viewer'), // 全景容器
  panorama: 'path/to/panorama.jpg', // 初始图片
  plugins： [...] // plugins配置 增加自己项目需要
})

2. 增加marker plugin

import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'


// 在上面new的时候加入marker的plugin，markers数组为自己要填入的marker
plugins: [
  [
    MarkersPlugin, {
      markers: [],
    }
  ],
]


// 后面所有对于markers的操作都可用 下面定义的markersPlugin
const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

3. 新增marker

markersPlugin.addMarker({
  id: 'new-marker', // id唯一
  position: { yaw: '45deg', pitch: '0deg' }, // 位置
  image: 'assets/pin-red.png', // 场景图片
})

4. 进入marker对应的场景

// marker id和转场动效时间
markersPlugin.gotoMarker('marker-1', '4rpm')
  .then(() => /* animation complete */);

5. 场景切换时 需要清除上个场景的所有marker 并渲染当前场景的markers

// 将所有marker全部替换
markersPlugin.setMarkers(properties[])