干货：three.js中的六大光源的知识点。

我们在二维屏幕中感知三维场景的一个最重要的要素就是光，光和光源是three.js中一个非常重要的知识点。本文想借着这个话题，为老铁们分享以下六大光源知识点：环境光、点光源、聚光灯、方向光、半球光、平面光。

一、点光源

在 Three.js 中，THREE.PointLight（点光源）是一种单点发光、向所有方向照射的光源。它可以模拟现实世界中类似于灯泡、蜡烛或照明弹等光源的效果。

点光源具有以下属性：

• color：光源的颜色。
• distance：光源照射的距离，默认值为0，意味着光的强度不会随着距离增加而减少。
• intensity：光源照射的强度，默认值为1。
• position：光源在场景中的位置。
• visible：如果该属性设置为“true”（默认值），该光源就会打开，如果设置为“false”，光源就会关闭。

通过设置这些属性，可以控制点光源的颜色、强度、照射范围和可见性等。

以下是一个创建点光源的示例代码：

const pointLight = new THREE.PointLight(0xff0000, 1, 100); 
pointLight.position.set(0, 0, 0); 
scene.add(pointLight);

在上述代码中，创建了一个红色的点光源，强度为1，照射距离为100，并将其位置设置为场景的原点(0, 0, 0)。最后，将点光源添加到场景中。

点光源可以为场景中的物体提供照明，产生阴影效果，增强场景的真实感和立体感。可以根据需要调整点光源的属性，以达到期望的照明效果。

---

二、环境光

在 Three.js 中，环境光（AmbientLight）是一种基本光源，它会均匀地照亮场景中的所有物体。环境光没有特定的来源方向，也不会产生阴影。

环境光的作用是为场景提供一个基本的照明，使物体能够被看见。它可以模拟现实世界中环境光的效果，例如来自天空、墙壁或其他周围物体的反射光。

环境光的颜色和强度可以通过设置相应的属性来调整。较亮的环境光可以使整个场景更明亮，而较暗的环境光可以营造出更暗的氛围。

通常情况下，环境光不会单独使用，而是与其他光源（如点光源、平行光等）结合使用，以达到更真实和丰富的照明效果。例如，可以使用环境光来弱化阴影或为场景添加一些额外的颜色。

以下是一个创建环境光的示例代码：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); 
scene.add(ambientLight);

在上述代码中，创建了一个白色的环境光，强度为 0.5，并将其添加到场景中。

需要注意的是，环境光的效果相对较为均匀，不会产生明显的高光和阴影。在实际应用中，可以根据需要调整环境光的属性，并结合其他光源来实现更复杂的照明效果。

---

三、聚光灯

在 Three.js 中，聚光灯（SpotLight）是一种从一个点向特定方向发射锥形光线的光源。它可以产生阴影，常用于模拟手电筒、台灯、舞台灯光等效果。

聚光灯具有以下属性：

• color：聚光灯的颜色。
• intensity：聚光灯的强度。
• distance：聚光灯的有效距离，超过该距离光线将不再产生影响。
• angle：聚光灯的光锥角度，决定了光线的扩散范围。
• penumbra：聚光灯锥形光圈的模糊半径，用于控制阴影的柔和度。
• decay：聚光灯的衰减系数，影响光线强度随距离的衰减速度。
• position：聚光灯的位置。
• target：聚光灯的目标位置（用于确定聚光灯的方向）。

通过设置这些属性，可以调整聚光灯的光照效果，如颜色、强度、照射范围、阴影等，以满足不同场景的需求。

在 Three.js 中添加聚光灯可以按照以下步骤进行：

1. 创建聚光灯对象：使用THREE.SpotLight构造函数创建一个聚光灯对象。
2. 设置聚光灯属性：例如颜色、强度、位置、照射范围等。
3. 将聚光灯添加到场景中：使用scene.add()方法将聚光灯添加到场景中。

以下是一个简单的示例代码：

// 创建聚光灯
const spotLight = new THREE.SpotLight(0xffffff, 1); 
spotLight.position.set(-10, 10, 0); 
spotLight.angle = Math.PI / 10; 
spotLight.penumbra = 0.2; 
scene.add(spotLight);

在上述代码中，创建了一个白色的聚光灯，强度为 1，位置为(-10, 10, 0)，照射范围的角度为 Math.PI / 10，边缘模糊半径为 0.2。最后，将聚光灯添加到场景中。

你可以根据需要调整聚光灯的属性，以获得不同的照明效果。

---

四、方向光

在 Three.js 中，方向光（DirectionalLight）又称为平行光，是一种类似于太阳光的光源。它从一个方向发射光线，并且光线是平行的，不会随着距离的增加而衰减。方向光可以用来模拟太阳光、月光等远距离光源的效果。

方向光的作用是照亮场景中的物体，使其产生明暗变化和阴影效果。通过设置方向光的颜色、强度和方向，可以营造出不同的光照氛围和视觉效果。

以下是一个添加方向光的示例代码：

// 创建方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
// 设置方向光的方向
DirectionalLight.position.set(0, 0, 1); 
// 将方向光添加到场景中
scene.add(DirectionalLight);

在上述代码中，首先创建了一个方向光对象，并设置了其颜色为白色，强度为 1。然后，通过设置方向光的位置来确定其照射方向。最后，将方向光添加到场景中。

你可以根据需要调整方向光的颜色、强度和方向，以获得不同的光照效果。同时，还可以结合其他光源和材质来进一步丰富场景的表现。

五、半球光

在 Three.js 中，半球光（HemisphereLight）是一种特殊的光源，它可以为室内或室外场景创建更加自然的光照效果，模拟反光面和光线微弱的天气。半球光的颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的——面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。

半球光的作用是为场景提供更加自然和真实的光照，使物体看起来更加立体和生动。它通常用于模拟天空光和地面反射光，可以与其他光源（如点光源、聚光灯、方向光等）结合使用，以增强场景的光照效果。
以下是一个添加半球光的示例代码：

// 创建半球光光源
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
// 设置光源位置
hemisphereLight.position.set(0, 10, 0);
// 将半球光添加到场景中
scene.add(hemisphereLight);

在上述代码中，首先创建了一个半球光光源对象，并设置了其颜色、强度和位置。然后，将半球光添加到场景中。你可以根据需要调整半球光的颜色、强度和位置，以获得不同的光照效果。

六、平面光

在 Three.js 中，平面光（RectAreaLight）是一种从矩形平面均匀发射光线的光源。它可以模拟明亮的窗户或条状灯光，常用于室内和家具建模等场景。

平面光的主要作用是为场景提供特定方向和范围的光照，使物体产生明暗变化和阴影效果。通过设置平面光的颜色、强度、宽度和高度，可以营造出不同的光照氛围和视觉效果。

以下是一个添加平面光的示例代码：

// 创建平面光
const rectLight = new THREE.RectAreaLight(0xffffff, 1, 10, 10); 
// 设置平面光的位置
rectLight.position.set(5, 5, 0); 
// 将平面光添加到场景中
scene.add(rectLight);

在上述代码中，首先创建了一个平面光对象，并设置了其颜色、强度、宽度和高度。然后，通过设置平面光的位置来确定其照射方向。最后，将平面光添加到场景中。

需要注意的是，平面光有以下几个特点：

• 不支持阴影；
• 只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质；
• 必须在场景中加入 RectAreaLightUniformsLib，并调用 init()。

你可以根据需要调整平面光的参数和位置，以获得不同的光照效果。同时，还可以结合其他光源和材质来进一步丰富场景的表现。