r3f-router

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

R3F Router

R3F 技能路由

Routes to 5 specialized React Three Fiber skills based on task requirements.

根据任务需求导向5种不同的React Three Fiber专业技能。

Routing Protocol

路由流程

Classify — Identify primary task type from user request
Match — Find skill(s) with highest signal match
Combine — Most R3F tasks need 2-4 skills together
Load — Read matched SKILL.md files before implementation

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

Quick Route

快速路由

Tier 1: Core (Always Consider)

第一层级：核心技能（始终需考虑）

Task Type	Skill	Primary Signal Words
Scene setup	`r3f-fundamentals`	canvas, scene, camera, lights, render, useFrame
Custom shapes	`r3f-geometry`	geometry, vertices, bufferAttribute, instancing, mesh
Surface appearance	`r3f-materials`	material, shader, texture, uniform, color, PBR

任务类型	技能	核心关键词
场景搭建	`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: Enhanced (Add When Needed)

第二层级：进阶技能（按需添加）

Task Type	Skill	Primary Signal Words
Optimization	`r3f-performance`	performance, FPS, draw calls, LOD, culling, memory
Helpers/Controls	`r3f-drei`	OrbitControls, useGLTF, Text, Environment, Html

任务类型	技能	核心关键词
性能优化	`r3f-performance`	performance, FPS, draw calls, LOD, culling, memory
辅助工具/控制器	`r3f-drei`	OrbitControls, useGLTF, Text, Environment, Html

Signal Matching Rules

信号匹配规则

Priority Order

优先级顺序

When multiple signals present, resolve by priority:

Explicit component — "add OrbitControls" →
```
r3f-drei
```
Specific technique — "use instancing" →
```
r3f-geometry
```
Problem domain — "custom shader" →
```
r3f-materials
```
Default tier — Fall back to
```
r3f-fundamentals
```

当存在多个信号时，按以下优先级处理：

明确组件 —— "添加OrbitControls" →
```
r3f-drei
```
特定技术 —— "使用实例化" →
```
r3f-geometry
```
问题领域 —— "自定义着色器" →
```
r3f-materials
```
默认层级 —— 回退到
```
r3f-fundamentals
```

Confidence Scoring

置信度评分

High (3+ signals) — Route immediately
Medium (1-2 signals) — Route with
```
r3f-fundamentals
```
as base
Low (0 signals) — Ask user for clarification

高（3个及以上信号） —— 直接路由
中（1-2个信号） —— 以
```
r3f-fundamentals
```
为基础进行路由
低（0个信号） —— 询问用户以明确需求

Common Combinations

常见技能组合

Basic 3D Scene (3 skills)

基础3D场景（3个技能）

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

Wiring: Fundamentals provides scene structure, drei adds controls and environment, materials define appearance.

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

说明：基础技能提供场景结构，drei添加控制和环境，材质定义外观。

Custom Shader Effect (3 skills)

自定义着色器效果（3个技能）

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

Wiring: Fundamentals handles render loop, materials provides shader infrastructure.

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

说明：基础技能处理渲染循环，材质提供着色器基础架构。

Particle System (4 skills)

粒子系统（4个技能）

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

Wiring: Geometry provides instancing, materials handles particle rendering, performance ensures smooth animation.

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

说明：几何技能提供实例化功能，材质处理粒子渲染，性能技能确保动画流畅。

Product Visualization (4 skills)

产品可视化（4个技能）

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

Wiring: Drei loads model and provides studio setup, materials ensures realistic rendering.

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

说明：Drei加载模型并提供工作室级设置，材质确保真实感渲染。

Large Scene (4 skills)

大型场景（4个技能）

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

Wiring: Performance strategies combined with geometry optimization for smooth rendering.

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

说明：性能策略结合几何优化实现流畅渲染。

Decision Table

决策表

Scenario	Model Loading	Custom Shapes	Custom Shaders	Optimization	Route To
Simple viewer	Yes	No	No	No	fundamentals + drei
Custom geometry	No	Yes	No	No	fundamentals + geometry
Shader art	No	Maybe	Yes	No	fundamentals + materials + geometry
Game/simulation	Maybe	Yes	Maybe	Yes	all skills
Product viz	Yes	No	No	Maybe	fundamentals + drei + materials
Particles	No	Yes	Yes	Yes	fundamentals + geometry + materials + performance

场景	模型加载	自定义形状	自定义着色器	性能优化	路由指向
简单查看器	是	否	否	否	fundamentals + drei
自定义几何	否	是	否	否	fundamentals + geometry
着色器艺术	否	可能	是	否	fundamentals + materials + geometry
游戏/模拟	可能	是	可能	是	所有技能
产品可视化	是	否	否	可能	fundamentals + drei + materials
粒子效果	否	是	是	是	fundamentals + geometry + materials + performance

Skill Dependencies

技能依赖关系

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

Always start with
```
r3f-fundamentals
```
```
r3f-geometry
```
and
```
r3f-materials
```
often used together
```
r3f-drei
```
can replace manual implementations
```
r3f-performance
```
applies optimization to any combination

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
```
可应用于任何技能组合的优化

Fallback Behavior

回退机制

Unknown task type → Start with
```
r3f-fundamentals
```
+
```
r3f-drei
```
No clear signals → Ask: "What are you trying to render?" and "Any specific effects needed?"
Conflicting signals → Prefer
```
r3f-drei
```
abstractions over manual implementations

未知任务类型 → 从
```
r3f-fundamentals
```
+
```
r3f-drei
```
开始
无明确信号 → 询问："你想要渲染什么？"以及"是否需要特定效果？"
信号冲突 → 优先选择
```
r3f-drei
```
的抽象实现而非手动实现

Quick Decision Flowchart

快速决策流程图

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)

用户请求
     │
     ▼
┌─────────────────────┐
│ 需要3D模型？      │──是──▶ r3f-drei (useGLTF)
└─────────────────────┘
     │ 否
     ▼
┌─────────────────────┐
│ 需要自定义几何？    │──是──▶ r3f-geometry
└─────────────────────┘
     │ 否
     ▼
┌─────────────────────┐
│ 需要自定义着色器？      │──是──▶ r3f-materials
└─────────────────────┘
     │ 否
     ▼
┌─────────────────────┐
│ 存在性能问题？ │──是──▶ r3f-performance
└─────────────────────┘
     │ 否
     ▼
┌─────────────────────┐
│ 需要控制/辅助工具？   │──是──▶ r3f-drei
└─────────────────────┘
     │ 否
     ▼
r3f-fundamentals (默认)

Reference

参考资料

See individual skill files for detailed patterns:

/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
```

查看各个技能文件获取详细模式：

/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
```