全景图片查看器，网络上相关的插件有很多，例如：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()
}
到此全景图片查看器就完成了，赶快试试吧，是不是很酷炫，别忘记点赞收藏哦~~
