Three.js进阶指南：深度解析灯光系统与实战案例

在3D场景渲染中，灯光系统是决定视觉效果的关键要素。Three.js提供了多种灯光类型，每种灯光都有其独特的物理特性和应用场景。本文将系统讲解环境光、平行光等核心光源，结合代码示例和场景对比，帮助开发者掌握灯光配置技巧。

一、环境光（AmbientLight）基础与应用

环境光是3D场景中最基础的照明方式，其特点是通过均匀的光线填充整个空间，消除完全黑暗的区域。这种光源不产生阴影，也不具备方向性，类似于现实世界中的漫反射光。

1.1 核心属性解析

const ambientLight = new THREE.AmbientLight({
  color: 0xffffff,  // 颜色值（十六进制或RGB）
  intensity: 0.5    // 光照强度（0-1范围）
});

color属性：控制环境光的色调，默认值为白色（0xffffff）。通过调整RGB值可以实现冷暖光效，例如0xff0000为红色光。
intensity属性：调节光照强度，0.5表示50%强度。值过高会导致场景过曝，值过低则无法提供足够照明。

1.2 典型应用场景

环境光特别适合以下场景：

基础照明：为场景提供均匀的背景光，避免物体完全黑暗
辅助照明：与其他光源配合使用，补充阴影区域的亮度
风格化渲染：通过调整颜色实现特定氛围（如暗红色环境光模拟恐怖场景）

1.3 场景对比实验

在未使用环境光的场景中，物体背对主光源的面会呈现纯黑色。添加环境光后（intensity=0.3），这些区域获得柔和的照明，整体画面更具层次感。这种效果在室内场景渲染中尤为明显，可以避免因单一光源造成的明暗对比过于强烈。

二、平行光（DirectionalLight）深度解析

平行光模拟无限远处的光源（如太阳），其光线以平行方式照射，不会因距离衰减。这是实现户外日光效果和硬阴影的核心光源。

2.1 完整配置示例

// 创建平行光
const directionalLight = new THREE.DirectionalLight(0xffff00, 0.8);
directionalLight.position.set(5, 10, 7);
directionalLight.castShadow = true;
// 配置阴影参数
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;
// 添加到场景
scene.add(directionalLight);
// 物体设置（接收阴影）
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);

2.2 关键参数详解

参数	说明	推荐值范围
position	光源位置	根据场景调整
color	光线颜色	0xffff00（黄色）模拟日光
intensity	光照强度	0.5-1.2
castShadow	是否投射阴影	true/false
shadow.camera.*	阴影相机参数	根据物体尺寸调整

2.3 阴影渲染优化

实现高质量阴影需要注意：

阴影相机范围：通过调整left/right/top/bottom参数，确保阴影相机覆盖所有需要投射阴影的物体
分辨率设置：在渲染器中设置shadowMap.type = THREE.PCFSoftShadowMap可获得更柔和的阴影边缘
性能权衡：阴影渲染会显著增加计算量，建议在移动端适当降低阴影质量

三、动态灯光控制实战

通过GUI工具动态调整灯光参数，可以快速验证不同光照效果。以下是完整的实现方案：

3.1 集成lil-gui控制面板

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
// 在组件初始化中添加
initGUI() {
  const gui = new GUI();
  const lightFolder = gui.addFolder('平行光控制');
  // 颜色控制
  lightFolder.addColor({ color: '#ffff00' }, 'color')
    .onChange((value) => {
      directionalLight.color.set(value);
    });
  // 强度控制
  lightFolder.add(directionalLight, 'intensity', 0, 2, 0.1);
  // 位置控制
  const posFolder = lightFolder.addFolder('位置');
  posFolder.add(directionalLight.position, 'x', -10, 10);
  posFolder.add(directionalLight.position, 'y', 0, 20);
  posFolder.add(directionalLight.position, 'z', -10, 10);
}

3.2 响应式设计实践

为适应不同屏幕尺寸，需要实现窗口大小变化的响应处理：

handleResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
  // 调整阴影相机范围（可选）
  if (directionalLight.castShadow) {
    const size = 15;
    directionalLight.shadow.camera.left = -size;
    directionalLight.shadow.camera.right = size;
    directionalLight.shadow.camera.top = size;
    directionalLight.shadow.camera.bottom = -size;
  }
}

四、多光源组合应用

实际项目中往往需要组合使用多种光源：

// 基础环境光
const ambient = new THREE.AmbientLight(0x404040, 0.5);
// 主平行光（日光）
const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
sunLight.position.set(10, 20, 10);
sunLight.castShadow = true;
// 辅助点光源（模拟室内灯光）
const pointLight = new THREE.PointLight(0xffaa00, 0.5, 100);
pointLight.position.set(0, 5, 0);
scene.add(ambient, sunLight, pointLight);

这种组合方式可以同时实现：

环境光提供基础照明
平行光模拟日光方向和阴影
点光源增加局部高光和层次感

五、性能优化建议

阴影质量权衡：在移动端使用THREE.BasicShadowMap，桌面端使用THREE.PCFSoftShadowMap
光源数量控制：建议场景中活跃光源不超过5个
层级管理：将静态光源添加到THREE.Group中统一管理
LOD技术：根据物体距离动态调整阴影细节

通过系统掌握这些灯光技术，开发者可以创建出更具真实感和艺术性的3D场景。建议结合实际项目需求，通过不断调整参数来积累经验，最终形成自己的灯光设计方法论。