r3f-router

R3F Router

タスクの要件に基づいて、5 つの専門的な React Three Fiber スキルにルーティングします。

ルーティングプロトコル

1. 分類 — ユーザーのリクエストから主なタスクの種類を特定します
2. 照合 — 最も強く一致するスキルを見つけます
3. 組み合わせ — ほとんどの R3F タスクでは、2〜4 個のスキルを組み合わせる必要があります
4. 読み込み — 実装前に、照合した SKILL.md ファイルを読みます

クイックルーティング

Tier 1：コア（常に検討）

タスクの種類	スキル	主なシグナルワード
シーンのセットアップ	r3f-fundamentals	canvas, scene, camera, lights, render, useFrame
カスタム形状	r3f-geometry	geometry, vertices, bufferAttribute, instancing, mesh
表面の見た目	r3f-materials	material, shader, texture, uniform, color, PBR

Tier 2：拡張（必要に応じて追加）

タスクの種類	スキル	主なシグナルワード
最適化	r3f-performance	performance, FPS, draw calls, LOD, culling, memory
ヘルパー／コントロール	r3f-drei	OrbitControls, useGLTF, Text, Environment, Html

シグナルの照合ルール

優先順位

複数のシグナルがある場合は、次の優先順位で判断します。

1. 明示的なコンポーネント — 「OrbitControls を追加」→ r3f-drei
2. 具体的な手法 — 「instancing を使う」→ r3f-geometry
3. 問題領域 — 「カスタムシェーダー」→ r3f-materials
4. デフォルトの Tier — r3f-fundamentals を使用します

確信度の評価

• 高（シグナル 3 個以上） — すぐにルーティングします
• 中（シグナル 1〜2 個） — r3f-fundamentals をベースにルーティングします
• 低（シグナル 0 個） — ユーザーに確認します

よくある組み合わせ

基本的な 3D シーン（3 スキル）

r3f-fundamentals → Canvas, camera, lights, render loop
r3f-drei         → OrbitControls, Environment, helpers
r3f-materials    → MeshStandardMaterial, textures

連携：Fundamentals がシーン構造を提供し、drei がコントロールと環境を追加し、materials が見た目を定義します。

カスタムシェーダーエフェクト（3 スキル）

r3f-fundamentals → Scene setup, useFrame for animation
r3f-geometry     → Custom BufferGeometry if needed
r3f-materials    → ShaderMaterial, uniforms, GLSL

連携：Fundamentals がレンダーループを処理し、materials がシェーダーの基盤を提供します。

パーティクルシステム（4 スキル）

r3f-fundamentals → Scene, camera, render loop
r3f-geometry     → InstancedMesh, buffer attributes
r3f-materials    → Custom particle shader
r3f-performance  → Optimization, draw call reduction

連携：Geometry がインスタンシングを提供し、materials がパーティクルのレンダリングを処理し、performance がスムーズなアニメーションを実現します。

製品のビジュアライゼーション（4 スキル）

r3f-fundamentals → Scene structure
r3f-drei         → useGLTF, Environment, ContactShadows, OrbitControls
r3f-materials    → PBR materials, environment mapping
r3f-performance  → LOD, texture optimization

連携：Drei がモデルを読み込み、スタジオ環境を提供し、materials がリアルなレンダリングを実現します。

大規模なシーン（4 スキル）

r3f-fundamentals → Base scene management
r3f-geometry     → Merged geometry, instancing
r3f-performance  → LOD, culling, lazy loading
r3f-drei         → Bounds, Preload, Detailed

連携：パフォーマンス戦略と geometry の最適化を組み合わせて、スムーズなレンダリングを実現します。

判断テーブル

シナリオ	モデル読み込み	カスタム形状	カスタムシェーダー	最適化	ルーティング先
シンプルなビューアー	はい	いいえ	いいえ	いいえ	fundamentals + drei
カスタムジオメトリ	いいえ	はい	いいえ	いいえ	fundamentals + geometry
シェーダーアート	いいえ	場合による	はい	いいえ	fundamentals + materials + geometry
ゲーム／シミュレーション	場合による	はい	場合による	はい	すべてのスキル
製品のビジュアライゼーション	はい	いいえ	いいえ	場合による	fundamentals + drei + materials
パーティクル	いいえ	はい	はい	はい	fundamentals + geometry + materials + performance

スキルの依存関係

r3f-fundamentals (foundation)
├── r3f-geometry (extends fundamentals)
├── r3f-materials (extends fundamentals)
├── r3f-drei (extends fundamentals)
└── r3f-performance (applies to all)

• 常に r3f-fundamentals から始めます
• r3f-geometry と r3f-materials は一緒に使われることがよくあります
• r3f-drei を使うと、手動での実装を置き換えられます
• r3f-performance は、どのような組み合わせにも最適化を適用します

フォールバック動作

• 不明なタスクの種類 → r3f-fundamentals + r3f-drei から始めます
• 明確なシグナルがない → 「何をレンダリングしようとしていますか？」と「特定のエフェクトが必要ですか？」と尋ねます
• シグナルが競合する → 手動での実装より r3f-drei の抽象化を優先します

クイック判断フローチャート

User Request
     │
     ▼
┌─────────────────────┐
│ Need 3D model?      │──Yes──▶ r3f-drei (useGLTF)
└─────────────────────┘
     │ No
     ▼
┌─────────────────────┐
│ Custom geometry?    │──Yes──▶ r3f-geometry
└─────────────────────┘
     │ No
     ▼
┌─────────────────────┐
│ Custom shader?      │──Yes──▶ r3f-materials
└─────────────────────┘
     │ No
     ▼
┌─────────────────────┐
│ Performance issues? │──Yes──▶ r3f-performance
└─────────────────────┘
     │ No
     ▼
┌─────────────────────┐
│ Controls/helpers?   │──Yes──▶ r3f-drei
└─────────────────────┘
     │ No
     ▼
r3f-fundamentals (default)

参考資料

詳細なパターンについては、各スキルファイルを参照してください。

• /mnt/skills/user/r3f-fundamentals/SKILL.md
• /mnt/skills/user/r3f-geometry/SKILL.md
• /mnt/skills/user/r3f-materials/SKILL.md
• /mnt/skills/user/r3f-performance/SKILL.md
• /mnt/skills/user/r3f-drei/SKILL.md