[React Three Fiber] 페이지 이동하기 aka 라우팅 (Feat.우여곡절)

 

React Three Fiber를 이용해 위와 같은 화면을 구현했다.

다음 스텝은 각 이미지를 클릭하면 각 링크로(Router) 이동하는 것이다.

 

 

1. wouter - 실패

 

아래의 예제에 나오는 wouter 라이브러리를 통해 (react-router-dom과 크게 달라보이지 않지만) 링크를 이동시키는 것을 구현했다.

https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js%3A19%2C12-19%2C16

https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js%3A19%2C12-19%2C16

원인 : 네 개 중, 두 개는 3D지만, 나머지 두 개는 3D가 아니다.

3D인 화면으로 router가 이동해도 위의 화면에 사용된 Canvas 내에 다시 Canvas를 렌더링한다.

때문에 온전하게 Link 이동하지 않고, 상하 구조로 두개의 Canvas 가 동작된다.

이는 3D가 아닌 페이지도 동일하다.

예제에서는 Canvas 는 하나고 Canvas를 제외한 Mesh 컴포넌트만 렌더링하기에 가능한 것으로 보인다.

만약 컴포넌트를 나눈다고 해도, 3D가 아닌 페이지는 해결되지 않기 때문에 예제와 같이 하는 것은 실패로 결론지었다.

 

2. next/navigation - 성공

각 이미지는 Image 라는 react-three/drei 내 컴포넌트를 사용중이다.

onClick 이벤트에 next/navigation 내장훅인 useRouter를 사용해서 링크를 이동하도록 했더니 성공!

생각보다 next가 많은 일을 해주는구나ㅠ

<Image
      ref={ref}
      url={src}
      transparent
      side={THREE.DoubleSide}
      onPointerOver={pointerOver}
      onPointerOut={pointerOut}
      onClick={() => router.push(url)}
      {...props}
    >