mcpField
F
fal-regenerate-3d

fal-regenerate-3d

github.com/fal-ai-communityクリエイティブ・メディア257397 回インストール24 週間前に更新
リポジトリ

fal-regenerate-3d について

fal-regenerate-3dは、生成した3Dアセットを使い、静的なThree.jsキャラクター選択体験を構築するスキルです。キャラクター、相棒、マテリアル、動画背景の一連の制作手順を示し、ブラウザー上で追加キャラクターを作成する機能も含みます。

主な機能

  1. 01リグとアニメーション付きキャラクターGLBの生成
  2. 02相棒クリーチャーGLBの作成
  3. 03キャラクター別PBR床マップの生成
  4. 04バイオームをテーマにしたループ動画背景
  5. 05アセットを静的Three.jsページに同梱
  6. 06ブラウザー上でのキャラクター生成

活用シーン

  1. 01複数キャラクターの3Dウェブ体験の構築
  2. 02キャラクターと相棒の一式アセット制作
  3. 03訪問者によるブラウザー上でのキャラクター生成と追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fal-ai-community/skills --skill fal-regenerate-3d

インストール後、Claude Code で/fal-regenerate-3dを入力して読み込まれたか確認します。

詳細

fal-regenerate-3d スキル

ランタイム： アセットの生成手順は genmedia CLI（FLUX.2 / GPT-Image-2 / Meshy v6 / Seedance など）で実行します。最終成果物は静的な HTML ページで、Three.js を使用し、生成されたアセットはページにバンドルされます。コマンドの構文については genmedia スキルを参照してください。まだインストールされていない場合は、一度 genmedia init を実行してください。

fal.ai のモデルを使用して、洗練された複数キャラクター対応の 3D ウェブ体験を制作するためのエンドツーエンドのレシピです。 このレシピは fal-roster.vercel.app を支えています。10 種類の個性的なオペレーター、それぞれに合った相棒のクリーチャー、環境をテーマにした床のテクスチャ、アニメーション背景、カラーパレットを備えたサイバーパンクなキャラクターセレクターです。

生成されるもの

各キャラクターについて、次のものが生成されます。

  • スタイライズされた 3D キャラクターの GLB（リギングとアニメーションを施し、ファイルにベイク済み）
  • 相棒のクリーチャーの GLB（キャラクターに合ったテーマの小型静止モデル）
  • キャラクターごとの PBR 床（ベースカラー／ノーマル／ラフネス／メタルネスをすべて生成）
  • バイオームに合わせたループ動画の背景
  • UI 全体を制御する 3 色のパレット（CSS カスタムプロパティ）
  • ロスターカード用のポートレートの切り抜き

すべてを Three.js のシーンを含む単一の静的 HTML ページにパッケージ化します。圧縮後の GLB の合計サイズは約 25～35 MB です。

パイプライン

1. GPT-Image-2 → 1024x1536 character full-body T-pose (per character)
2. Meshy v6 → image-to-3d, enable_rigging=true, animation_action_id={chosen}
 → animated GLB (idle, dance, alert, etc.)
3. GPT-Image-2/edit → companion creature image, color-locked to character palette
4. Meshy v6 → image-to-3d, enable_rigging=false → static creature GLB
5. PATINA → fal-ai/patina/material/extract on the character image,
 returns basecolor + normal + roughness + metalness for the floor
6. Seedance 2.0 → fal-ai/bytedance/seedance-2.0/fast/image-to-video, 8s loop
7. gltf-transform CLI → resize 1024 → webp q80 → draco
 (typically 95–96% size reduction, ~400–800 KB final)
8. Three.js scene → MeshStandardMaterial floor with alphaMap circular cutout,
 mirrored reflection (refl.y = root.y, scale.y = -1),
 breathing animation on companions,
 per-character palette via CSS custom properties (--c1/--c2/--c3),
 per-character floor texture swap on character click,
 transition lines + radial flash on swap

CREATE-YOUR-OWN のフロー

FAL キーを持つ訪問者は、ブラウザー内で自分のキャラクターと相棒をリアルタイムに生成できます。

