| name | r3f-3d-scene |
| description | Use when building or reviewing a 3D Air Jam game with React Three Fiber so scene structure, lighting, shadows, grounding, particles, and physics stay deliberate instead of becoming ad hoc Three.js chaos. |
R3F 3D Scene
Use this skill for 3D host gameplay surfaces built with React Three Fiber and Three.js.
Read First
docs/r3f-3d-scene.md
docs/generated/state-and-rendering.md
docs/generated/project-structure.md
Core Rule
Treat R3F as a rendering layer.
Keep:
- gameplay rules in domain/system modules
- runtime orchestration in engine/adapters
- scene composition and visual presentation in the 3D layer
Scene Quality Rules
- establish a deliberate lighting recipe early
- define world origin, ground level, and object placement conventions clearly
- keep shadows intentionally tuned to the actual play area
- use particles and post effects as accents, not camouflage for weak art direction
Physics Rule
Use Rapier when the game really benefits from rigid-body style simulation, collision response, or stacked interactions.
If gameplay only needs simple movement, overlap checks, or authored responses, prefer a lighter custom movement/collision model.
Asset Rule
- keep model scale and grounding consistent
- prefer curated materials and textures over random defaults
- use custom shaders only when they materially improve the look or mechanic
Anti-Patterns
- React state driving per-frame scene simulation
- giant untuned shadow maps with clipped or blurry shadows
- floating models fixed by random per-scene offsets
- adding a full physics engine where simple authored logic would be clearer
- piling on particles, bloom, or shaders before the base scene reads well