- Threlte는 웹에서 인터랙티브 3D 앱을 빠르게 만들기 위해 Svelte의 반응형 컴포넌트 모델을 Three.js 위에 얹은 오픈소스 프레임워크임
<T.Mesh>같은 선언형 컴포넌트로 Three.js 객체를 구성하고, Svelte 라이프사이클을 통해 이벤트 구독과 상태 변경을 처리함- 기본 도구로 Rapier 물리 엔진, Theatre.js 애니메이션 도구,
@threlte/gltf,@threlte/extras를 함께 제공해 초기 3D 앱 구성을 줄여줌 <T>컴포넌트만으로 부족한 동작은 타입 안전한 Plugins로 커스텀 props·이벤트를 추가해 확장할 수 있음- Svelte 생태계에서 선언형 THREE 라이브러리와 WebGL 앱 제작 도구를 찾는 개발자에게 문서화와 사용성이 강점으로 평가됨
Svelte 방식으로 Three.js 장면 구성
- Threlte는 Svelte와 Three.js 위에 만들어진 웹용 3D 프레임워크임
- 선언형·반응형 컴포넌트로 인터랙티브 3D 앱을 빠르게 구축하는 데 초점을 둠
- Svelte 컴포넌트의 라이프사이클을 활용해 다음 작업을 처리할 수 있음
- 이벤트 구독
- 상태 변경 처리
- 컴포넌트 기반 동작 연결
- 예시 코드는
<T.Mesh>안에 지오메트리와 머티리얼을 배치하고,scale,position.x,onclick같은 props와 이벤트를 직접 지정함 - 첫 장면 구성은 Make Your First Scene에서 확인 가능함
함께 제공되는 도구와 확장 방식
- Threlte는 “batteries included” 구성을 내세우며 3D 앱 제작에 필요한 도구를 함께 제공함
- Rapier: 물리 엔진
- Theatre.js: 전문 모션 디자인 도구셋을 갖춘 애니메이션 라이브러리
@threlte/gltf: GLTF 파일을 Threlte 컴포넌트로 변환하는 도구@threlte/extras: 시작에 필요한 컴포넌트와 유틸리티 모음
- Rapier 예시는
RigidBody,AutoColliders,<T.Mesh>를 조합해 구체 형태 충돌체와 메시를 구성함 @threlte/extras예시는Float와GLTF컴포넌트로/models/flower.glb모델을 불러오고, 그림자·위치·스케일을 지정함@threlte/extras사용법은 Documentation에서 확인할 수 있음- Plugins는
<T>에 커스텀 props와 커스텀 이벤트를 타입 안전하게 추가하는 확장 방식임- 예시 플러그인은
injectPlugin으로lookAtprop을 등록하고,$effect안에서args.ref.lookAt(args.props.lookAt)을 호출함 - 고급 사용법은 Plugins 문서에 정리돼 있음
- 예시 플러그인은
- 시작 문서와 커뮤니티 링크도 제공됨