Three.Js 鼠标点击(射线拾取)

let ray = new THREE.Raycaster(); 
let mouse = new THREE.Vector2(); 
this.renderer.domElement.addEventListener("click", (event) => {
      console.log(event);
      let px = this.renderer.domElement.getBoundingClientRect().left;
      let py = this.renderer.domElement.getBoundingClientRect().top;
      // 鼠标点位的坐标
      mouse.x =((event.clientX - px) / this.renderer.domElement.offsetWidth) * 2 - 1;    
      mouse.y =-((event.clientY - py) / this.renderer.domElement.offsetHeight) * 2 + 1;    
      ray.setFromCamera(mouse, that.camera);
      console.log(this.scene);
      // intersectObjects 第一个参数是一个数组 传 场景(scence)的各个对象 第二个参数 是否检查后代对象   
      var intersects = ray.intersectObjects(this.scene.children, true);
      console.log(intersects);
      if (intersects.length > 0) {
        console.log(intersects);
      }
    });

官方文档 的鼠标点位 是:

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

但是考虑到 canvas 并不是全屏的 所以要计算 鼠标的点位 否则会造成点击不准 等问题
点位计算 转自(侵删):

juejin.cn/post/685512…