Vue项目中是实现全景图片

全景图片查看器，网络上相关的插件有很多，例如：Panolens.js、Pano.js、photo-sphere-viewer.js，这些插件都是基于 Three.js，我这次是用的是 photo-sphere-viewer.js。

# 第一步： 安装

npm install  photo-sphere-viewer --save-dev 

# 第二步： 引入

import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

或者标签引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<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>

# 第三步： 使用

// 或者放在 initPhotoSphere() 方法里
this.PSV = new Viewer({
  container: document.getElementById('viewer'),
  panorama: require('@/static/' + val),
  autorotateDelay:true, //是否自旋转动
  captureCursor:true,
  autorotateSpeed:0.12943951023931953, // 旋转速度
  size: {
    width: '100%',
    height: '600rpx'
  },
  caption: '一号地块',
  // time_anim: false,
  // defaultLat: 1.4441088145446443,
  // defaultLong: 0.0800613513013615,
  // sphereCorrection: {pan: 30.01, tilt: 0, roll: 0}, // 校正 低 倾斜 卷
  maxFov: 100,         // 最大缩放值
  minFov: 10,          // 最小缩放值
  defaultZoomLvl: 20,     // 默认缩放值，在1-179之间
  // mousewheel: false,    // 禁止鼠标滚轮缩放
  touchmoveTwoFingers:false,
  moveSpeed: 1, // 鼠标拖拽的速度
  loadingImg: null,
  loadingTxt: "place wait...",
  navbar: false,
  navbar: [
    'autorotate',
    'zoom',
     'caption',
     'fullscreen' //全屏
    ]
}) 

标签引入时使用方法类似，只是方法名称不同，如下

new PhotoSphereViewer.Viewer({
  参数与之相同。。。
});

# 图片切换

if (this.PSV) {
  this.PSV.destroy()
}
this.$nextTick(() => {
  this.initPhotoSphere()
})

有时候会有问题，也没有Cannot load image的报错，初步判断应该不是图片路径的问题。尝试换一种切换图片的方式。如下

if (this.PSV) {
  this.PSV.setPanorama(this.factoryLink, true, true)
} else {
  this.initPhotoSphere()
}

如切换过快，导致上个图还没加载完则会报 PSVError: Loading already in progress错误导致图片不显示，解决方案如下：

if (this.PSV) {
  this.imageLoaded = false
  console.log(this.imageLoaded)
  this.PSV.setPanorama(this.factoryLink, true, true).then(() => {
  this.imageLoaded = true
    console.log('-------替换图片完成--------')
  });
} else {
  this.initPhotoSphere()
}

到此全景图片查看器就完成了，赶快试试吧，是不是很酷炫，别忘记点赞收藏哦~~