jonobr1/two.js

어떤 프로젝트인가요?

핵심 기능

• 01동일한 장면을 WebGL, Canvas 2D 또는 SVG로 렌더링합니다.
• 02그룹, 변환, 프레임별 업데이트를 지원하는 씬 그래프를 제공합니다.
• 03script 태그용 빌드, npm 패키지, ES6 모듈 형태로 제공됩니다.
• 04node-canvas를 통해 Node.js에서 헤드리스 렌더링을 지원합니다.
• 05필요한 렌더러만 포함하는 커스텀 빌드를 만들 수 있습니다.

활용 사례

• 웹에서 인터랙티브한 2D 애니메이션이나 모션 그래픽을 제작할 때.
• SVG와 canvas 출력을 전환해야 하는 벡터 일러스트를 그릴 때.
• 서버에서 2D 장면의 PNG 이미지를 생성할 때.
• React 등 번들러 기반 프런트엔드 앱에 가벼운 2D 그래픽을 추가할 때.

빠른 시작

1. 1

   npm으로 설치

   npm install --save two.js
2. 2

   minified 라이브러리를 HTML에 포함

   <script src="js/two.min.js"></script>

사용 전 알아둘 점

• !라이브러리 전체를 가져오면 모든 모듈이 로드되므로 아직 tree shaking을 지원하지 않습니다.

토픽

자주 묻는 질문

two.js은(는) 무엇인가요?

WebGL, Canvas 2D, SVG 중 원하는 방식으로 동일한 장면을 그리는 렌더러 독립형 웹 2D 드로잉 API입니다. Two.js는 최신 브라우저에서 2차원 그래픽을 만들 수 있는 JavaScript 라이브러리입니다. 하나의 API로 도형, 텍스트, 그룹을 정의하면 드로잉 코드를 바꾸지 않고도 동일한 장면을 WebGL, Canvas 2D 또는 SVG로 렌더링할 수 있습니다.

two.js은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

two.js은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

two.js은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. two.js의 마지막 커밋은 2026년 11월 3일입니다.

two.js은(는) 어디에 사용할 수 있나요?

웹에서 인터랙티브한 2D 애니메이션이나 모션 그래픽을 제작할 때. SVG와 canvas 출력을 전환해야 하는 벡터 일러스트를 그릴 때. 서버에서 2D 장면의 PNG 이미지를 생성할 때. React 등 번들러 기반 프런트엔드 앱에 가벼운 2D 그래픽을 추가할 때.

two.js는 어떻게 설치하나요?

npm으로 설치: npm install --save two.js minified 라이브러리를 HTML에 포함: <script src="js/two.min.js"></script>

two.js은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jonobr1/two.js