20260120 three.js를 공부해보았다.

 

이번 유레카에서 종합 프로젝트를 진행하는데 3D 로딩 UI를 구현해보고 싶어서 three.js를 사용해보기로 했다. 로딩 중 UI를 구현할 때 CSS로 애니메이션을 넣어서 구현할 수도 있지만 새롭게 three.js를 공부도 해보고 3D처럼 움직일 수 있게 보이도록 해보고 싶었다.

 

Three.js란?

Three.js는 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트 라이브러리이자 API이다.

 

Three.js는 특정 웹 브라우저나 플러그인에 의존하지 않고 자바스크립트 언어를 사용하여 웹 컨텐츠의 한 부분으로서 그래픽 처리 장치(GPU)에서 가속되는 3차원 컨텐츠를 만들 수 있도록 해준다. 이는 WebGL의 출현으로 인하여 가능하게 되었다.

 

Three.js의 핵심 개념

Three.js에서 가장 기본이 되는 구조는 renderer, scene, camera이다.

Scene

Scene은 말 그대로 3D 세계 전체를 담는 공간이다. 화면에 보여줄 모든 객체, 빛, 카메라는 Scene 안에 포함된다.

현실 세계로 비유하면 하나의 무대라고 생각하면 된다.

Camera

Camera는 그 Scene을 바라보는 시점이다. 같은 장면이라도 카메라의 위치나 각도에 따라 전혀 다른 화면이 만들어진다.

Three.js에서는 주로 PerspectiveCamera를 사용하며, 이는 사람이 실제로 보는 것과 유사한 원근감을 제공한다.

렌더러에게 데이터를 넘기는 역할을 한다.

Renderer

렌더러는 three.js의 핵심 객체이다. 렌더러를 쉽게 정의해보면 scene과 camera 객체 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할이다. 내부적으로는 WebGL을 사용해 브라우저의 cnavas 요소에 픽셀 단위로 그림을 그린다.

 

이 세 가지는 항상 함께 동작하며, 

Scene을 Camera로 바라본 결과를 Renderer가 화면에 출력한다는 흐름이 Three.js의 기본 구조다.

 

Mesh (Geometry + Material)

3D 공간에 존재하는 실제 물체는 Mesh로 표현된다. Mesh는 두 가지 요소의 조합으로 이루어진다.

 

Geometry는 물체의 형태를 정의한다.

정점(vertex), 면(face) 정보로 구성되어 있으며, 큐브, 구, 원통 같은 기본 도형부터 복잡한 모델까지 모두 Geometry로 표현된다.

Material은 물체의 겉모습을 결정한다.

색상, 질감, 빛 반사 여부 등을 정의하며, 같은 Geometry라도 어떤 Material을 사용하느냐에 따라 완전히 다른 느낌의 객체가 된다.

 

이 둘이 결합되어 하나의 Mesh가 되고, 이 Mesh를 Scene에 추가해야 화면에 보이게 된다.

 

애니메이션의 기본 구조

Three.js에서 애니메이션은 CSS 애니메이션처럼 자동으로 움직이는 개념이 아니다.
대신 개발자가 매 프레임마다 상태를 직접 업데이트하는 방식이다.

이때 사용하는 것이 requestAnimationFrame이다.

requestAnimationFrame은 브라우저가 화면을 다시 그리기 직전에 실행할 함수를 등록하는 API로, 성능에 맞게 최적화된 애니메이션을 만들 수 있게 해준다.

 

Three.js의 애니메이션 구조는 보통 다음과 같은 흐름을 가진다.

 

1. 애니메이션 루프 함수 정의
2. 그 안에서 객체의 상태 변경 (위치, 회전, 스케일 등)
3. Renderer로 다시 렌더링
4. requestAnimationFrame으로 다음 프레임 예약

이 구조 덕분에 큐브를 회전시키거나 카메라를 이동시키거나 마우스 입력에 따라 화면을 반응하게 만들 수 있다.

중요한 점은, Three.js의 애니메이션은 “시간에 따른 값의 변화”를 직접 관리한다는 것이다.
그래서 애니메이션이 많아질수록 불필요한 계산이나 렌더링을 줄이는 것이 성능에 큰 영향을 미친다.

핵심 요약

 

• Three.js는 매 프레임마다 화면을 다시 그리는 구조다
• render는 한 번이 아니라 계속 호출된다
• 애니메이션은 자동이 아니라 상태 변경 + 재렌더링의 반복
• 이 흐름을 이해해야 성능 최적화도 가능해진다

프로젝트에 적용해서 실습

프로젝트의 로딩 UI에 Three.js를 적용해보려고 했다.

 

AI의 도움을 받아 코드를 구현했다. 기본적인 Three.js에 대해 공부했다고 쉽게 구현할 수 있는 난이도는 아니었다.

폴도 구조는 위와 같이 구성했다.

 

위처럼 구조를 짠 이유는 유지보수면과 같이 협업하는 팀원들도 코드를 이해하는 데 어려움을 겪지 않게 하기 위함이었다. 또한 추가로 구현하거나 최적화하기에도 훨씬 좋아보였다. 

프로젝트에서 공용 컴포넌트로 쓰일 예저이라 위와 같이 interface를 만들었다.

기본적으로 float효과를 주기 위해 three.js를 쓰지만 크게 움직일 필요가 없는 부분은 false로 값을 줄 수 있게 했고

마스코트 이미지를 각자 사용하고 싶은 것으로 넣을 수 있게 짰다. 또한 움직이는 속도나 회전하는 범위 크기값도 조절할 수 있게 했다.

 

실제 적용해본 마스코트 모습

느낀 점

새로운 걸 공부하고 적용해보는 재미가 있었다. 제대로 이해하고 활용해볼 정도는 아니지만 생각했던대로 구현이 된 것 같아 기분이 좋다. 다음에 또 제대로 적용해볼 기회가 생기면 다시 한번 더 깊게 공부하고 또 사용해보고 싶다. three.js!