프론트엔드
three.js in Next.js
두줄요약
WebGL을 추상화한 three.js의 핵심 구성과 애니메이션 루프를 설명했습니다. Next.js에서 useRef·useEffect로 바닐라 three.js 도넛을 렌더링하는 패턴을 제시했습니다.
구조와 흐름
- p2.js 물리 엔진의 2D 좌표 계산, 3D 좌표 변환, three.js 렌더링으로 구성한 브라우저 핀볼 사례
- WebGL의 저수준 그래픽 API를 three.js로 추상화해 3D 렌더링 코드와 구현 부담 축소
- Scene, PerspectiveCamera, WebGLRenderer, Geometry·Material·Mesh를 통한 3D 월드 구성
선택 이유
- WebGL 직접 사용 시 높은 학습 곡선과 애니메이션 구현 코드량 문제
- GPU 기반 렌더링과 플러그인 없는 브라우저 동작 환경 활용
- 바닐라 three.js 직접 사용을 통한 래퍼 라이브러리 의존 최소화
구조와 흐름
- BufferGeometry와 position BufferAttribute를 통한 꼭짓점 기반 메시 정의
- requestAnimationFrame 재귀 호출로 회전값 갱신과 장면 렌더링 반복
- 디스플레이 주사율 동기화 및 백그라운드 탭 자동 중지 특성
적용해볼 점
- Next.js 페이지에서 three.js 컴포넌트 렌더링과 라이브러리 설치
- useRef로 렌더러 DOM 요소를 컨테이너 div에 연결
- useEffect의 정리 함수에서 renderer DOM 제거로 언마운트 시 메모리 누수 방지
