光源
光源特点
当使用MeshLambertMaterial材质时，会受到光线的影响， 我们代码里面如果没有设置光线，则使用MeshLambertMaterial材质修饰的模型不可见，这个时候，我们添加光线后，便可以看见。
环境光
定义：环境光是一种均匀照亮整个场景的光源，它没有特定的方向
特点：环境光通常用于模拟环境光照，如天空光或者漫反射。它默认不会产生阴影，但可以为场景提供一个基本的照明，使物体能够被看见。
属性：主要属性包括颜色和强度。颜色决定了环境光的色调，强度决定了环境光的亮度
示例
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
// 创建一个白色的环境光，强度为0.5
scene.add(ambientLight); // 将环境光添加到场景中点光源
定义：点光源 PointLight (opens new window) 可以类比为一个发光点，就像生活中一个灯泡，以灯泡为中心向四周发射光线
特点：点光源可以模拟现实世界中的灯泡、蜡烛等光源效果。它默认不会产生阴影（但新版本可能支持），但可以通过设置属性来控制其颜色、强度、照射距离等、
属性：主要属性包括颜色、强度、照射距离、衰减等。
示例
// 导入点光源
import { PointLight } from "three";
// 创建点光源并设置白色光、光照强度200、最远照射距离10
const light = new PointLight(0xffffff, 200, 10);
// 设置点光源的位置，x轴5，y轴5，z轴3
light.position.set(5, 5, 3);
// 将点光源添加到场景
scene.add(light);
聚光灯
定义：聚光灯是一种从一个点向特定方向发射追星光线的光源。
特点：聚光灯可以产生阴影，常用于模拟手电筒、台灯、舞台灯光等效果。它具有光锥角度、边缘模糊半径、衰减等属性，可以精确控制光照范围和阴影效果。
属性：主要属性包括颜色、强度、距离、角度、边缘模糊半径、衰减等。
示例
const spotLight = new THREE.SpotLight(0xffffff, 1);
// 创建一个白色的聚光灯，强度为1
spotLight.position.set(-10, 10, 0); // 设置聚光灯的位置
spotLight.angle = Math.PI / 10; // 设置光锥角度
spotLight.penumbra = 0.2; // 设置边缘模糊半径
scene.add(spotLight); // 将聚光灯添加到场景中方向光
定义：方向光又称为平行光，是一种类似于太阳光的光源。
特点：方向光从一个方向发射光线，并且光线是平行的。它不会随着距离的增加而衰减，常用于模拟太阳光、月光等远距离光源的效果。
属性：主要属性包括颜色、强度和方向。方向通常通过设置光源的位置来确定（但实际上光源位于无限远处，因此位置属性仅用于确定方向）。
示例
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 创建一个白色的方向光，强度为1
directionalLight.position.set(0, 0, 1); // 设置方向光的位置（确定方向）
scene.add(directionalLight); // 将方向光添加到场景中半球光
定义：半球光是一种特殊的光源，它可以模拟天空光和地面反射光的效果。
特点：半球光为室内或室外场景创建更加自然的光照效果。它的颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。
属性：主要属性包括天空颜色、地面颜色、强度和位置
示例
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
// 创建一个半球光，天空为白色，地面为黑色，强度为1
hemisphereLight.position.set(0, 10, 0);
// 设置半球光的位置（虽然位置对光照效果影响不大，但可以用于调整光源的参考点）
scene.add(hemisphereLight); // 将半球光添加到场景中平面光
定义：平面光是一种从矩形平面均匀发射光线的光源。
特点：平面光可以模拟明亮的窗户或条状灯光等效果，常用于室内和家具建模等场景。它提供特定方向和范围的光照，使物体产生明暗变化和阴影效果。
属性：主要属性包括颜色、强度、宽度和高度。
注意：在WebGLRenderer中使用AreaLight可能会有性能问题，因此可能需要使用特定的渲染器或优化技术。
示例
// 创建场景
const scene = new Scene();
scene.background = new THREE.Color(0xeeeeee);
// 创建相机
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight,
0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建平面光
const width = 10;
const height = 10;
const intensity = 1;
const rectLight = new RectAreaLight(0xffffff, intensity, width, height);
rectLight.position.set(2.5, 2.5, 5);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);
// 可选：创建平面光辅助器，用于可视化平面光的位置和大小
const rectLightHelper = new RectAreaLightHelper(rectLight);
scene.add(rectLightHelper);
// 添加一个简单的几何体以查看光照效果
const geometry = new PlaneBufferGeometry(5, 5);
const material = new MeshBasicMaterial({ color: 0x00ff00 });
const plane = new Mesh(geometry, material);
plane.position.set(0, 0, 0);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();每一字一句皆凝聚心血，创作之路坎坷不易，在此诚挚邀请各位大佬伸出援手，点赞支持，您的每一次认可都是我们激情创作的无限源泉！
