소개

react-three-fiber를 사용한 3차원 워드 클라우드 예제를 살펴 봅니다.

Spherical word-cloud

3차원 word cloud를 구성하기 위해서는 먼저 각 단어의 위치를 3차원 공간상에서 어떻게 배치할 것인지 고민해야 합니다.

먼저 three.js의 Spherical 객체 즉 Spherical coordinate system - Wikipedia에 대한 이해가 필요합니다. x, y, z라는 3차원 평면의 위치를 지정하는 방식 대신, 반지름(radius, r), z축으로부터 각($\phi$), x축으로부터 각($\theta$)을 사용하는 구면좌표계를 사용합니다.

예제에서는 count라는 값으로 단어의 phi, theta 값을 결정합니다. 지도로 치면 각각 위도와 경도가 되겠네요. phi는 위도 이기 때문에 0~180도의 값을 가지고, theta는 0~360도의 값을 가집니다. 실제 단위는 radian을 사용하기 때문에 각각 아래와 같은 수식으로 간격을 구합니다.

const phiSpan = Math.PI / (count + 1);
const thetaSpan = (Math.PI * 2) / count;

본 글에는 이해를 돕도록 random word 대신 phi, theta 값을 표시하였습니다.

drei의 Billboard 컴포넌트를 사용하여 항상 카메라를 바라보는 평면을 만들어 Text를 배치합니다.

Text 객체의 hover 시 색 변화를 위해 useFrame을 사용하여 각 frame 별로 lerp 0.1을 적용하여 색 변화 에니메이션을 적용하고 있습니다.