r3f-lighting

Enable shadows by setting the shadows prop on Canvas, add castShadow to the light, and set castShadow or receiveShadow on meshes. Configure shadow-mapSize and shadow camera bounds on the light for quality control.

Use the Environment component from @react-three/drei with a preset like sunset or studio, or load a custom HDR file via the files prop. Environment lighting provides image-based lighting that works with MeshStandardMaterial.

Use directionalLight for sunlight, pointLight for bulbs, spotLight for focused cones, and ambientLight or hemisphereLight for cheap fill. rectAreaLight gives soft realistic lighting but only works with standard and physical materials and casts no shadows.

No, rectAreaLight does not cast shadows natively in Three.js. Combine it with ContactShadows from Drei or a shadow-casting directional light when you need both soft area lighting and shadows.

Pixelated shadows usually come from low shadow-mapSize or an overly large shadow camera frustum. Increase map size to 2048, tighten the shadow camera bounds to the scene area, and adjust shadow-bias to remove artifacts.

Limit the number of lights, use Environment instead of many individual lights, keep shadow maps at 512-1024, and use ContactShadows with frames set to 1 for static scenes. BakeShadows can freeze shadows for static content.