Three.js 学习系列（四）光照与阴影：从 6 种灯到 PBR + IBL

Light（基类）
  ├── AmbientLight          全局环境光，无方向，无阴影
  ├── HemisphereLight       半球光（天空色 + 地面色）
  ├── DirectionalLight      平行光（太阳）
  ├── PointLight            点光（灯泡）
  ├── SpotLight             聚光（手电筒、车灯）
  ├── RectAreaLight         矩形面光（窗、屏幕、灯管）
  └── LightProbe            光照探针（IBL 高级用法）

const ambient = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambient)

const hemi = new THREE.HemisphereLight(
  0x87ceeb,   // skyColor 天空色
  0x6b4423,   // groundColor 地面色
  0.5         // intensity
)
scene.add(hemi)

const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(10, 20, 10)
dir.target.position.set(0, 0, 0)  // 朝向
scene.add(dir)
scene.add(dir.target)              // ★ target 也要 add 进 scene

const point = new THREE.PointLight(0xffaa44, 1, 50, 2)
// 参数: color, intensity, distance, decay
point.position.set(0, 5, 0)
scene.add(point)

const spot = new THREE.SpotLight(0xffffff, 1, 30, Math.PI / 6, 0.1, 2)
// color, intensity, distance, angle, penumbra, decay
spot.position.set(5, 10, 5)
spot.target.position.set(0, 0, 0)
scene.add(spot, spot.target)

import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'

const rect = new THREE.RectAreaLight(0xffffff, 3, 4, 2)  // color, intensity, w, h
rect.position.set(0, 5, 0)
rect.lookAt(0, 0, 0)
scene.add(rect)
scene.add(new RectAreaLightHelper(rect))   // 辅助显示矩形位置

// 1. Renderer 端开启
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap

// 2. 光源端开启投射
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.castShadow = true
dir.position.set(10, 20, 10)
scene.add(dir)

// 3. 物体端两侧都要开
cube.castShadow = true        // 物体投出阴影
ground.receiveShadow = true   // 地面接收阴影

第 1 步: 从光源的视角渲染场景一次, 只记录深度信息
         → 得到一张"深度图"(shadow map)

第 2 步: 渲染主画面时, 每个像素都问:
         "我从光源看过去的距离 > shadow map 记录的最近距离吗?"
         是 → 被挡住了 → 处于阴影中 → 暗
         否 → 光直接照到 → 亮

const light = new THREE.DirectionalLight(0xffffff, 1)
light.castShadow = true
light.position.set(10, 20, 10)

light.shadow.mapSize.width  = 2048   // 阴影贴图分辨率（默认 512 太低）
light.shadow.mapSize.height = 2048
light.shadow.bias       = -0.0005    // 偏移，解决"阴影痤疮"
light.shadow.normalBias = 0.02       // 法线方向偏移

// 阴影相机（控制阴影覆盖范围）
light.shadow.camera.near   = 0.5
light.shadow.camera.far    = 50
light.shadow.camera.left   = -20
light.shadow.camera.right  = 20
light.shadow.camera.top    = 20
light.shadow.camera.bottom = -20

const helper = new THREE.CameraHelper(light.shadow.camera)
scene.add(helper)

renderer.shadowMap.type = THREE.PCFSoftShadowMap

近段 (0–10m):    高分辨率 shadow map
中段 (10–50m):   中分辨率 shadow map
远段 (50–200m):  低分辨率 shadow map

import { CSM } from 'three/addons/csm/CSM.js'

const csm = new CSM({
  maxFar: 200,
  cascades: 3,
  lightDirection: new THREE.Vector3(-1, -1, -1).normalize(),
  camera: camera,
  parent: scene,
})

// 给所有要接收 CSM 阴影的材质做一次"激活"
scene.traverse(obj => {
  if (obj.isMesh) csm.setupMaterial(obj.material)
})

// 每帧 update
function render() {
  csm.update()
  renderer.render(scene, camera)
}

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'

new RGBELoader().load('/env/studio.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping

  scene.background  = texture   // 当背景显示
  scene.environment = texture   // ★ 这一行让所有 PBR 材质有反射
})

const pmremGenerator = new THREE.PMREMGenerator(renderer)
pmremGenerator.compileEquirectangularShader()

new RGBELoader().load('/env/studio.hdr', (hdr) => {
  const envMap = pmremGenerator.fromEquirectangular(hdr).texture
  scene.environment = envMap
  hdr.dispose()
  pmremGenerator.dispose()
})

import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js'

const probe = LightProbeGenerator.fromCubeTexture(cubeTexture)
scene.add(probe)

import { DirectionalLightHelper, PointLightHelper, SpotLightHelper, HemisphereLightHelper } from 'three'
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'

scene.add(new THREE.DirectionalLightHelper(directionalLight, 1))
scene.add(new THREE.PointLightHelper(pointLight, 0.5))
scene.add(new THREE.SpotLightHelper(spotLight))
scene.add(new THREE.HemisphereLightHelper(hemiLight, 1))
scene.add(new RectAreaLightHelper(rectLight))
scene.add(new THREE.CameraHelper(directionalLight.shadow.camera))  // 看阴影范围

1. 场景里所有 Light 实例 → renderer.render() 时被分类、收集
2. 上限: 每种光源默认最多 8 个（compile-time 决定）
3. 每个 Light 被序列化成 uniforms (Vector3 位置/方向、Color、Float 强度等)
4. fragment shader 里循环遍历每个光源, 累加它们对当前像素的贡献

import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js'

// 1. Renderer 开阴影 + ACES tone mapping
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1.0

// 2. 加 HDR 环境（核心 IBL）
const pmrem = new THREE.PMREMGenerator(renderer)
new RGBELoader().load('/studio.hdr', (hdr) => {
  scene.environment = pmrem.fromEquirectangular(hdr).texture
  hdr.dispose(); pmrem.dispose()
})

// 3. 主光 = DirectionalLight，配阴影
const sun = new THREE.DirectionalLight(0xffffff, 2)
sun.position.set(8, 12, 8)
sun.castShadow = true
sun.shadow.mapSize.set(2048, 2048)
sun.shadow.camera.left = -10
sun.shadow.camera.right = 10
sun.shadow.camera.top = 10
sun.shadow.camera.bottom = -10
sun.shadow.bias = -0.0005
scene.add(sun)

// 4. 填充光 = HemisphereLight（弱）
scene.add(new THREE.HemisphereLight(0x87ceeb, 0x444444, 0.3))

// 5. 矩形面光模拟柔光箱
const softbox = new THREE.RectAreaLight(0xffffff, 4, 4, 2)
softbox.position.set(-5, 5, 5)
softbox.lookAt(0, 0, 0)
scene.add(softbox, new RectAreaLightHelper(softbox))

// 6. 展品 = PBR 金属球
const ball = new THREE.Mesh(
  new THREE.SphereGeometry(1, 64, 64),
  new THREE.MeshStandardMaterial({ color: 0xddaa44, metalness: 0.9, roughness: 0.15 })
)
ball.castShadow = true
ball.receiveShadow = true
scene.add(ball)

// 7. 地面
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(50, 50),
  new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8 })
)
ground.rotation.x = -Math.PI / 2
ground.position.y = -1
ground.receiveShadow = true
scene.add(ground)