1.下载依赖
npm install photo-sphere-viewer --save //我下载的是^4.2.1
npm install three --save //我下载的是0.131.3
2.页面使用
<template>
<div id="viewer"><div class="box" @click="next"></div></div>
</template>
<script>
import {
Viewer
} from 'photo-sphere-viewer';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
data() {
return {
PSV: null,
index:0,
imgs:[
require('../assets/a.jpg'),
require('../assets/b.jpg'),
require('../assets/c.jpg'),
require('../assets/d.jpg'),
require('../assets/e.jpg'),
require('../assets/f.jpg'),
]
}
},
mounted() {
var viewer = document.querySelector('#viewer')
this.PSV = new Viewer({
container: viewer,
panorama: this.imgs[this.index],
size: {
width: '100%',
height: '100%'
},
})
},
methods:{
// 切换图片
next(){
if(this.index==this.imgs.length-1){
this.index=0
}else{
this.index++;
}
this.PSV.setPanorama(this.imgs[this.index])
}
}
}
</script>
<style>
#viewer {
height: 100vh;
width: 100vw;
}
.box{
width: 50px;
height: 50px;
background: red;
position: fixed;
left: 50%;
bottom: 20px;
z-index: 999;
}
</style>