vue3使用panolens.js实现全景，带有上一个下一个，全屏功能

panolens官方文档Home - Panolens

1.加载核心js库 （文件在untils里面）

import '@/utils/panolens/three.min.js';

import '@/utils/panolens/panolens.min.js';

/项目中 /railway/modalIframe/playPanorama/player/js/panolens-ht.js 为修改后版本 可以获取在全景点击获取坐标

//<script src="js/panolens-ht.js"></script>

2.创建全景容器 

 <div id="newqj" :style="{ display: tabBcnclick == 1 ? 'block' : 'none' }"style="width: 60%;height: 422px;margin: 0 auto;margin-top: 30px;position: relative;overflow: hidden;"><div style="" class="leftArr"><el-icon style="font-size: 24px !important;cursor: pointer;" @click.stop="leftArrowFnc"><ArrowLeft /></el-icon></div><div class="rightArr" style=""><el-icon style="font-size: 24px !important;cursor: pointer;"@click.stop="rightArrowFnc"><ArrowRight /></el-icon></div></div>

3，加载函数和默认值

const currentIndex = ref(0);

const imgUrl = ref('')

const panorama = ref('')

const viewer = ref('')

panoramaFilesList为后端返回的数组，包含file_path

function panoramaFnc() {imgUrl.value = formData.value.panoramaFilesList[currentIndex.value].file_path;panorama.value = new PANOLENS.ImagePanorama(imgUrl.value);//将全景鱼眼图片生成全景// 加载图片数据viewer.value = new PANOLENS.Viewer({container: document.getElementById('newqj'),//选中容器承载视图autoHideInfospot: false,//点击非热点区域 自动隐藏信息点 true:触发,false:不触发 默认值为truecontrolButtons: ['fullscreen'],//全景底部按钮 默认值 ['fullscreen', 'setting', 'video'] fullscreen设置全屏 setting添加设置按钮});viewer.value.add(panorama.value);//生成的全景必须放入viewer视图中才能显示
}

4.上一个下一个方法

function leftArrowFnc(e) {if (currentIndex.value > 0) {currentIndex.value--;panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)} else {return }}
function rightArrowFnc() {if (currentIndex.value < formData.value.panoramaFilesList.length - 1) {currentIndex.value++;panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)} else {return}
}

5.切换到360全景方法

function tabBtnClickFnc(item) {tabBcnclick.value = item.valueconsole.log(tabBcnclick.value);nextTick(() => {panoramaFnc()// panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)})}

效果图：