Three.js光照技术详解：为3D场景注入灵魂

一、Three.js光照简介
二、Three.js基础光照类型
- [1. 环境光（AmbientLight）](#1. 环境光（AmbientLight）)
- [2. 点光源（PointLight）](#2. 点光源（PointLight）)
- [3. 平行光（DirectionalLight）](#3. 平行光（DirectionalLight）)
- [4. 聚光灯（SpotLight）](#4. 聚光灯（SpotLight）)
- [5. 区域光（RectAreaLight）](#5. 区域光（RectAreaLight）)
三、Three.js进阶光照技巧
- [1. 光照贴图（Light Mapping）](#1. 光照贴图（Light Mapping）)
- [2. 间接光照（Indirect Lighting）](#2. 间接光照（Indirect Lighting）)
- [3. 阴影效果（Shadow）](#3. 阴影效果（Shadow）)
四、Three.js光照实战案例
- 案例：创建一个带有环境光和平行光的3D场景
- - - [1. 场景初始化](#1. 场景初始化)
    - [2. 添加物体](#2. 添加物体)
    - [3. 添加光照](#3. 添加光照)
    - [4. 设置相机位置](#4. 设置相机位置)
    - [5. 渲染循环](#5. 渲染循环)
五、总结与展望

在3D图形开发中，光照是赋予场景真实感和视觉吸引力的核心技术之一。Three.js作为一款流行的JavaScript 3D图形库，提供了丰富的光照类型和灵活的配置选项，能够帮助开发者轻松实现复杂的光影效果。本文将深入探讨Three.js中的光照技术，包括基础光照类型、进阶技巧以及实际应用案例。

一、Three.js光照简介

Three.js中的光照模型主要用于模拟真实世界中的光源，通过计算物体表面的颜色变化来实现光影效果。光照不仅能够增强场景的视觉表现，还能提升用户体验的沉浸感【1†source】。Three.js支持多种光照类型，每种类型都有其独特的应用场景和效果。

二、Three.js基础光照类型

Three.js提供了以下几种常用的光照类型：

1. 环境光（AmbientLight）

环境光是一种均匀的光源，它不会产生阴影，只会照亮整个场景。环境光适用于模拟漫反射的全局光照效果，例如室内环境的柔和光线【7†source】。

javascript 复制代码

// 创建环境光，颜色为白色，强度为1
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

2. 点光源（PointLight）

点光源是一种从一个点向所有方向发射光线的光源，能够模拟如灯泡、萤火虫等点状光源的效果。点光源会产生明显的阴影和明暗对比【7†source】。

javascript 复制代码

// 创建点光源，颜色为黄色，强度为2，衰减范围为10
const pointLight = new THREE.PointLight(0xffff00, 2, 10);
pointLight.position.set(5, 5, 5); // 设置光源位置
scene.add(pointLight);

3. 平行光（DirectionalLight）

平行光是一种模拟平行光线的光源，通常用于表现太阳光的效果。平行光能够产生清晰的阴影和强烈的明暗对比，适合模拟户外场景【9†source】。

javascript 复制代码

// 创建平行光，颜色为蓝色，强度为1
const directionalLight = new THREE.DirectionalLight(0x0000ff, 1);
directionalLight.position.set(0, 10, 0); // 设置光源位置
scene.add(directionalLight);

4. 聚光灯（SpotLight）

聚光灯是一种带有方向性和范围限制的光源，能够模拟手电筒、聚光灯等效果。聚光灯的光线呈锥形分布，可以通过调整角度和衰减参数来控制光照范围【7†source】。

javascript 复制代码

// 创建聚光灯，颜色为白色，强度为2，角度为45度
const spotLight = new THREE.SpotLight(0xffffff, 2, 100, Math.PI / 4);
spotLight.position.set(5, 5, 5); // 设置光源位置
spotLight.target.position.set(0, 0, 0); // 设置光照目标
scene.add(spotLight);

5. 区域光（RectAreaLight）

区域光是一种模拟矩形光源的光照类型，能够实现更复杂的光照效果，例如模拟窗户透进的光线【9†source】。

javascript 复制代码

// 创建区域光，尺寸为2x2，颜色为白色，强度为1
const rectAreaLight = new THREE.RectAreaLight(0xffffff, 1, 2, 2);
rectAreaLight.position.set(0, 5, 0); // 设置光源位置
scene.add(rectAreaLight);

三、Three.js进阶光照技巧

1. 光照贴图（Light Mapping）

光照贴图是一种通过预先计算场景中的间接光照分布，从而提升渲染效率的技术。Three.js支持光照贴图功能，能够帮助开发者实现更复杂的光影效果【3†source】。

javascript 复制代码

// 加载光照贴图
const loader = new THREE.TextureLoader();
const lightMap = loader.load('lightMap.jpg');

2. 间接光照（Indirect Lighting）

Three.js通过LightProbe类捕捉和模拟场景中的间接光照，从而增强材质的光照细节。LightProbe能够捕捉场景中的全局光照信息，并将其应用到物体表面【5†source】。

javascript 复制代码

// 创建LightProbe并设置其位置
const lightProbe = new THREE.LightProbe();
lightProbe.position.set(0, 5, 0);
scene.add(lightProbe);

3. 阴影效果（Shadow）

Three.js允许开发者通过配置光源和物体的阴影属性，实现实时的阴影计算。阴影效果能够显著提升场景的真实感【6†source】。

javascript 复制代码

// 启用平行光的阴影效果
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

四、Three.js光照实战案例

案例：创建一个带有环境光和平行光的3D场景

1. 场景初始化

javascript 复制代码

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 添加物体

javascript 复制代码

// 创建一个红色立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3. 添加光照

javascript 复制代码

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

4. 设置相机位置

javascript 复制代码

camera.position.z = 10;

5. 渲染循环

javascript 复制代码

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

五、总结与展望

Three.js的光照系统为开发者提供了强大的工具，能够实现从简单到复杂的光影效果。通过合理配置环境光、点光源、平行光等基础光照类型，结合光照贴图、间接光照和阴影效果等进阶技巧，开发者可以打造出生动、真实的3D场景【4†source】。

未来，随着WebGL和GPU技术的不断发展，Three.js的光照效果将更加逼真，甚至能够实现光线追踪等高级效果。对于开发者而言，掌握Three.js的光照技术不仅是提升项目质量的关键，也是探索3D图形领域无限可能的基石。