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:不触发 默认值为true
        controlButtons: ['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.value
    console.log(tabBcnclick.value);
    nextTick(() => {
        panoramaFnc()
        // panorama.value.load(formData.value.panoramaFilesList[currentIndex.value].file_path)
    })

}

效果图:

相关推荐
落日沉溺于海28 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手30 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
an__ya__36 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
华仔啊1 小时前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅1 小时前
JavaScript 函数详解
前端·javascript
葡萄城技术团队1 小时前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
鲸屿1951 小时前
python之socket网络编程
开发语言·网络·python
没有梦想的咸鱼185-1037-16632 小时前
基于R语言机器学习方法在生态经济学领域中的实践技术应用
开发语言·机器学习·数据分析·r语言
@小红花2 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵2 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js