r3f-lighting

React Three Fiber Lighting Quick Start import { Canvas } from '@react-three/fiber'

function Scene() { return ( {/ Ambient fill /}

  {/* 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.

hemisphereLight

Gradient from sky to ground. Good for outdoor scenes.

directionalLight

Parallel light rays. Simulates distant light (sun).

<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 ( <> </> ) }

pointLight

Emits light in all directions. Like a light bulb.

<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.

<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 }

rectAreaLight

Rectangular area light. Great for soft, realistic lighting.

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'

function AreaLight() { const lightRef = useRef()

return ( <> </> ) }

// Note: RectAreaLight only works with MeshStandardMaterial and MeshPhysicalMaterial // Does not cast shadows natively

Shadow Setup Enable Shadows on Canvas

Shadow Types // Basic shadows (fastest, hard edges) // PCF shadows (default, filtered) // Soft shadows (PCFSoft, softer edges) // VSM shadows (variance shadow map) Configure Shadow-Casting Objects // Light must cast shadows // Objects must cast and/or receive shadows // Ground typically only receives Shadow Camera Helper import { useHelper } from '@react-three/drei' import { CameraHelper } from 'three' function LightWithShadowHelper() { const lightRef = useRef() // Visualize shadow camera frustum useHelper(lightRef.current?.shadow.camera, CameraHelper) return ( ) } Drei Lighting Helpers Environment HDR environment lighting with presets or custom files. import { Environment } from '@react-three/drei' // Preset environments // Custom HDR file // Cube map (6 images) // Ground projection Lightformer Create custom light shapes inside Environment. import { Environment, Lightformer } from '@react-three/drei' Sky Procedural sky with sun. import { Sky } from '@react-three/drei' Stars Starfield background. import { Stars } from '@react-three/drei' Stage Quick lighting setup for product showcase. import { Stage } from '@react-three/drei' ContactShadows Fast fake shadows without shadow mapping. import { ContactShadows } from '@react-three/drei' // For animated scenes AccumulativeShadows Soft, accumulated shadows. import { AccumulativeShadows, RandomizedLight } from '@react-three/drei' SoftShadows Enable PCF soft shadows globally. import { SoftShadows } from '@react-three/drei' BakeShadows Bake shadows for static scenes. import { BakeShadows } from '@react-three/drei' {/* Bakes shadows once on mount */} Common Lighting Setups Three-Point Lighting function ThreePointLighting() { return ( <> {/* Key light (main) */} {/* Fill light (softer, opposite side) */} {/* Back light (rim lighting) */} {/* Ambient fill */} ) } Outdoor Daylight import { Sky, Environment } from '@react-three/drei' function OutdoorLighting() { return ( <> ) } Studio Lighting import { Environment, Lightformer, ContactShadows } from '@react-three/drei' function StudioLighting() { return ( <> {/* Key light */} {/* Fill light */} {/* Rim light */} ) } Animated Lighting import { useFrame } from '@react-three/fiber' import { useRef } from 'react' function AnimatedLight() { const lightRef = useRef() useFrame(({ clock }) => { const t = clock.elapsedTime // Orbit around scene lightRef.current.position.x = Math.cos(t) * 5 lightRef.current.position.z = Math.sin(t) * 5 // Pulsing intensity lightRef.current.intensity = 1 + Math.sin(t * 2) * 0.5 // Color cycling lightRef.current.color.setHSL((t * 0.1) % 1, 1, 0.5) }) return ( ) } Light Helpers import { useHelper } from '@react-three/drei' import { DirectionalLightHelper, PointLightHelper, SpotLightHelper, HemisphereLightHelper, } from 'three' function LightWithHelpers() { const dirLightRef = useRef() const pointLightRef = useRef() const spotLightRef = useRef() const hemiLightRef = useRef() useHelper(dirLightRef, DirectionalLightHelper, 5, 'red') useHelper(pointLightRef, PointLightHelper, 1, 'green') useHelper(spotLightRef, SpotLightHelper, 'blue') useHelper(hemiLightRef, HemisphereLightHelper, 5, 'yellow', 'brown') return ( <> ) } Performance Tips Limit light count: Each light adds shader complexity Use baked lighting: For static scenes Smaller shadow maps: 512-1024 often sufficient Tight shadow frustums: Only cover needed area Disable unused shadows: Not all lights need shadows Use Environment: More efficient than many lights // Selective shadows // Only update shadows when needed // Use layers to exclude objects from lights {/* Affected by light */} {/* Not affected */} See Also r3f-materials - Material light response r3f-textures - Environment maps r3f-postprocessing - Bloom and light effects