flux-2 klein 9b (text-to-image)
 └─ character full-body image
 ├─ Meshy v6 (rigged + animated) → character GLB
 └─ flux-2 klein 9b/edit → companion image
 └─ Meshy v6 (no rig) → companion GLB

費用：1 回の生成につき約 2～3 ドル（fal の呼び出し 4 回）。バックグラウンドで実行され、Generate を押すとモーダルが閉じるため、生成中もユーザーは体験を続けられます。CREATE YOUR OWN タイルは読み込み状態に変わり、その後、新しいキャラクターカードになります。カードには ↻ re-create ボタンが表示されます。

使用する主な fal エンドポイント

手順エンドポイント
キャラクター画像（キュレーション済み）openai/gpt-image-2
キャラクター画像（リアルタイム生成）fal-ai/flux-2/klein/9b
相棒の画像fal-ai/gpt-image-2/edit または fal-ai/flux-2/klein/9b/edit
3D キャラクター／相棒fal-ai/meshy/v6/image-to-3d
キャラクターごとの床の PBRfal-ai/patina/material/extract
背景動画fal-ai/bytedance/seedance-2.0/fast/image-to-video
ロゴ／アイコンのクリーンアップfal-ai/bria/background/remove

Meshy アニメーション ID

厳選したダンス／アイドル動作の ID（全リストは https://docs.meshy.ai/en/api/animation-library）：

IDアニメーション
0アイドル（デフォルト）
2警戒
36困惑（頭をかく）
48鏡を見る
64オールナイトダンス
405手を揺らす喜びのダンス
591ヒップホップダンス
64–83各種ポップダンスのバリエーション

Three.js シーンについてのメモ

  • 床： PlaneGeometry(7, 7, 220, 220) を放射状グラデーションの alphaMap で円盤状に切り抜きます。高密度のテッセレーションにより、実際の displacementMap（ベースカラーを高さとして使用）が可能になります。
  • 反射： ルートの複製に scale.y = -1、BackSide、depthWrite = false、renderOrder = -1 を設定します。原点が足元にあるキャラクターでは、refl.position.y = root.position.y にすると鏡像が表示されます。床の transparent = true; opacity ≈ 0.5 により、鏡像が床越しに見えるようになります。
  • 呼吸： フレームごとに scale.setScalar(base * (1 + sin(t*1.3)*0.025)) を適用し、相棒には Y 軸方向の小さな上下動も加えます。反射にも上下動を反映し、鏡像の一貫性を保ちます。
  • パレットの切り替え： :root.style.setProperty('--c1', hex) などを使用します。スパークライン、パルス、バー、モデルのピル、エッジマップのドットなど、すべての UI 要素の色は var(--c1)／var(--c2) から設定されます。
  • 床の切り替え： texLoader.load() で assets/floor/{charId}/ から PBR マップを 4 つ読み込み、古いテクスチャを破棄します。ベースカラーにはすでにキャラクターのテーマ色が適用されているため、floorMat.color を白に戻します。
  • トランジション： キャラクターをクリックすると、9 本の斜線がビューポートを横切り（@keyframes tfx-sweep）、放射状のフラッシュも表示されます。背景動画は 2 つの <video> 要素間でクロスフェードし、キャラクターの GLB はスライドアウトした後、新しいものがスライドインします。

参考実装

コストの目安（厳選した構成）

キャラクター1体あたりの費用：

ステップ概算費用
1 GPT-Image-2（キャラクター）$0.04
1 Meshy v6（リギング＋アニメーション）$0.80
1 GPT-Image-2/edit（コンパニオン）$0.04
1 Meshy v6（コンパニオン、静止）$0.20
1 PATINA（床、4マップ）$0.04
1 Seedance fast（背景動画）$0.08
キャラクター1体あたりの合計~$1.20
キャラクター10体~$12

実行時の処理は並列化しやすく、元のキャラクター10体のセットは各ステージで9件のジョブを同時に実行し、実時間で約10分で生成されました。

コメント

Markdown 対応