theatre-js/theatre

개요 웹을 위한 모션 디자인 에디터다. Three.js, React Three Fiber 등과 통합되어 3D 씬의 키프레임 애니메이션을 시각적 GUI로 편집할 수 있는 개발자 도구다.

핵심 내용 브라우저 내에서 타임라인과 키프레임 에디터를 통해 JavaScript 객체의 속성값 변화를 애니메이션으로 정의한다. Three.js, R3F, GSAP 등과 통합되며, 편집한 결과를 JSON으로 내보내 프로덕션 코드에 적용할 수 있다. 개발 모드에서는 GUI 에디터가, 프로덕션에서는 경량 플레이어가 동작한다.

기존 대비 차별점 기존에는 코드로만 작성하거나 After Effects 같은 외부 도구를 사용해야 했다. Theatre.js는 코드와 GUI 편집을 동시에 지원해 개발자가 브라우저에서 직접 3D 애니메이션을 시각적으로 조율할 수 있다.

활용 가능성 Three.js/R3F 기반 인터랙티브 웹 경험, 3D 제품 쇼케이스, 웹 애니메이션 스튜디오 도구, 크리에이티브 코딩 프로젝트에서 코드 없이 애니메이션 타이밍을 조정하는 데 활용할 수 있다.

참고 자료 - 원본