当先锋百科网

首页 1 2 3 4 5 6 7

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>