jonobr1/two.js

これは何？

主な機能

• 01同じシーンをWebGL、Canvas 2D、SVGでレンダリングできます。
• 02グループ、変形、フレームごとの更新に対応したscenegraphを備えています。
• 03scriptタグで読み込めるビルド、npmパッケージ、ES6 modulesを提供しています。
• 04node-canvasを使ったNode.jsでのheadlessレンダリングに対応しています。
• 05必要なレンダラーだけを含むカスタムビルドを作成できます。

ユースケース

• Web向けのインタラクティブな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 とは？

Web向けのレンダラー非依存な2D描画API。WebGL、Canvas 2D、SVGで同じシーンを描画できます。 Two.jsは、モダンブラウザーで2Dグラフィックスを作成するためのJavaScriptライブラリです。ひとつのAPIで図形、テキスト、グループを記述でき、描画コードを変更せずに同じシーンをWebGL、Canvas 2D、SVGでレンダリングできます。

two.js は無料で使えますか？ライセンスは？

two.js は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

two.js は今もメンテナンスされていますか？

活発にメンテナンス中。two.js の最終コミットは 2026年11月3日 です。

two.js は何に使えますか？

Web向けのインタラクティブな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