Communitygithub.com

アニメーション3Dショート(three.js + Remotion)

2Dの漫画風キャラクターが描かれた3D世界のスタイルで、ナレーション、CC0効果音、シーンに合わせたBGMを備えた縦型ショートアニメ(約40~90秒)を制作します。

アニメーション3Dショート(three.js + Remotion) とは?

このスキルは、「あの橋のビデオみたいな」「漫画の3Dスタイルで」といったリクエストや、歴史・科学の物語を漫画キャラクターと3D世界で表現したい場合に、three.jsとRemotionを使って高品質な縦型ショート動画(1080x1920、30fps)を自動生成します。ユーザーは台本の承認と最終静止画の確認という2つのタイミングで介入するだけで、後は音声生成、効果音・BGMの選定、レンダリング、ミキシング、QAまでをパイプラインに従って自動処理します。スキルはClaude CodeなどのAIエージェント向けに設計されており、bashコマンド、Remotion、three.js、Pythonスクリプトを連携させ、CGI風の「ペイントされた3D世界の中の2Dキャラクター」という独自スタイルを実現します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nnesu/animated-shorts/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

アニメーション3Dストーリーショート(three.js + Remotion)

コマンドはプロジェクトルートからBash(PowerShell不可)で実行します。references/ と templates/ はこのスキルからの相対パスです。SK = .claude/skills/cartoon-3d-short です。

src/videos/ にある完成済みのショートは決して編集しないでください。コードを学ぶためにそれらを読まないでください。references/API.md が地図です。

references/STYLE_BIBLE.md と references/reports/ は別のチャンネルからの学習資料です。そのチャンネルのスクリプト、キャラクター、ショットを決してコピーせず、ナレーションや説明でそのチャンネル名を決して出さないでください。

ルール

  • キャプションやラベルは付けません。英語のみ。一定の声のトーン。ジョークは調査済みの事実に基づきます。
  • すべてのショットで、地平線は建物、幹の隙間に2~3mの低木がある木々、または遠くの丘の後ろに隠します。カメラが見える範囲だけを埋めます。セットは豊かに:混雑した群衆、装飾品、テクスチャ、旗。
  • 最終出力は1080x1920、30fps、--scale は使用しません。
  • ミックス:ナレーション、ナレーションより約6dB低いフリーのCC0効果音、ナレーションの下にダッキングされたシーンベースのBGM(常に1つの連続トラックではない)、全体のミックスは-15 LUFS。
  • フリーで著作権フリーの効果音と3Dモデルの恒久的な承認:ファイルのページでライセンスを確認し、帰属表示必須・非営利・継承をスキップし、_sfx/LICENSES.md に記録し、何を取得したか、どれくらいのサイズかを記載します。ログイン、支払い、その他のダウンロード、またはインストールされていないパッケージの実行の前に質問します。
  • 静止画チェックリスト(references/QA.md):最初のフルセットとレンダリング前にもう一度、Opus-mediumエージェントによるチェック。その間に自分で再チェックを行い、ユーザーが静止画を承認します。絶対的なスコアはゲート条件ではありません。
  • 修正は変更されたチャンクのみを再レンダリングします(--redo)。ビデオ全体を再レンダリングすることはありません。
  • すべてのステップの後に保存します。ユーザーのための2つの停止ポイント:スクリプトの承認、および最終レンダリング前の最終静止画の承認。それ以外は、質問せずに納品まで作業を進めます。

