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

最新推荐文章于 2025-05-29 21:57:27 发布

小菜花29

最新推荐文章于 2025-05-29 21:57:27 发布

阅读量1.4k

点赞数 13

CC 4.0 BY-SA版权

文章标签： javascript 前端 threejs

本文链接：https://blog.csdn.net/jinse29/article/details/136232458

探讨threeJS中如何在全屏和非全屏状态下处理模型点击，涉及WebGL坐标转换和屏幕尺寸计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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.