What problem does it solve?
Provides a concise set of guidelines and constraints to accelerate building simple 2D and 3D JavaScript games and simulations with React Three Fiber, reducing trial-and-error around setup, controls, physics, textures, and the game loop.
Core Features & Use Cases
- Initial Setup: Recommended minimal scene with a camera, renderer, directional lighting, and a flat plane for terrain to get a playable prototype quickly.
- Movement & Controls: Prescribes using DREI keyboard controls with examples for reactive UI usage and non-re-rendering game-loop usage via subscribe/getState and useFrame.
- Collision & Physics: Advises simple AABB collision detection, box geometries for collision bodies, minimal physics responses, and guidance for bullet handling and debug logging.
- Textures & Assets: Enforces using existing textures from a specific textures folder, discourages ad-hoc texture references, and permits omitting textures when none are available.
- Camera & Game Loop: Recommends a simple follow camera pattern and a straightforward update/render loop focused on functionality before polish.
- Sounds, Debugging & Best Practices: Recommends using provided sample sounds, forbids base64 sound generation, precomputing random values outside render, and strong logging for controls and bullets to aid debugging.
Quick Start
Create a basic @react-three/fiber scene with a camera, directional light, a flat plane, a colored box player, and wire DREI keyboard controls into useFrame for movement and simple AABB collisions.
