R3f Lighting
Add correct React Three Fiber lights, shadows, and environment-based lighting to a 3D web scene without guessing performance tradeoffs.
Overview
R3f-lighting is an agent skill for the Build phase that teaches React Three Fiber lighting types, shadows, Environment IBL, and performance-aware setup in Canvas scenes.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-lightingWhat is this skill?
- Quick-start Canvas with ambientLight, directionalLight castShadow, and shadow-receiving ground plane
- Comparison table of 6 light types with shadow support and relative GPU cost
- directionalLight shadow-mapSize guidance (e.g. 2048×2048) for sun-style lighting
- Environment component and image-based lighting (IBL) for realistic reflections
- Performance-oriented notes when choosing spot, point, and rectArea lights
- Documents 6 light types in an overview table with shadow support and cost columns
- Quick-start uses shadow-mapSize [2048, 2048] on directionalLight
Adoption & trust: 640 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your R3F scene looks flat or runs poorly because lights and shadows were added without matching types, shadow flags, or IBL to the materials you use.
Who is it for?
Indie front-end devs building WebGL product viewers, portfolios, or small 3D games on React Three Fiber.
Skip if: Projects using pure Three.js without R3F, 2D-only UIs, or teams needing baked offline lighting pipelines in Blender-only workflows.
When should I use this skill?
Adding lights, configuring shadows, setting up environment lighting, or optimizing lighting performance in React Three Fiber.
What do I get? / Deliverables
You implement a balanced light rig with optional shadows and environment lighting that works with meshStandardMaterial and similar PBR workflows.
- TSX scene snippets with ambient and directional lights plus shadow ground
- Light-type selection and shadow tuning notes for the target scene
Recommended Skills
Journey fit
Canonical shelf is Build because the skill teaches in-scene lighting implementation in a React Three Fiber frontend. Frontend subphase matches Canvas setup, light components, shadow maps, and Environment/IBL patterns in TSX.
How it compares
Use instead of generic CSS or 2D design skills—this is 3D scene lighting inside @react-three/fiber.
Common Questions / FAQ
Who is r3f-lighting for?
Solo builders composing 3D React apps who want copy-paste TSX patterns for lights, shadows, and Environment-based IBL.
When should I use r3f-lighting?
Use it during Build frontend work when adding lights, tuning castShadow/receiveShadow, setting shadow-mapSize, or optimizing light cost in a Canvas.
Is r3f-lighting safe to install?
It is documentation-only for frontend code; review the Security Audits panel on this Prism page and audit any HDRI or asset URLs you load in Environment.
SKILL.md
READMESKILL.md - R3f Lighting
# React Three Fiber Lighting ## Quick Start ```tsx import { Canvas } from '@react-three/fiber' function Scene() { return ( <Canvas shadows> {/* Ambient fill */} <ambientLight intensity={0.5} /> {/* Main light with shadows */} <directionalLight position={[5, 5, 5]} intensity={1} castShadow shadow-mapSize={[2048, 2048]} /> {/* Objects */} <mesh castShadow receiveShadow> <boxGeometry /> <meshStandardMaterial color="orange" /> </mesh> {/* Ground */} <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}> <planeGeometry args={[10, 10]} /> <meshStandardMaterial color="#888" /> </mesh> </Canvas> ) } ``` ## Light Types Overview | Light | Description | Shadow Support | Cost | |-------|-------------|----------------|------| | ambientLight | Uniform everywhere | No | Very Low | | hemisphereLight | Sky/ground gradient | No | Very Low | | directionalLight | Parallel rays (sun) | Yes | Low | | pointLight | Omnidirectional (bulb) | Yes | Medium | | spotLight | Cone-shaped | Yes | Medium | | rectAreaLight | Area light (window) | No* | High | ## ambientLight Illuminates all objects equally. No direction, no shadows. ```tsx <ambientLight color="#ffffff" // or color={new THREE.Color('#ffffff')} intensity={0.5} /> ``` ## hemisphereLight Gradient from sky to ground. Good for outdoor scenes. ```tsx <hemisphereLight color="#87ceeb" // Sky color groundColor="#8b4513" // Ground color intensity={0.6} position={[0, 50, 0]} /> ``` ## directionalLight Parallel light rays. Simulates distant light (sun). ```tsx <directionalLight color="#ffffff" intensity={1} position={[5, 10, 5]} // Shadow configuration castShadow shadow-mapSize={[2048, 2048]} shadow-camera-near={0.5} shadow-camera-far={50} shadow-camera-left={-10} shadow-camera-right={10} shadow-camera-top={10} shadow-camera-bottom={-10} shadow-bias={-0.0001} shadow-normalBias={0.02} /> // With target (light points at target) function DirectionalWithTarget() { const lightRef = useRef() return ( <> <directionalLight ref={lightRef} position={[5, 10, 5]} target-position={[0, 0, 0]} /> </> ) } ``` ## pointLight Emits light in all directions. Like a light bulb. ```tsx <pointLight color="#ffffff" intensity={1} position={[0, 5, 0]} distance={100} // Maximum range (0 = infinite) decay={2} // Light falloff (physically correct = 2) // Shadows castShadow shadow-mapSize={[1024, 1024]} shadow-camera-near={0.5} shadow-camera-far={50} shadow-bias={-0.005} /> ``` ## spotLight Cone-shaped light. Like a flashlight. ```tsx <spotLight color="#ffffff" intensity={1} position={[0, 10, 0]} angle={Math.PI / 6} // Cone angle (max Math.PI/2) penumbra={0.5} // Soft edge (0-1) distance={100} // Range decay={2} // Falloff // Target target-position={[0, 0, 0]} // Shadows castShadow shadow-mapSize={[1024, 1024]} shadow-camera-near={0.5} shadow-camera-far={50} shadow-camera-fov={30} shadow-bias={-0.0001} /> // SpotLight helper import { useHelper } from '@react-three/drei' import { SpotLightHelper } from 'three' function SpotLightWithHelper() { const lightRef = useRef() useHelper(lightRef, SpotLightHelper, 'cyan') return <spotLight ref={lightRef} position={[0, 5, 0]} /> } ``` ## rectAreaLight Rectangular area light. Great for soft, realistic lighting. ```tsx import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper' function AreaLight() { const lightRef = useRef() return ( <>