enzed/r3f-skills▌

The recommended way to load GLTF/GLB models.

Illuminates all objects equally. No direction, no shadows.

No lighting calculations. Always visible, fast.

The root component that creates the physics world.

The recommended way to create shader materials in R3F.

Core React Three Fiber setup with Canvas, hooks, JSX elements, and event handling. \n \n Canvas component creates the WebGL context, scene, camera, and renderer with configurable settings for shadows, color management, frame loop control, and event handling \n useFrame hook subscribes to the render loop with access to state (clock, pointer, camera), delta time, and priority-based execution ordering \n useThree hook provides selective access to R3F state including camera, renderer, scene, raycast

React Three Fiber geometry for built-in shapes, custom meshes, instancing, and particle systems. \n \n Includes 15+ built-in Three.js geometries (box, sphere, cylinder, torus, polyhedrons) plus path-based shapes (lathe, tube, extrude) with configurable segments and parameters \n Create custom BufferGeometry with vertices, normals, UVs, and indices; supports dynamic updates via needsUpdate flag for animated deformations \n Drei helpers provide convenient shape components (Box, Sphere, RoundedBox)

Pointer events, camera controls, gestures, and selection for interactive 3D scenes. \n \n Supports 10+ pointer events (click, hover, drag, wheel) with rich intersection data including world position, UV coordinates, and face normals \n Includes 8 camera control presets: OrbitControls, MapControls, FlyControls, FirstPersonControls, PointerLockControls, CameraControls, TrackballControls, and ArcballControls \n Provides transform gizmos (TransformControls, PivotControls) and drag systems for object

The container for all post-processing effects.

The core animation hook in R3F. Runs every frame.

The recommended way to load textures in R3F.