记录一次Threejs当中，不使用光线投射(Raycaster),实现点击CSS2DObject的方法。

需求背景:

Raycaster光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

由于Raycaster会计算鼠标位置以及容器(alarm-popup)的位置和大小判断是否点击到了容器，但是容器当中的可点击部分(alarm-popup-body)这部分大小是动态且定位的 所以容器的大小不包含可点击部分的 最终导致无法被点击选中。

解决思路：

我们只需要获取当前鼠标点击的位置(x,y) 以及被点击元素的容器大小以及位置 (width,height,x,y)就可以做出精准的点击了，做过游戏的知道很多2D碰撞检测也是这个原理

再看代码实现：

 const isPointInContainer = (x, y, container) => {
  // 检查 x 坐标是否在容器的 left 和 left + width 之间
  const isXInRange =
    x >= container.left && x <= container.left + container.width;

  // 检查 y 坐标是否在容器的 top 和 top + height 之间
  const isYInRange =
    y >= container.top && y <= container.top + container.height;

  // 如果 x 和 y 都在范围内，则返回 true，否则返回 false
  return isXInRange && isYInRange;
};

 
 window.addEventListener("click", (event) => {
    console.log(event);
    //获取当前点击的
    let clientX = event.clientX;
    let clientY = event.clientY;

    let rect = document
      .querySelector(".alarm-popup-body")
      .getBoundingClientRect();

    if (isPointInContainer(clientX, clientY, rect)) {
      console.log("点击到了元素",clientX, clientY, rect);
    }
  });