パイプライン

  1. トピックと事実。 視覚的で物理的な原因と結果を持つ1つの驚くべき実話と、日常的なアナロジー。出典付きの事実は src/videos/<name>/SCRIPT.md の先頭に記述します。
  2. スクリプト。 長さはストーリーに従います。単語数 = 秒数 × 1秒あたりの単語数。選択された声の1文サンプルから測定します(サンプルがない場合は3と仮定し、テイク後に確認します)。ビート:フック(不条理な事実、1行)、設定(年、場所、誇り)、アクション(3~4段階のエスカレートするビート)、スナップ、無表情なセリフ(「幸運なことに… / 不運なことに…」)、説明(1つのアイデア、日常的なアナロジー)、結果、コールバックのひねり。視聴者がすでに見ているものは決して説明しません。レイアウトのみ:templates/SCRIPT_example.md。ここで停止し、ユーザーがスクリプトを承認するまで待ちます。
  3. 音声。 ユーザーが _voiceover/<name>/voice_raw.wav にテイクを生成します。その後、python scripts/voice_trim.py _voiceover/<name>/voice_raw.wav _voiceover/<name>/voice.wav と python scripts/words_whisper.py _voiceover/<name>/voice.wav _voiceover/<name>/words.json を実行します。すべてのタイミングは words.json に基づきます。それを読まずに word@frame として出力し、間違った単語を短いスクリプトで修正します。kept pauses 行(references/GOTCHAS.md 「音声」)に従って行動します。
  4. ビデオフォルダ。 templates/starter/ 内の4つのファイルを src/videos/<name>/ にコピーし、Short.tsx を <Name>.tsx に、その中の StarterShort / STARTER_FRAMES をリネームし、src/Root.tsx にコンポジションを登録します。これらはストーリーデータと EXAMPLE とマークされた2ショットのデモのみを保持します。エンジンは src/shared/ にあります。編集前に references/API.md を読んでください。src/shared/ または scripts/ がないか、ファイルが不足している場合は、templates/shared/ または templates/scripts/ からコピーします。
  5. 小道具スイープ。 各ビートについて、public/kenney/INDEX.txt をgrepし、選択結果を src/videos/<name>/PROPS.md に表形式で記録します。足りない小道具:フリーのCC0パック(references/GOTCHAS.md)を public/kenney/<pack>/ に取得し、INDEX.txt に追加し、<pack>/<model> を world.ts の KENNEY に追加します。
  6. ショット計画 を story.ts に記述:TOTAL = ceil(音声の秒数 x 30)。その後、SHOTS、XFADE、FLASH_AT、CAMS、KICKS、DOF_V2。視覚的なリアクションは、対応する単語の0~3フレーム前に配置します。すべてのホールドはゆっくり動きます。すべてのループモーションには明示的な切り替え時刻を指定します。
  7. ショットの構築 は EXAMPLE 部分を置き換えて行います。ハウスルックはエンジンに組み込まれています(references/LOOK.md)。1つのビデオのために src/shared/ を編集しないでください。
    • ワールド(world.ts):セット、小道具、マテリアル、pose() 内の動く小道具。空、ライト、町、港、太陽、視線カリングはエンジンから提供されます。主要な小道具には prop() に keep = true を渡します。
    • キャラクター(cast.ts):衣装と、各ステージングに対する1つの stage() ケース。カード、アウトライン、まばたき、影はエンジンから提供されます。
    • コンポジション(<Name>.tsx):名前と poolShots のみ。ポストチェーン(インク、レンズブラー、ブルーム、トーンマップ、グレード)はエンジンにあります。
  8. 静止画チェック。長いレンダリングの前に行います(references/QA.md):すべてのショットの中間フレーム静止画、スクリプト化されたチェック、エージェントチェック、修正と自己チェック、2回目のエージェントチェック、修正と自己チェック。ここで停止し、ユーザーが静止画を承認するまで待ちます。
  9. サウンド準備(references/SOUND.md):_sfx/<name>_events.json の効果音イベント、_sfx/<name>_music_cues.json のBGMキュー。
  10. 最終レンダリング(references/RENDER.md):REMOTION_TMP=C:/remotion-tmp node scripts/render_chunks.mjs <Comp> out/<name>/video.mp4 <TOTAL>。
  11. ミックスとQA。 BGMを組み立て(music_cues.py、references/SOUND.md 参照)、その後 python SK/templates/audio/build_mix.py _voiceover/<name>/voice.wav out/<name>/video.mp4 out/<name> _sfx/<name>_events.json [_sfx/<name>_music.wav] を実行して video_final.mp4 を書き出します。その後 python scripts/bridge_shots.py src/videos/<name>/story.ts out/<name>/shots.json と python scripts/short_qa.py out/<name>/video_final.mp4 out/<name>/qa out/<name>/shots.json --voice _voiceover/<name>/voice.wav を実行し、終了コード0でなければなりません。render_chunks.mjs ... --redo A-B,C-D で修正し、再度ミックスとQAを行います。最終ビデオに対するユーザーノート:references/QA.md 「ユーザーレビュー」。
  12. 納品。 video_final.mp4 を送信し(30MB超の場合は小さいプレビューとパスを添えて)、C:/remotion-tmp 内のこのショートのバンドルフォルダを削除し、メモリを更新します。

参照ファイル

ファイル読むタイミング
references/QA.md静止画チェック、チェックリストプロンプト、short_qa
references/SOUND.md効果音ライブラリ、BGMキュー、ミックス
references/RENDER.mdレンダリング設定、パッチループ、再開
references/API.mdスターターファイルを編集する前:何をどこに書くか、関数シグネチャ
references/GOTCHAS.md音声、小道具とセット、フレーミングの落とし穴、このPC
references/LOOK.mdハウスルックの値、カメラとキャラクターのルール
references/LOOK_MATCH.md元の参照ルックまたはルックマッチパスのみ
references/house/GRADER_PROMPT.mdペアワイズA/B比較、ルックを変更する場合のみ

スキル自体(ドキュメント、スターター、エンジン、スクリプト)を変更する場合:最初に MAINTAINING.md を読んでください。

関連スキル