Lights, shadows & environment

const sun = new DirectionalLight(0xffffff, 3);
sun.position.set(5, 10, 3);  // direction = position → target
sun.target.position.set(0, 0, 0);
scene.add(sun, sun.target);  // target must be in the scene
                             // (or updated) if you move it
 
const bulb = new PointLight(0xffe0b0, 80, 0, 2);
bulb.position.set(0, 2.5, 0);
 
const spot = new SpotLight(0xffffff, 200);
spot.angle = Math.PI / 8;    // half-angle, radians
spot.penumbra = 0.3;         // 0 hard edge … 1 soft
spot.map = gobo;             // projected texture (cookie)

import { RectAreaLightUniformsLib } from
  "three/addons/lights/RectAreaLightUniformsLib.js";
import { RectAreaLightHelper } from
  "three/addons/helpers/RectAreaLightHelper.js";
 
RectAreaLightUniformsLib.init(); // once, WebGLRenderer only
 
const panel = new RectAreaLight(0xffffff, 8, 2, 0.5);
panel.position.set(0, 2, 2);
panel.lookAt(0, 0, 0);           // emits along its -Z
panel.add(new RectAreaLightHelper(panel));
scene.add(panel);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFShadowMap;  // default
 
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);      // default 512
sun.shadow.camera.near = 0.5;
sun.shadow.camera.far = 40;
sun.shadow.bias = -0.0005;
sun.shadow.normalBias = 0.02;
sun.shadow.radius = 3;                   // PCF softness
 
mesh.castShadow = true;
ground.receiveShadow = true;

const cam = sun.shadow.camera; // OrthographicCamera
cam.left = -15; cam.right = 15;
cam.top = 15;   cam.bottom = -15;
cam.near = 1;   cam.far = 50;
cam.updateProjectionMatrix();   // after every change
 
scene.add(new CameraHelper(cam)); // see the box

import { HDRLoader } from
  "three/addons/loaders/HDRLoader.js";
 
const hdr = await new HDRLoader().loadAsync(
  "/env/studio_small_2k.hdr",
);
hdr.mapping = EquirectangularReflectionMapping;
scene.environment = hdr;   // PMREM'd automatically
scene.background = hdr;    // optional
scene.backgroundBlurriness = 0.4;  // 0–1
scene.environmentIntensity = 1;
scene.environmentRotation.y = Math.PI / 2;

import { RoomEnvironment } from
  "three/addons/environments/RoomEnvironment.js";
 
const pmrem = new PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(
  new RoomEnvironment(), 0.04, // sigma: slight blur
).texture;
pmrem.dispose(); // keep the texture, free the generator

renderer.toneMapping = AgXToneMapping;
renderer.toneMappingExposure = 1.0; // photographic stops
                                    // = log2 of this

scene.fog = new Fog(0xb8c6d9, 10, 80);   // linear
scene.fog = new FogExp2(0xb8c6d9, 0.02); // exponential²
scene.background = new Color(0xb8c6d9);  // match it!

import {
  DirectionalLight, NeutralToneMapping, PCFShadowMap,
  PMREMGenerator,
} from "three";
import type { Scene, WebGLRenderer } from "three";
import { RoomEnvironment } from
  "three/addons/environments/RoomEnvironment.js";
 
export function studio(
  scene: Scene, renderer: WebGLRenderer,
): DirectionalLight {
  renderer.toneMapping = NeutralToneMapping;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = PCFShadowMap;
 
  const pmrem = new PMREMGenerator(renderer);
  scene.environment = pmrem
    .fromScene(new RoomEnvironment(), 0.04).texture;
  pmrem.dispose();
 
  const key = new DirectionalLight(0xffffff, 1.5);
  key.position.set(3, 6, 4);
  key.castShadow = true;
  key.shadow.mapSize.set(1024, 1024);
  key.shadow.radius = 4;
  key.shadow.normalBias = 0.02;
  scene.add(key);
  return key;
}

import { Box3, Sphere, Vector3 } from "three";
import type { DirectionalLight, Object3D } from "three";
 
export function fitShadow(
  light: DirectionalLight, content: Object3D,
): void {
  const s = new Box3().setFromObject(content)
    .getBoundingSphere(new Sphere());
  const dir = light.position.clone()
    .sub(light.target.position).normalize();
  light.target.position.copy(s.center);
  light.position.copy(s.center)
    .addScaledVector(dir, s.radius * 2);
  light.target.updateMatrixWorld();
 
  const cam = light.shadow.camera;
  cam.left = cam.bottom = -s.radius;
  cam.right = cam.top = s.radius;
  cam.near = s.radius * 0.5;
  cam.far = s.radius * 3.5;
  cam.updateProjectionMatrix();
}

const SUN_DIR = new Vector3(-0.5, 1, 0.3).normalize();
const sun = new DirectionalLight(0xfff4e0, 3);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
Object.assign(sun.shadow.camera, {
  left: -20, right: 20, top: 20, bottom: -20,
  near: 1, far: 120,
});
sun.shadow.camera.updateProjectionMatrix();
scene.add(sun, sun.target);
 
function followSun(focus: Vector3): void {
  // snap to texel grid to stop shadow edge shimmer
  const texel = 40 / 2048;
  const x = Math.round(focus.x / texel) * texel;
  const z = Math.round(focus.z / texel) * texel;
  sun.target.position.set(x, 0, z);
  sun.position.set(x, 0, z).addScaledVector(SUN_DIR, 60);
}

import {
  EquirectangularReflectionMapping, PMREMGenerator,
} from "three";
import type { Scene, Texture, WebGLRenderer } from "three";
import { HDRLoader } from
  "three/addons/loaders/HDRLoader.js";
 
const loader = new HDRLoader();
let current: Texture | null = null;
 
export async function setEnv(
  url: string, scene: Scene, renderer: WebGLRenderer,
): Promise<void> {
  const hdr = await loader.loadAsync(url);
  hdr.mapping = EquirectangularReflectionMapping;
  const pmrem = new PMREMGenerator(renderer);
  const env = pmrem.fromEquirectangular(hdr).texture;
  hdr.dispose();
  pmrem.dispose();
  scene.environment = env;
  scene.background = env;
  current?.dispose();
  current = env;
}

renderer.shadowMap.enabled = true;
renderer.shadowMap.autoUpdate = false;
renderer.shadowMap.needsUpdate = true; // first frame
 
function onSceneEdited(): void {
  renderer.shadowMap.needsUpdate = true; // next frame
}