全景圖片查看器踱阿，網(wǎng)絡(luò)上相關(guān)的插件有很多，例如：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'
或者標(biāo)簽引入
<link rel="stylesheet" />
<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, //是否自旋轉(zhuǎn)動
captureCursor:true,
autorotateSpeed:0.12943951023931953, // 旋轉(zhuǎn)速度
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, // 默認(rèn)縮放值瓢娜，在1-179之間
// mousewheel: false, // 禁止鼠標(biāo)滾輪縮放
touchmoveTwoFingers:false,
moveSpeed: 1, // 鼠標(biāo)拖拽的速度
loadingImg: null,
loadingTxt: "place wait...",
navbar: false,
navbar: [
'autorotate',
'zoom',
'caption',
'fullscreen' //全屏
]
})
標(biāo)簽引入時使用方法類似，只是方法名稱不同礼预，如下
new PhotoSphereViewer.Viewer({
參數(shù)與之相同恋腕。。逆瑞。
});
# 圖片切換
if (this.PSV) {
this.PSV.destroy()
}
this.$nextTick(() => {
this.initPhotoSphere()
})
有時候會有問題荠藤，也沒有Cannot load image的報錯，初步判斷應(yīng)該不是圖片路徑的問題获高。嘗試換一種切換圖片的方式哈肖。如下
if (this.PSV) {
this.PSV.setPanorama(this.factoryLink, true, true)
} else {
this.initPhotoSphere()
}
如切換過快，導(dǎo)致上個圖還沒加載完則會報 PSVError: Loading already in progress錯誤導(dǎo)致圖片不顯示念秧，解決方案如下：
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()
}
到此全景圖片查看器就完成了淤井，趕快試試吧，是不是很酷炫摊趾，別忘記點贊收藏哦~~
