r3f-router

R3F 路由器

根据任务需求，路由到 5 个专用的 React Three Fiber 技能。

路由协议

1. 分类 — 根据用户请求识别主要任务类型
2. 匹配 — 找出信号匹配度最高的技能
3. 组合 — 大多数 R3F 任务需要组合使用 2-4 个技能
4. 加载 — 实施前阅读匹配的 SKILL.md 文件

快速路由

第 1 层：核心（始终考虑）

任务类型	技能	主要信号词
场景设置	r3f-fundamentals	canvas、scene、camera、lights、render、useFrame
自定义形状	r3f-geometry	geometry、vertices、bufferAttribute、instancing、mesh
表面外观	r3f-materials	material、shader、texture、uniform、color、PBR

第 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. 问题领域 — “自定义 shader” → r3f-materials
4. 默认层级 — 回退到 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 定义外观。

自定义 Shader 效果（3 个技能）

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

组合方式：Fundamentals 负责渲染循环，materials 提供 shader 基础设施。

粒子系统（4 个技能）

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

组合方式：Geometry 提供 instancing，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

组合方式：结合 performance 策略与 geometry 优化，确保渲染流畅。

决策表

场景	模型加载	自定义形状	自定义 Shader	优化	路由到
简单查看器	是	否	否	否	fundamentals + drei
自定义几何体	否	是	否	否	fundamentals + geometry
Shader 艺术	否	可能	是	否	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