[React + three.js] React에서 raycaster 잘 써보기

🔦raycaster의 역할과 배경

---

three.js를 사용하다보면 각 Mesh에 메타데이터를 넣어주고 싶은 일들이 생긴다.

(누르면 관련 웹페이지로 넘기던가, 아니면 내부 로직을 위해 id 같은 key값을 리턴해주던가...)

이런 처리를 raycaster 에서 해주는데 적용하고 나면 onClickEvent나 onMouseOverEvent를 구현할 수 있다.

 

raycaster는 뜻 그대로 광선이라고 생각하면 된다. 마우스가 있는 값 기준으로 광선을 쭉 쐈을 때, 그 광선을 맞은 Mesh에 대한 정보를 얻어낼 수 있다.

예를 들면 이런 식으로 구현이 가능하다.

 

 

구현을 위해선 몇 가지의 트릭(?)이 존재하는데 주로 사용자 인터렉션 관련된 내용이다.

구현 목표는 다음과 같다.

 

1. raycaster 생성 in React.
2. ray를 마우스에 맞춰서 쏘는 방법.
3. 각 mesh에 메타데이터 삽입하는 방법.
ETC) UI 관련 (마우스 커서 변경이라던가...)

 

 

1. raycaster 생성 in React

---

raycaster 뿐만 아니라, React에서 three.js의 클래스들을 다룰 때 중요한게 리페인팅이 안되게 조심하는 것이다.

대부분 큰 용량의 리소스 파일들을 렌더링 할 때 시간이 많이 필요한데, 별 생각없이 state로 관리된다면 init을 도와주는 함수가 실행된다면 Mesh가 몇 번 씩 리페인팅 될 수 있다. (CRA의 StrictMode라던가..)

 

raycaster는 생성하고 나서 전역적인 EventListener로 핸들러를 계속 호출해야하니 useRef로 설정해주자.

 

const FrontEndPF: React.FC<FrontEndPFProps> = (props) => {
  const camera = useRef<THREE.PerspectiveCamera>(new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000));
  const renderer = useRef<THREE.WebGLRenderer>(new THREE.WebGLRenderer({ antialias: false, alpha: true }));
  const raycaster = useRef<THREE.Raycaster>(new THREE.Raycaster());
  //...
}

 

만약 fog를 따로 설정해줬다면, raycaster도 설정해줄 값들이 있다.

예를 들어 이런 상황이 있다,

 

 

광선을 쐈을 때, 맨 앞의 object가 fog 바깥의 회색 object라고 해보자.

별 설정이 없다면, 아무데나 클릭했을 때 저 회색 object 관련된 값이 넘어갈 수 있다. 그렇기 때문에 fog 바깥에 있는 요소들은 raycaster에 안잡히도록 하는 초기값(near, far)을 설정해줘야한다.

 

const init = useCallback(() => {
//...
    //part2: fog generator
    const near = 40;
    const far = 100;
    const color = "#ffffff";
    scene.current.fog = new THREE.Fog(color, near, far);
    
    // set boundary in raycaster same as fog.
    raycaster.current.near = near;
    raycaster.current.far = far;
}, [])

 

 

2. 🛋️ray를 마우스에 맞춰서 쏘는 방법.

---

모든 object가 같은 x, y 값을 가지고, z 값만 다르다면 기준 벡터를 고정 값으로 설정해두어도 문제 없지만, 카메라 영역 여기저기에 object가 퍼져있다면, 마우스에 맞춰서 raycater의 기준 벡터를 바꿔줘야한다.

 

element를 딱 집어낼 수 없기 때문에, 윈도우 전체에 mouseEvent를 걸어서 바꿔줘야한다.

 

mousemove: 마우스의 x좌표와 y좌표로 vector를 만든다.
click: 위에서 만든 좌표를 기준으로 광선을 쏜다.

이런 두 가지 요구사항으로 인해 useEffect에서 이벤트리스너를 만들어줘야한다.

(이벤트 리스너는 컴포넌트 destroy 시 삭제될 수 있게 cleanup 함수로 꼭 지워주자!)

 

useEffect(() => {
    init();
    animate();
    
    window.addEventListener("mousemove", setMouseMoveAxis, false);
    window.addEventListener("click", onClickObjectHandler, false);
    return () => {
      window.removeEventListener("mousemove", setMouseMoveAxis);
      window.removeEventListener("click", onClickObjectHandler);
    }
  }, [animate, init, onClickObjectHandler, setMouseMoveAxis]);

 

mousemove의 callback.

목적은 url이 있는 오브젝트를 만났을 때 커서를 pointer로 변경하기 위함이다.

 

const setMouseMoveAxis = useCallback((e: MouseEvent) => {
    mouseX.current = e.clientX;
    mouseY.current = e.clientY;
    
    // 화면의 중앙을 (0, 0)으로 설정.
    pointer.current.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
    raycaster.current.setFromCamera(pointer.current, camera.current);
    
    // 광선과 교차하는 부분을 뽑아냄. userData에 url이 있다면 cursor: pointer로 변경.
    const intersects = raycaster.current.intersectObjects(pngGroup.current.children);
    if (intersects.length > 0 && intersects.reduce((acc, val) => acc || val.object.userData?.url, false)) document.body.style.cursor = "pointer";
    else document.body.style.cursor = "auto";
  }, []);

 

