Three.js 光照从入门到实战：打造具有层次感的 3D 视觉效果

Three.js 是一个强大的 WebGL 库，用于在浏览器中创建交互式 3D 场景。光照是实现真实感和层次感的关键元素：它能增强物体的深度、突出细节，并营造出视觉上的立体效果。在本指南中，我将从基础光照原理讲起，逐步引导你实战应用，最终打造出具有层次感的 3D 场景。整个过程基于 Three.js 最新版本（r15x），确保方法真实可靠。

1. 入门：Three.js 光照基础

光照在 3D 场景中模拟光线行为，影响物体颜色、阴影和明暗。Three.js 提供多种光源类型，每种都有特定用途：

• 环境光（AmbientLight）：提供全局基础照明，无方向性，公式为 $I_a = k_a \cdot L_a$，其中 $k_a$ 是材质的环境反射系数，$L_a$ 是光源强度。适合填充暗部。
• 方向光（DirectionalLight）：模拟平行光源（如太阳），有明确方向，公式为 $I_d = k_d \cdot (L \cdot N) \cdot L_d$，其中 $L$ 是光源方向向量，$N$ 是法线向量。用于创建清晰阴影。
• 点光源（PointLight）：像灯泡，从一点向四周辐射，衰减公式为 $I = I_0 / (d^2)$，$d$ 是距离光源的距离。增强局部高光。
• 聚光灯（SpotLight）：有方向和范围，类似手电筒，公式包括角度衰减。适合聚焦特定区域。
• 半球光（HemisphereLight）：模拟天空和地面光，用于户外场景，提升自然感。

层次感（即视觉深度）通过光源组合实现：例如，方向光投射阴影增加物体分离感，点光源突出细节，环境光填充背景避免死黑。所有光源都通过 Three.Light 类管理，需添加到场景中。

2. 实战：实现层次感的步骤

要打造层次感，核心是结合多个光源、启用阴影并调整参数。以下是关键步骤：

• 启用阴影：Three.js 使用阴影映射（Shadow Mapping）。设置光源的 castShadow = true 和物体的 receiveShadow = true。
• 光源组合策略：
  • 主光源（如方向光）定义整体明暗和投影。
  • 辅助光源（如点光源）添加局部高光，突出纹理。
  • 环境光平衡全局亮度，避免过度对比。
• 参数优化：
  • 强度（intensity）：控制光源亮度，值在 0-2 间调整。
  • 颜色（color）：使用十六进制值（如 0xffffff）影响场景色调。
  • 位置和方向：通过 position.set(x,y,z) 或 target 属性精细控制。
• 层次感目标：通过阴影深度、高光变化和颜色过渡，让场景有“前中后”景深。

下面是一个实战示例：创建一个简单 3D 场景，包含一个立方体和平面，通过光源组合实现层次感。场景中，方向光投射阴影，点光源增强立方体边缘，环境光柔和背景。

// 导入 Three.js 模块（确保在项目中安装 three 包）
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影映射
document.body.appendChild(renderer.domElement);

// 添加轨道控制器，便于交互
const controls = new OrbitControls(camera, renderer.domElement);

// 创建几何体：立方体（作为前景物体）和平面（作为地面）
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1, 0);
cube.castShadow = true; // 立方体投射阴影
scene.add(cube);

const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // 旋转平面为水平
plane.position.y = -1;
plane.receiveShadow = true; // 平面接收阴影
scene.add(plane);

// 添加光源：组合实现层次感
// 1. 环境光：基础照明，避免纯黑背景
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); // 颜色白色，强度0.3
scene.add(ambientLight);

// 2. 方向光：主光源，创建清晰阴影和整体深度
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 强度1
directionalLight.position.set(5, 10, 5); // 设置光源位置
directionalLight.castShadow = true; // 启用阴影投射
directionalLight.shadow.mapSize.width = 1024; // 阴影分辨率
directionalLight.shadow.mapSize.height = 1024;
scene.add(directionalLight);

// 3. 点光源：辅助光源，增强立方体边缘高光，增加层次
const pointLight = new THREE.PointLight(0xffaa00, 0.8); // 暖色调，强度0.8
pointLight.position.set(-3, 3, -3);
pointLight.castShadow = true;
scene.add(pointLight);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01; // 简单动画，展示动态层次感
  cube.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}
animate();

代码解析：

• 层次感实现：方向光从上方投射阴影，模拟自然光，让立方体在平面上有投影，增强深度；点光源从侧面添加暖色高光，突出立方体边缘，避免平面单调；环境光柔和整体，避免暗部过黑。
• 参数调整：通过 intensity 和 position 优化：方向光强度高（1）主导场景，点光源强度中等（0.8）添加细节，环境光弱（0.3）平衡。
• 阴影设置：shadowMap.enabled 和分辨率提升确保阴影清晰，避免锯齿。
• 运行此代码，你将看到立方体有明暗变化和投影，平面接收阴影，整体场景有“前景立方体-中景光影-背景平面”的层次。

3. 进阶技巧与优化建议

• 提升层次感：添加更多光源（如聚光灯聚焦特定物体），或使用 HemisphereLight 模拟户外环境。调整材质属性（如 roughness 和 metalness）影响高光反射。
• 性能优化：阴影计算消耗资源，使用 shadowMap.type = THREE.PCFSoftShadowMap 柔化边缘，或限制光源数量。
• 常见问题：如果阴影不显示，检查 castShadow/receiveShadow 是否启用，并确保光源位置合理。层次感不足时，增加点光源强度或添加辅助光。
• 实战扩展：在复杂场景（如建筑模型），分层布置光源：前景用强光，背景用弱光。结合后期处理（如 EffectComposer）添加辉光效果。

通过本指南，你已掌握从基础到实战的光照应用。关键在于实验：多调整参数，观察光影变化。Three.js 文档（官方GitHub）是可靠参考。记住，层次感源于对比——善用阴影和高光，你的 3D 场景将栩栩如生！如有具体问题，欢迎提供更多细节，我会针对性解答。