如何使用Three.js添加光源

# 1. 介绍Three.js和光源的基本概念

Three.js是一个用于在Web浏览器中创建和展示3D图形的JavaScript库，它基于WebGL技术，并提供了简化的API和丰富的功能，使得开发者可以轻松地在网页中实现交互式的3D效果。

在Three.js中，光源是非常重要的元素，它们决定了3D物体的光照效果。光源可以模拟真实世界中的光照，给物体增添质感和逼真度。不同类型的光源会产生不同的光照效果，从而影响最终的渲染结果。

光源在Three.js中的作用主要有以下几点：

- 为场景中的物体提供光照效果，使其在渲染时能够正确地反射、折射、投影等。
- 模拟不同类型的光源，如点光源、平行光源和聚光灯光源，以创建不同的光照效果和渲染场景的氛围。
- 调整光源的位置、颜色、强度等属性，以达到所需的光照效果。

下面我们将逐个介绍在Three.js中常用的不同类型的光源，并讲解如何在场景中添加光源。

# 2. Three.js中不同类型的光源

在Three.js中，有三种常见的光源类型，包括点光源(PointLight)、平行光源(DirectionalLight)和聚光灯(SpotLight)。每种光源都有其特点和适用场景。下面将详细介绍每种光源的概念和用法。

### 1. 点光源(PointLight)

点光源是一种由一个点向各个方向发射光线的光源类型。它模拟了一个发光点，光线从该点向外辐射，它的亮度会随着距离的增加而衰减。点光源在场景中产生了类似于灯泡发出的光线效果。

**特点：**
- 点光源的光线是均匀向外辐射的，并且亮度衰减
- 可以通过调整光源的位置、颜色、强度等属性来达到不同的效果
- 适用于模拟室内灯光、灯泡等局部光照效果

### 2. 平行光源(DirectionalLight)

平行光源是一种由平行光线方向发出的光源类型。它模拟了太阳光的效果，光线是平行且方向一致的。平行光源的光线在整个场景中产生了类似于太阳光的效果，所有物体都会受到同样的光线照射。

**特点：**
- 平行光源光线平行且方向一致，不会衰减
- 可以通过调整光源的位置、颜色、强度等属性来达到不同的效果
- 适用于模拟户外场景、自然光等全局光照效果

### 3. 聚光灯(SpotLight)

聚光灯是一种特殊的光源类型，它模拟了聚光灯的效果，将光线聚集在一个锥形范围内。聚光灯的光线具有方向和锥形的角度，可以控制光线的强度和范围。

**特点：**
- 聚光灯光线具有方向和锥形范围
- 可以通过调整光源的位置、颜色、强度、锥形角度等属性来达到不同的效果
- 适用于模拟灯塔、手电筒、舞台照明等聚焦光照效果

以上是Three.js中的三种常见光源类型，每种光源有不同的特点和适用场景。在接下来的章节中，我们将详细介绍如何在Three.j