TypeScriptとThree.jsで63種の昆虫をモデルファイルなしで手続き的に生成する、ブラウザ上のインタラクティブな3D図鑑。
NomaDamas/CozyClay
シーンのブロッキング、キャラクターのポージング、カメラワークの編集を行い、AI動画モデルにショットを送れるブラウザベースのプリビズスタジオ。
- スター
- 807
- フォーク
- 93
- 未解決の Issue
- 13
- 最終コミット
- 昨日
これは何?
CozyClayは、Three.jsとReact Three Fiberで構築されたブラウザ上で動作するプリビジュアライゼーションスタジオです。プリミティブやセットピースでシーンをブロッキングし、リグ付きまたはリグなしのキャラクターを配置してポーズを付け、タイムライン上でカメラワークやカットを作成できます。
主な出力先はAI動画生成です。各ショットは、最初と最後のフレーム、グレーボックス動画、カメラJSON、プロンプトをまとめたキーフレームパックとしてエクスポートできます。また、mp4、深度パスと法線パス、ストーリーボードのコンタクトシート、OTIOカットリストとしても出力できます。対象モデルとしてSeedance 2.5、Kling 2、Veo 3、セルフホスト型のMiniMax-H3を想定しており、モデルの制限を超えるショットには警告を表示します。
スタジオには、静止画パネルを作成するStoryboardモード、画像・動画ノードを扱うWorkflowキャンバス(ComfyUIまたはfal)、そしてチャットパネル、MCPサーバー、`cclay` CLIからシーンを操作できるエージェントも備わっています。`npx cozyclay`でローカル実行できます。
主な機能
- 01プリミティブやセットピースでシーンをブロッキングし、ギズモで変形できます。
- 02リグ付きキャラクターにポーズを付けるか、ブロッキング用にリグなしのカプセル型フィギュアを使用できます。
- 03トップビュー上に描いたドリーレールを含め、タイムライン上でカメラワークやカットを作成できます。
- 04AI動画用に、キーフレームパック、mp4ショット、深度パスと法線パス、OTIOカットリストをエクスポートできます。
- 05単一の履歴ストアを使って、シーンの変更をすべて元に戻せます。
- 06チャット、MCP、ターミナルのCLIからAIエージェントを通じてスタジオを操作できます。
ユースケース
- 撮影前に映画、コマーシャル、ミュージックビデオのショットをプリビジュアライズする。
- ストーリーボードを作成し、それを動きのあるショットに仕上げる。
- カメラワークとキャラクターのブロッキングを制御しながらAI動画を生成する。
- バーチャルプロダクション用に、シーンの配置やキャラクターの動線をブロッキングする。
クイックスタート
- 1
npxでstudioを起動する
npx cozyclay - 2
空のルームではなく、同梱のスターターシーンを開く
npx cozyclay --scene city-block
使う前に知っておきたいこと
- Node.js 22.19以降とChromiumベースのブラウザーが必要です。
- エージェントプロバイダーや、falまたはComfyUI経由のVideoノードなど、一部の機能では独自のAPIキーが必要です。
トピック
よくある質問
- CozyClay とは?
- シーンのブロッキング、キャラクターのポージング、カメラワークの編集を行い、AI動画モデルにショットを送れるブラウザベースのプリビズスタジオ。 CozyClayは、Three.jsとReact Three Fiberで構築されたブラウザ上で動作するプリビジュアライゼーションスタジオです。プリミティブやセットピースでシーンをブロッキングし、リグ付きまたはリグなしのキャラクターを配置してポーズを付け、タイムライン上でカメラワークやカットを作成できます。
- CozyClay は無料で使えますか?ライセンスは?
- CozyClay は AGPL-3.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- CozyClay は今もメンテナンスされていますか?
- 活発にメンテナンス中。CozyClay の最終コミットは 2026年10月19日 です。
- CozyClay は何に使えますか?
- 撮影前に映画、コマーシャル、ミュージックビデオのショットをプリビジュアライズする。 ストーリーボードを作成し、それを動きのあるショットに仕上げる。 カメラワークとキャラクターのブロッキングを制御しながらAI動画を生成する。 バーチャルプロダクション用に、シーンの配置やキャラクターの動線をブロッキングする。
- CozyClay のインストール方法は?
- npxでstudioを起動する: npx cozyclay 空のルームではなく、同梱のスターターシーンを開く: npx cozyclay --scene city-block
- CozyClay はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/NomaDamas/CozyClay
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
1枚の画像から、メッシュファイルではなく、アニメーション対応のThree.js用TypeScriptコードでオブジェクトを再構築します。
テーマや脚本から、ストーリーボード作成からレンダリングまで一貫してAIショート動画やAI漫画ドラマを制作するオープンソースプラットフォーム。
トピックから、ナレーションやショットの尺、Google Flow向け動画プロンプト付きの棒人間アニメーション絵コンテを作成するAIスキル。
Three.jsやGSAPなどのWeb 3D・アニメーション技術をClaude Codeに教えるスキルとプラグイン集。
映像スタイルごとのClaude Codeスキル集。全フレームと音楽トラックをコードで生成して動画を制作します。