R3f Lighting

Covers the full lighting toolkit for React Three Fiber, from basic ambientLight and directionalLight setup to Drei's Environment component for IBL and HDR presets. The shadow configuration section is solid, walking through shadow types, mapSize tuning, and camera frustum setup with helpers. Good reference for light type tradeoffs (the cost table is handy) and when to use what. The Environment and Lightformer examples are where this really shines if you're setting up product renders or need quick realistic lighting without manual light placement. The Stage component examples feel a bit thin, but the core lighting patterns and shadow debugging tips make this worth having when you're fighting shadow acne or optimizing shadow maps.

skills.sh installs: 2K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-lighting --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber lighting

Check installed Three.js, Fiber, and Drei versions and the renderer first. This example targets Fiber 9 / React 19, Three.js r185, and WebGL.

Start with a deliberate lighting setup

Use environment lighting for PBR reflections/fill and direct lights for direction and real-time shadowing. More ambient light will not restore missing metallic reflections.
A scene background and scene.environment serve different purposes. Drei Environment assigns lighting; background additionally makes it visible behind the scene.
Prefer an owned HDR/EXR asset in production. Drei presets are useful for prototyping but depend on external hosting. Check loader support before choosing newer formats.
Sky is visible sky geometry, not automatically a matching sun light or environment. Align the sky, direct light, and environment when visual consistency matters.

Shadowed scene

Mount inside <Canvas shadows="percentage">. On Three.js r182+, PCFShadowMap is soft; Fiber 9's bare shadows selects the deprecated PCFSoftShadowMap.

SKILL.md on GitHub