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

news2024/11/8 7:37:23

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)
    })

}

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2130029.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

elementUI中el-form 嵌套el-from 如何进行表单校验?

在el-form中嵌套另一个el-form进行表单校验和添加规则&#xff0c;首先&#xff0c;需要确保每个嵌套的el-form都有自己的model、rules和ref。 以下是一个简化的示例&#xff1a; <template><el-form :model"parentForm" :rules"parentRules" r…

推荐7款可以写论文的AI免费工具,原创一键生成神器!

在当今学术研究和写作领域&#xff0c;AI技术的应用越来越广泛&#xff0c;特别是在论文写作方面。为了帮助学生和研究人员提高写作效率和质量&#xff0c;以下推荐7款可以写论文的AI免费工具&#xff0c;这些工具均具备一键生成高质量论文的功能&#xff0c;是原创写作的神器。…

工业机器人9公里远距离图传模块,无人机低延迟高清视界,跨过距离限制

在科技日新月异的今天&#xff0c;无线通信技术正以未有的速度发展&#xff0c;其中&#xff0c;图传模块作为连接现实与数字世界的桥梁&#xff0c;正逐步展现出其巨大的潜力和应用价值。今天&#xff0c;我们将聚焦一款引人注目的产品——飞睿智能9公里远距离图传模块&#x…

自制一键杀死端口进程程序# tomcat 如何杀死tomcat进程

直接cmd 窗口执行如下命令即可 netstat -ano | findstr :8080 taskkill /F /PID <PID>简简单单的两个指令,总是记不住,也懒的记, 每次端口冲突的时候, 都是直接查百度,很苦逼, 如果有一个程序,直接输入端口号,点击按钮直接杀死进程,岂不爽歪歪. 跟我一起制作一个屠猫的…

【CSS】 Grid布局:现代网页设计的基石

引言 最近接到一个网页布局比较复杂的页面&#xff0c;看了半天还是决定用grid布局来写&#xff0c;记录一下 布局是构建用户界面的关键部分。CSS Grid布局提供了一种简单而强大的方式来创建复杂的网格布局&#xff0c;它让设计师和开发者能够更直观、更灵活地控制网页的结构。…

git pull之后发现项目错误,如何回到之前的版本方法

目录 首先我们打开小程序的cmd的黑窗口&#xff0c;git reflog查看之前的版本 之后再git reset --hard main{1} 我这个就已经返回了之前的6daaa2e的版本了 首先我们打开小程序的cmd的黑窗口&#xff0c;git reflog查看之前的版本 之后再git reset --hard main{1} 我这个就已…

Haption力反馈设备在机器人遥操作中的应用优势

在工业、医疗、科研等多个领域&#xff0c;机器人遥操作正在成为一项关键技术&#xff0c;它允许操作者在远离实际工作环境的情况下&#xff0c;通过远程控制系统对机器人进行精准操作。Haption Virtuose力反馈设备作为遥操作系统中的重要组成部分&#xff0c;其应用优势日益凸…

OpenGL3.3_C++_Windows(37)

调试&#xff1a; 视觉错误与CPU调试不同&#xff0c;在GLSL代码中也不能设置断点&#xff0c;出现错误的时候寻找错误的源头可能会非常困难。 glGetError&#xff08;&#xff09; GLenum glGetError();返回整形数字&#xff0c;查询错误标记&#xff0c;但是当一个错误标记…

JS设计模式之装饰者模式:优雅的给对象增添“魔法”

引言 在前端开发中&#xff0c;我们经常会遇到需要在不修改已有代码的基础上给对象添加新的行为或功能的情况。而传统的继承方式并不适合这种需求&#xff0c;因为继承会导致类的数量急剧增加&#xff0c;且每一个子类都会固定地实现一种特定的功能扩展。 装饰者模式则提供了…

LLM - 理解 多模态大语言模型 (MLLM) 的预训练与相关技术 (三)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142063880 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 完备(F…

基于锂电池的多路直流电源模块设计

本实物模块从实物外观、接口介绍及功能说明三部分来介绍这款基于锂电池的多路直流电源模块。 1、实物外观 2、接口介绍 本模块的3D外观图如下图所示&#xff0c;整体尺寸为6*8cm。H1为单节锂电池接口&#xff0c;H2为5V输出接口&#xff0c;H3为12V输出接口&#xff0c;H4为-…

【开源免费】基于SpringBoot+Vue.JS房产销售系统(JAVA毕业设计)

本文项目编号 T 028 &#xff0c;文末自助获取源码 \color{red}{T028&#xff0c;文末自助获取源码} T028&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 销…

​​​​​​​Oracle11 分析函数等高级函数使用说明

1、Group by 与GROUP BY 一起使用的关建字 GROUPING , ROLLUP,CUBE,结合这些特性的函数可以实现SQL的明细分组统计 GROUPING 记录是对哪个字段进行统计 select deptno,job,sum(sal),grouping(deptno),grouping(job) from emp group by rollup( deptno,job); 等价于 selec…

并发编程 - GCD信号量

引言 在现代应用开发中&#xff0c;处理并发任务已经成了不可避免的挑战。在这种情况下&#xff0c;如何有效地管理多个线程对共享资源的访问&#xff0c;避免资源竞争和数据不一致的问题&#xff0c;成为了我们必须面对的难题。在NSOperation&NSOperationQueue中系统为我…

OpenCV结构分析与形状描述符(21)计算包围给定点集的最小面积三角形函数minEnclosingTriangle()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到一个包围二维点集的最小面积三角形&#xff0c;并返回其面积。 该函数找到一个包围给定的二维点集的最小面积三角形&#xff0c;并返回其面…

【HarmonyOS】云开发-云数据库(二)

背景 书接上回&#xff0c;实现了云侧和端侧的云数据库创建、更新、修改等操作。这篇文章实现调用云函数对云数据库进行增删改查。 CloudProgram 项目配置 新建函数 在cloudfunctions目录下点击右键&#xff0c;选择新建Cloud Function&#xff0c;输入query-student-functi…

使用OpenCV进行模糊检测(拉普拉斯算子)

参考&#xff1a; 使用OpenCV进行模糊检测&#xff08;拉普拉斯算子&#xff09; 代码&#xff1a; # import the necessary packages from imutils import paths import argparse import cv2 import osdef variance_of_laplacian(image):# compute the Laplacian of the ima…

聚观早报 | 极越07正式上市;宝骏云海正式上市

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 9月12日消息 极越07正式上市 宝骏云海正式上市 滴滴包车全国上线 淘宝Apple Vision Pro版重大更新 OpenAI将发布…

【中秋月饼系列】2024年立体月饼新鲜出炉----python画月饼(1)附完整代码

【中秋月饼系列】2024年立体月饼新鲜出炉 ----python画月饼&#xff08;1&#xff09;附完整代码 本文目录&#xff1a; 零、时光宝盒 一、2024年中秋节立体逼真月饼&#xff08;效果展示&#xff09; 二、Python 海龟画图主要方法 &#xff08;1&#xff09;海龟画图的主…

【Linux】:信号的保存和信号处理

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家带来信号的保存和信号处理相关代码和知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入…