最近項目中要求vr功能，可以進行圖片的全景查看，在此，用到了vue里的一個實現全景預覽的插件：photo-sphere-viewer。移動端和PC端都可以使用：下面給大家介紹一下使用步驟及方法。
1、安裝 photo-sphere-viewer依賴

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

2、引入：在你需要使用的頁面引入插件

import {Viewer} from 'photo-sphere-viewer'import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'import 'photo-sphere-viewer/dist/plugins/markers.css';

3、接下來就可以正常使用

<div id="viewer"></div> import {getBizSectionVrList} from "../../../api/api";//調用接口import {Toast} from "vant";//消息提示import {baseUrlMobile} from '../../../api/http'//調用后臺接口export default {data(){return{profileName:'',profileId:'',viewer:'',imageList:[]}},mounted(){this.getProfileVRInfoList()// this.initPhotoSphere(this.imageList)},beforeMount() {this.profileName=this.$route.query.profileNamethis.profileId=this.$route.query.profileId},methods:{initPhotoSphere(imageList){let _this=thislet i=0_this.viewer = new Viewer({container:document.querySelector('#viewer'),panorama:baseUrlMobile+imageList[i].filePath,caption: _this.profileName,navbar:true,size: {width: '100%',height: _this.isMobile()? screen.availHeight : '100%'},navbar: ['autorotate','zoom','markers','caption','fullscreen'],plugins: [[MarkersPlugin, {markers: [{id:'circle',image:require('../../../../static/icon/location.png'),width:42,height:42,longitude: 20,latitude:-0.15,anchor:'bottom center',className:'markers',tooltip:{content : '歡迎進入下一場景',position: 'bottom left'},visible:true}],}],],});const markersPlugin = _this.viewer.getPlugin(MarkersPlugin);markersPlugin.on('select-marker', (e, marker) => {this.viewer.animate({longitude: marker.config.longitude,latitude: marker.config.latitude,zoom: 100,speed: '-2rpm',}).then(() =>{i=i+1 ===baseUrlMobile+imageList.length?0:i+1;this.viewer.setPanorama(baseUrlMobile+imageList[i].filePath).then(() =>{markersPlugin.updateMarker({id: marker.id,longitude: -1.8,latitude: -0.28,}),this.viewer.animate({zoom: 50,speed: '2rpm',}).then(() =>{imageList[i].filePath = baseUrlMobile+imageList[i].filePath;})})})});},isMobile() {let ua = navigator.userAgent;let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;return isMobile;},onClickLeft(){this.$router.push({path: '/Navigation',query:{profileId:this.profileId,profileName:this.profileName}})},getProfileVRInfoList(){getBizSectionVrList(this.profileId).then((res) => {if (res.code == 200) {this.imageList = res.rows;if (res.rows.length == 0) {this.isData = false;} else {this.isData = true;this.$nextTick(() => {this.initPhotoSphere(this.imageList);});}} else {Toast.fail(res.msg);}});}},}

總結

以上是生活随笔為你收集整理的vue 项目中使用photo-sphere-viewer实现vr720度全景图片预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。