drawing-board-service/src/core/renderer-three/hook/use-getter.ts

import { Raycaster, Vector2, Vector3 } from "three";
import { installThreeGlobalVar, useCamera, useContainer, useScene } from "./use-stage";

export const useRaycaster = installThreeGlobalVar(() => new Raycaster());

export const useGetIntersectObject = () => {
  const scene = useScene();
  const raycaster = useRaycaster();

  return (origin: Vector3, direction: Vector3, far = 10000, near = 0) => {
    raycaster.set(origin, direction);
    raycaster.far = far
    raycaster.near = near
    return raycaster.intersectObject(scene);
  };
};

export const useGetIntersectObjectByPixel = () => {
  const scene = useScene();
  const raycaster = useRaycaster();
  const camera = useCamera();
  const container = useContainer()

  return (pixel: Vector2) => {
    if (container.value) {
      pixel = pixel.clone()
      pixel.setX((pixel.x / container.value.offsetWidth) * 2 - 1)
      pixel.setY(-(pixel.y / container.value.offsetHeight) * 2 + 1)
    }
    raycaster.setFromCamera(pixel, camera);
    return raycaster.intersectObject(scene);
  };
};