click의 callback.

cursor: pointer일 때 누르면 새창에 웹페이지를 띄운다.

 

const onClickObjectHandler = useCallback((e: MouseEvent) => {
    pointer.current.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
    raycaster.current.setFromCamera(pointer.current, camera.current);
    
    const intersects = raycaster.current.intersectObjects(pngGroup.current.children);
    for (const intersect of intersects) {
      if (intersect.object.userData?.url) {
        window.open(intersect.object.userData?.url, "_blank");
        break;
      }
    }
  }, []);

 

3. Mesh에 메타데이터 삽입

---

메타 데이터 삽입은 mesh의 userData 속성으로 삽입할 수 있다.

그리고 이건 하다가 알게 된 팁인데, 이 3d 작업의 가장 고된(?) 부분은 일일히 3차원 공간의 좌표를 다 각 mesh마다 넣어줘야한다는 점이다.

가독성은 떨어지지만, 한 맥락안에서 묶어서 보낼 수 있는 함수를 따로 만들어두면 정신건강에 좋다.

 

대부분의 프로젝트에서는 직접 object 모양을 바꿔서 뭔가를 하지는 않는 것 같고, object에 사진을 덧씌우거나, 동영상을 얹는다던가, 3d model을 씌운다던가 하는 일들을 한다.

 

이때 다 texture가 load되지 않은 상태에서 mesh를 만들면 그냥 까만 블럭만 보이게 된다.

(쉽게 말해서 new THREE.textureLoader().load() 함수가 비동기라서 이 문제가 일어난다.)

 

다행히 안에 texture에 대한 콜백 함수가 존재해서 그 안에서 처리해주면된다. (꼭 promise 해체같다..)

 

export type positionProps = {
  x: number;
  y: number;
  z: number;
  ratioScale?: number;
  userData?: ThreeObjectUserDataProps;
}

export interface GroupedImageRenderProps {
  srcs: string[];
  eachPosition: positionProps[];
  ratioScale?: number;
}

const renderLayerGroupedImage = useCallback((arg: GroupedImageRenderProps) => {
  const { srcs, eachPosition, ratioScale } = args;
  srcs.forEach((src, i) => {
    const imageMap = new THREE.TextureLoader().load(src, (tex) => {
        // 3d 공간 위치 관련 값들
        const { x, y, z, ratioScale: _ratioScale, userData } = eachPosition[i];
        const width = Math.floor(tex.image.width / (_ratioScale || ratioScale || 10));
        const height = Math.floor(tex.image.height / (_ratioScale || ratioScale || 10));
        
        // geometry + material => mesh 생성
        const geometry = new THREE.BoxGeometry(width, height, 0);
        const material = new THREE.MeshBasicMaterial({ map: imageMap, transparent: true, color: 0xffffff });
        const boxMesh = new THREE.Mesh(geometry, material);
        
        // userData 삽입
        if (userData) boxMesh.userData = userData;
        boxMesh.position.set(x, y, z);
        pngGroup.current.add(boxMesh);
      });
  })
}, []);

// 만들때는 이렇게 묶어서 보내면 편하다.
renderLayerGroupedImage({ srcs: introduction, eachPosition: [
        { x: -10, y: 10, z: 0, userData: { url: "https://dev-russel.tistory.com" } },
        { x: 30, y: -7, z: 2 },
        { x: -55, y: -28, z: 4 }
      ]});

 

 

(추가) react portal과 이벤트 리스너

---

이건 webGL보다는 이벤트리스너에 대해서 알아야할 점인데,

이 raycaster를 사용하기 위해 설정했던 이벤트 리스너가 cleanup(해당 컴포넌트가 destroy)되기 전까지는 계속 유지된다는 점을 유의해야한다.

그러니까 모달(react-portal)같은 걸 다룬다고 했을 때, 아예 다른 id에서 그려지지만, 아직 webGL을 포함하는 컴포넌트가 살아있기 때문에 모달의 마우스 움직임에서도 계속 raycasting이 되고 있고, 클릭했을 때 뜬금없는 사이트들이 나올 수 있다는 점이다.

 

해결방법은 의외로 간단한데, 모달을 열기 위해 사용했던 state로 raycasting을 막아주면 된다.

 

const onClickObjectHandler = useCallback((e: MouseEvent) => {
    pointer.current.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
    raycaster.current.setFromCamera(pointer.current, camera.current);
    
    // modal이 열려있으면 casting x.
    if (isModalOpened) return;
    const intersects = raycaster.current.intersectObjects(pngGroup.current.children);
    for (const intersect of intersects) {
      if (intersect.object.userData?.url) {
        window.open(intersect.object.userData?.url, "_blank");
        break;
      }
    }
  }, [isModalOpened]);