threeJS 全屏或非全屏状态下鼠标点击获取屏幕位置

news2024/11/6 0:21:12

使用threeJS引入模型进行点击事件,其实有一个是将获取到坐标位置进行webgl坐标系的转换

全屏状态:

全屏状态下直接利用window.innerWidth和 window.innerHeight进行计算即可,代码如下

    // 校验控制器旋转的时候不触发点击事件
    boxClickEvent() {
      const self = this;
      let x, y;
      //获取鼠标按下的位置
      this.renderer.domElement.addEventListener('mousedown', function (event) {
        x = event.pageX;
        y = event.pageY;
      });
      // 鼠标释放
      this.renderer.domElement.addEventListener('mouseup', function (event) {
        const newX = event.pageX;
        const newY = event.pageY;
        if (x == newX && y == newY) {
          // 位置相同的操作
          self.onDocumentMouseDown(event);
        }
      });
    },
    //获取点击的事件
    onDocumentMouseDown(event) {
      const raycaster = new THREE.Raycaster();
      const mouse = new THREE.Vector2();
      //转换为webgl坐标系下的鼠标位置
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1; // 全屏状态
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 全屏状态
        if (event.detail !== 2) { // 判断点击次数
           console.log('单击',event);
            
        } else {
           console.log('双击击',event);
        }
    },

非全屏状态: 

非全屏状态,使用实际的canvas的getBoundingClientRect(),获取canvas的相关信息

打印下canvas.getBoundingClientRect()👇

可以看出包含canvas画布的尺寸和相对屏幕上下左右的距离等信息,可以直接进行计算了

关于renderer,我是这样声明的

const self = this;
// 创建渲染器对象
self.renderer = new THREE.WebGLRenderer({ antialias: true });
// 渲染区域尺寸
self.renderer.setSize(self.$refs.threeBox.clientWidth, self.$refs.threeBox.clientHeight);
// 页面中插入canvas对象
self.$refs.threeBox.appendCh

可以把 this.renderer.domElement 直接替换成自己实际声明的canvas

 onDocumentMouseDown(event) {
      const raycaster = new THREE.Raycaster();
      const mouse = new THREE.Vector2();
      // 转换为webgl坐标系下的鼠标位置
      mouse.x = ((event.clientX - this.renderer.domElement.getBoundingClientRect().left) / this.renderer.domElement.clientWidth) * 2 - 1;
      mouse.y = -((event.clientY - this.renderer.domElement.getBoundingClientRect().top) / this.renderer.domElement.clientHeight) * 2 + 1;
      // 从相机发射一条经过鼠标点击位置的射线
      raycaster.setFromCamera(mouse, this.camera);
      // 计算射线和模型的交点
      const intersects = raycaster.intersectObjects(this.scene.children, true);
      // ...
}

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

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

相关文章

【2024软件测试面试必会技能】Selenium(6):元素定位_xpath定位

XPATH是什么 XPATH是一门在XML文档中查找信息的语言,XPATH可用来在XML文档中对元素和属性进行遍历,主流的浏览器都支持XPATH,因为HTML页面在DOM中表示为XHTML文档。Selenium WebDriver支持使用XPATH表达式来定位元素。 Xpath常用如下6种定位…

《论文阅读》e-CARE:探索可解释因果推理的新数据集 ACL2022

《论文阅读》e-CARE:探索可解释因果推理的新数据集 ACL2022 前言简介数据集优势数据集语料级别的统计数据集示例评分标准前言 今天为大家带来的是《e-CARE: a New Dataset for Exploring Explainable Causal Reasoning》 出版:ACL 时间:2022 类型:因果推理 关键词:情绪…

virtualbox虚拟机运行中断,启动报错“获取 VirtualBox COM 对象失败”

文章目录 问题现象排查解决总结 问题现象 2月7日下午四点多,我已经休假了,某县的客户运维方打来电话,说平台挂了,无法访问客户是提供的一台Windows server机器部署平台,是使用virtualbox工具安装的CentOS7.9虚拟机和运…

Linux基础知识——Linux是什么及发展史

文章目录 Linux是什么Linux之前Unix发展史MulticsUnicsUnixUNIX分支--BSDUNIX分支--System VMinixGUN计划GPLXFree86Linux 开源软件和闭源软件开源软件闭源软件/专利软件(copyright) Linux的内核版本Linux发行版 Linux是什么 Linux到底是操作系统还是应用程序呢?Li…

2024最佳住宅代理IP服务商

跨境出海已成为了近几年的最热趋势,大批量的企业开始开拓海外市场,而海外电商领域则是最受欢迎的切入口。新兴的tiktok、Temu,老牌的Amazon、Ebay,热门的Etsy、Mecari等等都是蓝海一片。跨境入门并不难,前期的准备中不…

论文精读--Noisy Student

一个 EfficientNet 模型首先作为教师模型在标记图像上进行训练,为 300M 未标记图像生成伪标签。然后将相同或更大的 EfficientNet 作为学生模型并结合标记图像和伪标签图像进行训练。学生网络训练完成后变为教师再次训练下一个学生网络,并迭代重复此过程…

图形系统开发实战课程:进阶篇(上)——6.图形交互操作:拾取

图形开发学院|GraphAnyWhere 课程名称:图形系统开发实战课程:进阶篇(上)课程章节:“图形交互操作:拾取”原文地址:https://www.graphanywhere.com/graph/advanced/2-6.html 第六章 图形交互操作:拾取 \quad 在图形系统…

Linux中安装Nginx及日常配置使用

高性能的http服务器/反向代理服务器。官方测试支持5万并发,CPU、内存等消耗较低且运行稳定 使用场景 Http服务器。 Nginx可以单独提供Http服务,做为静态网页的服务器。虚拟主机。 可以在一台服务器虚拟出多个网站。反向代理与负载均衡。 Nginx做反向代理…

创建型设计模式 - 原型设计模式 - JAVA

原型设计模式 一 .简介二. 案例三. 补充知识 前言 这是我在这个网站整理的笔记,有错误的地方请指出,关注我,接下来还会持续更新。 作者:神的孩子都在歌唱 一 .简介 原型模式提供了一种机制,可以将原始对象复制到新对象&#xff0…

Linux篇:进程

一. 前置知识 1.1冯诺依曼体系结构 我们常见的计算机,如笔记本。我们不常见的计算机,如服务器,大部分都遵守冯诺依曼体系 为什么计算机要采用冯诺依曼体系呢? 在计算机出现之前有很多人都提出过计算机体系结构,但最…

vite是什么

vite 是什么 vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具 Vite由两个主要部分组成 dev server:利用浏览器的ESM能力来提供源文件,具有丰富的内置功能并具有高效的HMR生产构建:生产环境利用Rollup来构建代码,提供指令用…

基于SSM的绿色农产品销售系统的设计与实现

随着电子商务在各行各业中的广泛应用,为更多的产品提供了销售渠道。但就目前来看,这些以工业产品为热销的大型综合性电商平台,农产品销售量很不理想。另外,市面上存在专门销售农产品的网站,大部分消费者没有形成在网上购买农产品的…

C语言每日一题(60)对链表进行插入排序

题目链接 力扣网 147 对链表进行插入排序 题目描述 给定单个链表的头 head ,使用 插入排序 对链表进行排序,并返回 排序后链表的头 。 插入排序 算法的步骤: 插入排序是迭代的,每次只移动一个元素,直到所有元素可以形成一个有…

虚拟列表【vue】等高虚拟列表/非等高虚拟列表

文章目录 1、等高虚拟列表2、非等高虚拟列表 1、等高虚拟列表 参考文章1 参考文章2 <!-- eslint-disable vue/multi-word-component-names --> <template><divclass"waterfall-wrapper"ref"waterfallWrapperRef"scroll"handleScro…

Kubernetes部署CNI网络组件

目录 1.概述 K8S的三种网络 VLAN和VXLAN的区别 K8S中Pod网络通信 flannel的三种模式 flannel的UDP模式工作原理 flannel的VXLAN模式工作原理 2.部署flannel 在node01节点上操作 在master01节点上操作 3.部署Calico Calico主要由三个部分组成 calico的IPIP模式工作…

Spring6学习技术|Junit

学习材料 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09; Junit 背景 背景就是每次Test都要重复创建容器&#xff0c;获取对象。就是ApplicationContext和getBean两个语句。通过Spring整合Junit&#xff0c;可以…

集合框架之List集合

目录 ​编辑 一、什么是UML 二、集合框架 三、List集合 1.特点 2.遍历方式 3.删除 4.优化 四、迭代器原理 五、泛型 六、装拆箱 七、ArrayList、LinkedList和Vector的区别 ArrayList和Vector的区别 LinkedList和Vector的区别 一、什么是UML UML&#xff08;Unif…

【《高性能 MySQL》摘录】第 3 章 服务器性能剖析

文章目录 3.1 性能优化简介3.1.1 通过性能剖析进行优化3.1.2 理解性能剖析 3.2 对应用程序进行性能剖析3.3 剖析 MySQL 查询3.3.1 剖析服务器负载捕获 MySQL 的查询到日志文件中分析查询日志 3.3.2 剖析单挑查询使用 SHOW PROFILE &#xff08;现已过时&#xff09;使用SHOW ST…

猫头虎分享已解决Bug || RuntimeError: size mismatch, m1: [32 x 100], m2: [500 x 10]

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

跑步也要飙起来:南卡、韶音、墨觉骨传导耳机大比拼

作为一个热衷于运动同时又不能离开音乐的人&#xff0c;我总是在寻找一款既能让我自由奔跑&#xff0c;又能享受到美妙音乐的耳机。记得买耳机前&#xff0c;朋友都说骨传导耳机就像个小喇叭&#xff0c;漏音厉害&#xff0c;我却不这么认为。对我来说&#xff0c;骨传导耳机不…