<!-- Three.js 渐进式光照贴图系统
一、核心功能概述
1.1 主要功能
这是一个基于Three.js的渐进式光照贴图生成系统，能够实时、逐步地为3D场景计算高质量的全局光照效果。系统通过多帧累积来自不同方向的光照采样，生成近似于离线渲染品质的光照贴图。

1.2 工作流程
初始化阶段：创建3D场景，加载模型，设置光照系统

采样阶段：每帧随机改变光源位置，从不同方向照射场景

累积阶段：将每帧的光照信息累加到光照贴图中

收敛阶段：随着采样次数增加，光照效果逐渐稳定和完善

二、核心技术点详解
2.1 渐进式光照贴图算法
2.1.1 核心原理
javascript
// 核心算法步骤：
// 1. 每帧使用随机位置的光源渲染场景
// 2. 将渲染结果累积到光照贴图纹理中
// 3. 通过加权平均混合新旧光照信息
// 4. 随着帧数增加，光照效果逐渐收敛到最终状态
2.1.2 算法优势
实时反馈：用户可立即看到光照效果，无需等待完整计算

可中断性：可在任何时间停止采样，获得当前最佳结果

渐进优化：光照质量随时间线性提升

交互性：允许在计算过程中调整参数和视角

2.2 双模式光源采样策略
2.2.1 目标区域采样
javascript
// 在光源控制点周围随机采样
// 模拟定向光源（如太阳、聚光灯）
if (Math.random() > ambientWeight) {
    light.position = lightOrigin + randomVector * lightRadius;
}
用途：模拟主光源和直接照明

特点：光照方向集中，产生清晰的阴影和高光

控制参数：光源半径、光源原点位置

2.2.2 半球均匀采样
javascript
// 在模型上方的半球面上均匀采样
// 模拟环境光和天空光
const lambda = acos(2*random()-1) - π/2;
const phi = 2π * random();
light.position = sphericalToCartesian(lambda, phi) * radius;
用途：模拟环境光遮蔽和间接照明

特点：光照方向分散，产生柔和的全局照明

数学基础：球面坐标系均匀采样

2.2.3 权重混合机制
参数：环境光权重（0-1）

逻辑：根据权重值动态选择采样策略

效果：权重为0时全用定向采样，权重为1时全用环境采样

2.3 光照贴图管理系统
2.3.1 多对象支持
javascript
// 光照贴图对象列表包含：
// 1. 方向光源（用于采样）
// 2. 地面网格
// 3. 模型的所有网格子对象
lightmapObjects = [dirLights, groundMesh, modelMeshes];
progressiveSurfacemap.addObjectsToLightMap(lightmapObjects);
2.3.2 纹理管理
分辨率：1024×1024像素（可配置）

格式：浮点纹理，支持HDR光照值

更新策略：增量更新，避免全纹理重绘

2.3.3 边缘处理
模糊边缘：消除UV接缝处的光照不连续

混合窗口：控制新旧光照信息的混合速度

防止闪烁：通过加权平均稳定光照变化

2.4 实时交互系统
2.4.1 相机控制系统
OrbitControls：轨道控制器，支持旋转、平移、缩放

视角限制：防止相机穿模和翻转

阻尼效果：平滑的相机移动体验

2.4.2 对象变换系统
TransformControls：Gizmo变换工具

双重控制：可分别控制光源和模型

防冲突机制：变换时自动禁用相机控制

2.4.3 参数实时调整
javascript
// GUI控制的实时参数：
const params = {
    '启用': true,           // 总开关
    '模糊边缘': true,       // 消除接缝
    '混合窗口': 200,        // 收敛速度
    '光源半径': 50,         // 采样范围
    '环境光权重': 0.5,      // 光照类型平衡
    '调试光照贴图': false   // 纹理查看
};
2.5 渲染管线优化
2.5.1 阴影渲染
阴影贴图分辨率：512×512（性能与质量平衡）

阴影相机优化：紧贴场景的视锥体

多重阴影：8个光源各自产生阴影

2.5.2 材质系统
统一材质：所有网格使用MeshPhongMaterial

光照贴图支持：材质自动适配光照贴图

实时更新：材质随光照贴图更新

2.5.3 性能优化
多光源并行：8个光源同时采样，加速收敛

选择性渲染：非网格对象禁用渲染

纹理复用：光照贴图纹理重复使用

三、系统架构设计
3.1 模块划分
text
渐进式光照贴图系统
├── 核心引擎 (ProgressiveLightMap)
│   ├── 纹理管理
│   ├── 采样累积
│   └── 混合算法
├── 光照系统
│   ├── 方向光源组
│   ├── 采样策略
│   └── 阴影管理
├── 场景管理
│   ├── 模型加载
│   ├── 对象组织
│   └── 材质分配
├── 交互系统
│   ├── 相机控制
│   ├── 对象变换
│   └── GUI控制
└── 渲染管线
    ├── 主渲染循环
    ├── 阴影渲染
    └── 后期处理
3.2 数据流
text
用户交互 → 参数调整 → 光源采样 → 场景渲染
    ↓                              ↓
GUI控制                      光照信息捕获
    ↓                              ↓
实时反馈 ← 纹理累积 ← 信息混合 ← 阴影计算
四、关键技术特性
4.1 渐进式收敛
线性收敛：光照误差随采样次数线性减小

视觉反馈：用户可观察收敛过程

可预测性：收敛速度由参数控制

4.2 实时性保障
帧率稳定：60FPS下稳定运行

增量更新：每帧只更新部分光照

GPU加速：利用WebGL硬件加速

4.3 质量控制
抗锯齿：渲染器级别抗锯齿

HDR支持：浮点纹理存储高动态范围

边缘平滑：模糊算法消除接缝

4.4 扩展性设计
模块化：各组件独立，易于替换

参数化：所有关键参数可调

兼容性：支持标准3D模型格式

五、应用价值
5.1 技术演示
展示了Three.js高级图形编程能力

实现了传统上需要离线计算的全局光照

提供了实时的交互式光照预览

5.2 实用场景
游戏开发：实时光照预计算和预览

建筑可视化：交互式光照设计和评估

产品设计：材质和光照的实时调整

教育培训：光照算法教学演示

5.3 技术贡献
WebGL创新：在浏览器中实现高级光照算法

用户体验：将复杂的离线计算转化为实时交互

开源参考：为Three.js社区提供高质量示例

六、性能指标
6.1 渲染性能
基础帧率：≥60 FPS（现代GPU）

内存占用：~50-100MB（取决于场景复杂度）

初始化时间：1-3秒（包括模型加载）

6.2 收敛效率
初步效果：100帧内可见明显光照

良好质量：500帧达到良好收敛

完全收敛：2000帧达到稳定状态

6.3 兼容性
浏览器支持：Chrome、Firefox、Edge（WebGL2）

硬件要求：支持浮点纹理的GPU

移动设备：部分支持，性能可能受限

七、技术局限性
7.1 算法限制
动态对象：不支持实时移动对象的准确光照

镜面反射：主要为漫反射光照，高光效果有限

透明材质：对透明和折射支持有限

7.2 性能限制
大场景：复杂场景可能需要更高分辨率的光照贴图

实时更新：完全重新计算光照需要重启累积过程

内存使用：高分辨率光照贴图消耗较多显存

7.3 功能限制
实时全局光照：不能完全替代实时光线追踪

材质限制：需要特定材质类型支持

UV要求：需要良好的UV展开 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示项目名称和功能描述 -->
		<title>Three.js WebGL - 渐进式光照贴图累积系统</title>
		<!-- 字符编码：指定使用UTF-8编码支持中文 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动端，禁止用户缩放，设置缩放范围 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 外部CSS样式表链接：引入页面样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 3D场景的主容器：Three.js渲染器将把canvas元素添加到这里 -->
		<div id="container"></div>
		
		<!-- 页面底部信息栏：显示项目信息和版权声明 -->
		<div id="info">
			<!-- 项目框架信息：Three.js是一个流行的WebGL库 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 渐进式光照贴图系统 
			<!-- 开发者信息：本功能由zalo开发 -->
			由 <a href="https://github.com/zalo" target="_blank" rel="noopener">zalo</a> 开发<br/>
			<!-- 灵感来源：引用Evan Wallace的光照贴图生成技术 -->
			[灵感来源于 <a href="http://madebyevan.com/shaders/lightmap/" target="_blank" rel="noopener">Evan Wallace的光照贴图生成技术</a>]
		</div>

		<!-- ES模块导入映射表：现代浏览器中用于指定模块路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有3D场景逻辑 -->
		<script type="module">
			// 1. ==================== 导入模块 ====================
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';
			// 导入轻量级GUI库，用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			// 导入GLTF模型加载器，支持加载glTF/GLB格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			// 导入轨道控制器，允许用户用鼠标拖拽、缩放、旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入变换控制器，提供3D对象的移动、旋转、缩放变换工具
			import { TransformControls } from 'three/addons/controls/TransformControls.js';
			// 导入渐进式光照贴图类，这是本项目的核心功能
			import { ProgressiveLightMap } from 'three/addons/misc/ProgressiveLightMap.js';

			// 2. ==================== 常量定义 ====================
			// 阴影贴图分辨率：决定阴影质量的像素尺寸（较低性能消耗）
			const shadowMapRes = 512;
			// 光照贴图分辨率：决定光照贴图质量的像素尺寸（较高质量需求）
			const lightMapRes = 1024;
			// 方向光数量：用于光照采样的光源数量，越多收敛越快但性能消耗越大
			const lightCount = 8;

			// 3. ==================== 全局变量声明 ====================
			// 核心Three.js对象
			let camera;         // 场景相机：定义观察视角
			let scene;          // 场景对象：包含所有3D对象的容器
			let renderer;       // 渲染器：负责将3D场景渲染到2D画布
			
			// 控制器对象
			let controls;       // 轨道控制器：相机交互控制
			let control;        // 变换控制器1：用于控制光源位置
			let control2;       // 变换控制器2：用于控制3D模型
			
			// 场景对象
			let object = new THREE.Mesh();  // 3D模型对象：初始化为空网格，稍后加载模型
			let lightOrigin = null;         // 光源原点：方向光源采样的中心参考点
			
			// 渐进式光照贴图核心对象
			let progressiveSurfacemap;      // 渐进式光照贴图实例：管理光照贴图的生成和更新

			// 4. ==================== 数组声明 ====================
			// 方向光源数组：存储所有用于光照采样的方向光对象
			const dirLights = [];
			// 光照贴图对象数组：存储所有需要生成光照贴图的网格对象
			const lightmapObjects = [];

			// 5. ==================== 参数配置对象 ====================
			// 这些参数可以通过GUI界面实时调整
			const params = {
				'启用': true,                    // 总开关：启用/禁用渐进式光照贴图计算
				'模糊边缘': true,                // 边缘模糊：消除光照贴图的接缝瑕疵
				'混合窗口': 200,                 // 混合窗口大小：控制光照累积的采样次数，越大收敛越慢但质量越高
				'光源半径': 50,                  // 光源采样半径：控制方向光源位置的随机变化范围
				'环境光权重': 0.5,               // 环境光权重：0-1之间，0=完全方向光采样，1=完全环境光采样
				'调试光照贴图': false           // 调试模式：直接显示光照贴图纹理，用于调试检查
			};

			// 6. ==================== 初始化调用 ====================
			init();          // 初始化Three.js场景和所有组件
			createGUI();     // 创建图形用户界面控制面板

			/**
			 * 初始化函数 - Three.js场景的完整设置
			 * 这个函数执行所有必要的初始化步骤，包括：
			 * 1. 创建渲染器、相机、场景
			 * 2. 设置光照贴图系统
			 * 3. 添加光源和地面
			 * 4. 加载3D模型
			 * 5. 设置用户交互控制器
			 */
			function init() {
				// ==================== 6.1 创建WebGL渲染器 ====================
				// 参数说明：{ antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				renderer.setPixelRatio(window.devicePixelRatio);       // 设置设备像素比，适配高DPI屏幕
				renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸为全屏
				renderer.setAnimationLoop(animate);                    // 设置动画循环回调函数
				renderer.shadowMap.enabled = true;                     // 启用阴影映射系统
				// 将渲染器的canvas元素添加到DOM的body中
				document.body.appendChild(renderer.domElement);

				// ==================== 6.2 创建透视相机 ====================
				// 参数说明：
				// 70: 垂直视野角度(FOV)，单位度，模拟人眼视野
				// window.innerWidth / window.innerHeight: 宽高比
				// 1: 近裁剪平面，比此更近的对象不渲染
				// 1000: 远裁剪平面，比此更远的对象不渲染
				camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
				camera.position.set(0, 100, 200);     // 设置相机初始位置：(x, y, z)
				camera.name = '相机';                 // 给相机命名，便于调试

				// ==================== 6.3 创建场景 ====================
				scene = new THREE.Scene();                             // 创建新的场景对象
				scene.background = new THREE.Color(0x949494);          // 设置场景背景色（浅灰色）
				// 添加雾效：模拟大气透视效果，增强场景深度感
				// 参数：颜色，近雾距离，远雾距离
				scene.fog = new THREE.Fog(0x949494, 1000, 3000);

				// ==================== 6.4 创建渐进式光照贴图实例 ====================
				// 这是本项目的核心技术组件
				// 参数：渲染器实例，光照贴图分辨率
				progressiveSurfacemap = new ProgressiveLightMap(renderer, lightMapRes);

				// ==================== 6.5 创建光源控制点 ====================
				// 这个组对象用于控制方向光源的采样中心位置
				lightOrigin = new THREE.Group();      // 创建空组对象（可包含多个子对象）
				lightOrigin.position.set(60, 150, 100); // 设置初始位置
				scene.add(lightOrigin);               // 添加到场景中

				// ==================== 6.6 创建光源变换控制器 ====================
				// 这个控制器允许用户拖拽移动光源控制点
				control = new TransformControls(camera, renderer.domElement);
				// 添加拖拽状态变化事件监听器
				control.addEventListener('dragging-changed', (event) => {
					// 当用户拖拽控制器时，禁用轨道控制器，避免交互冲突
					controls.enabled = !event.value;
				});
				control.attach(lightOrigin);           // 将控制器附加到光源控制点
				scene.add(control.getHelper());        // 添加控制器的辅助对象（显示变换工具）

				// ==================== 6.7 创建方向光源数组 ====================
				// 使用多个方向光源并行采样，加速光照收敛过程
				for (let l = 0; l < lightCount; l++) {
					// 创建新的方向光源
					// 参数：光源颜色(白色)，光照强度(Math.PI / lightCount确保总强度恒定)
					const dirLight = new THREE.DirectionalLight(0xffffff, Math.PI / lightCount);
					dirLight.name = '方向光 ' + l;    // 给光源命名便于识别
					dirLight.position.set(200, 200, 200); // 设置初始位置
					dirLight.castShadow = true;           // 启用阴影投射
					
					// ===== 阴影相机设置 =====
					// 方向光的阴影使用正交相机投影
					dirLight.shadow.camera.near = 100;     // 阴影近裁剪平面
					dirLight.shadow.camera.far = 5000;     // 阴影远裁剪平面
					// 设置正交相机的边界（创建视锥体）
					dirLight.shadow.camera.right = 150;    // 右边界
					dirLight.shadow.camera.left = -150;    // 左边界
					dirLight.shadow.camera.top = 150;      // 上边界
					dirLight.shadow.camera.bottom = -150;  // 下边界
					
					// ===== 阴影贴图质量设置 =====
					// 分辨率越高阴影越清晰，但性能消耗越大
					dirLight.shadow.mapSize.width = shadowMapRes;   // 阴影贴图宽度
					dirLight.shadow.mapSize.height = shadowMapRes;  // 阴影贴图高度
					
					// ===== 将光源添加到相应数组 =====
					lightmapObjects.push(dirLight);   // 添加到光照贴图对象列表
					dirLights.push(dirLight);         // 添加到方向光源数组
				}

				// ==================== 6.8 创建地面 ====================
				// 地面作为场景的基础平面，接收阴影和光照
				const groundMesh = new THREE.Mesh(
					// 平面几何体：宽度600，高度600
					new THREE.PlaneGeometry(600, 600),
					// Phong材质：对光照反应真实，支持高光和阴影
					new THREE.MeshPhongMaterial({ 
						color: 0xffffff,      // 白色材质
						depthWrite: true      // 启用深度写入，确保正确遮挡
					})
				);
				groundMesh.position.y = -0.1;              // 略微下沉，避免与模型发生Z-fighting
				groundMesh.rotation.x = -Math.PI / 2;      // 旋转90度，使平面水平（Three.js中平面默认垂直）
				groundMesh.name = '地面网格';               // 设置名称
				lightmapObjects.push(groundMesh);          // 添加到光照贴图对象列表
				scene.add(groundMesh);                     // 添加到场景

				/**
				 * 6.9 模型加载完成回调函数
				 * 当GLTF模型加载完成后，此函数被调用
				 * 主要任务：
				 * 1. 设置模型的材质和阴影属性
				 * 2. 将模型添加到光照贴图系统
				 * 3. 设置光源目标点
				 */
				function loadModel() {
					// 遍历模型的所有子对象
					// traverse()方法递归访问对象及其所有子对象
					object.traverse(function (child) {
						// 检查对象是否是网格（可渲染的几何体）
						if (child.isMesh) {
							child.name = '加载的网格';           // 设置网格名称
							child.castShadow = true;           // 允许投射阴影
							child.receiveShadow = true;        // 允许接收阴影
							// 使用Phong材质替换原始材质
							// 注意：光照贴图需要特定类型的材质才能工作
							child.material = new THREE.MeshPhongMaterial();

							// 将网格添加到光照贴图对象列表
							// 这些对象将参与光照贴图的计算
							lightmapObjects.push(child);
							// 将对象列表注册到渐进式光照贴图系统
							// 系统会为这些对象生成光照贴图
							progressiveSurfacemap.addObjectsToLightMap(lightmapObjects);
						} else {
							// 对于非网格对象（如骨骼、空对象等）
							// 禁用所有渲染层，使其不可见但保留在场景中
							child.layers.disableAll();
						}
					});
					
					// 将模型添加到场景
					scene.add(object);
					object.scale.set(2, 2, 2);              // 统一缩放模型为2倍
					object.position.set(0, -16, 0);         // 设置模型位置

					// 为模型创建变换控制器
					// 允许用户移动、旋转、缩放模型
					control2 = new TransformControls(camera, renderer.domElement);
					control2.addEventListener('dragging-changed', (event) => {
						// 当拖拽模型时，禁用轨道控制器
						controls.enabled = !event.value;
					});
					control2.attach(object);               // 将控制器附加到模型
					scene.add(control2.getHelper());       // 添加控制器的辅助对象

					// 创建光源目标点
					// 所有方向光源将指向这个目标点
					const lightTarget = new THREE.Group();  // 创建空组对象
					lightTarget.position.set(0, 20, 0);     // 设置目标点位置
					
					// 将所有方向光的目标设置为该点
					// 这使得所有光源从不同位置照射同一个点
					for (let l = 0; l < dirLights.length; l++) {
						dirLights[l].target = lightTarget;
					}
					
					// 将光源目标点添加到模型
					// 这样当模型移动时，光源目标也一起移动
					object.add(lightTarget);
				}

				// ==================== 6.10 加载GLTF模型 ====================
				// 创建加载管理器，指定模型加载完成后的回调函数
				const manager = new THREE.LoadingManager(loadModel);
				// 创建GLTF加载器实例
				const loader = new GLTFLoader(manager);
				// 加载GLTF模型文件
				loader.load(
					'models/gltf/ShadowmappableMesh.glb',  // 模型文件路径
					function (obj) {
						// 加载成功回调
						// 获取场景的第一个子对象作为主要模型
						object = obj.scene.children[0];
					},
					// 注意：这里省略了加载进度和错误处理回调
					// 实际项目中应该添加这些回调以提供更好的用户体验
				);

				// ==================== 6.11 创建轨道控制器 ====================
				// 轨道控制器提供直观的相机控制方式
				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true;         // 启用阻尼效果（惯性），使相机移动更平滑
				controls.dampingFactor = 0.05;         // 阻尼系数，值越小惯性越明显
				controls.screenSpacePanning = true;    // 启用屏幕空间平移（相对于屏幕而非世界空间）
				controls.minDistance = 100;            // 相机最小缩放距离（防止穿模）
				controls.maxDistance = 500;            // 相机最大缩放距离
				controls.maxPolarAngle = Math.PI / 1.5; // 最大俯仰角（防止相机翻转）
				controls.target.set(0, 100, 0);        // 设置控制器焦点位置

				// ==================== 6.12 添加窗口大小改变事件监听 ====================
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 7. 创建GUI控制面板
			 * 使用lil-gui库创建交互式控制面板
			 * 允许用户实时调整光照贴图参数
			 */
			function createGUI() {
				// 创建GUI实例，设置标题
				const gui = new GUI({ title: '光照累积设置' });
				
				// 添加各种控制组件
				gui.add(params, '启用')                // 添加启用/禁用开关
				   .name('启用光照贴图');              // 设置显示名称
				
				gui.add(params, '模糊边缘')            // 添加边缘模糊开关
				   .name('模糊边缘');
				
				// 添加混合窗口滑块
				// 参数：目标对象，属性名，最小值，最大值，步长
				gui.add(params, '混合窗口', 1, 500)
				   .step(1)                          // 每次增减1
				   .name('混合窗口大小');
				
				// 添加光源半径滑块
				gui.add(params, '光源半径', 0, 200)
				   .step(10)                         // 每次增减10
				   .name('光源采样半径');
				
				// 添加环境光权重滑块
				gui.add(params, '环境光权重', 0, 1)
				   .step(0.1)                        // 每次增减0.1
				   .name('环境光权重');
				
				gui.add(params, '调试光照贴图')       // 添加调试模式开关
				   .name('显示调试光照贴图');
			}

			/**
			 * 8. 窗口大小改变回调函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法应用更改）
				camera.updateProjectionMatrix();
				// 更新渲染器尺寸为新的窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 9. 动画循环函数
			 * 这是Three.js的主循环，每帧自动调用
			 * 执行顺序：
			 * 1. 更新控制器
			 * 2. 更新光照贴图
			 * 3. 更新光源位置
			 * 4. 渲染场景
			 */
			function animate() {
				// ==================== 9.1 更新轨道控制器 ====================
				// 必须每帧调用update()以应用阻尼效果
				controls.update();

				// ==================== 9.2 更新渐进式光照贴图 ====================
				// 如果启用了光照贴图功能
				if (params['启用']) {
					// 更新光照贴图系统
					// 参数：当前相机，混合窗口大小，是否模糊边缘
					progressiveSurfacemap.update(camera, params['混合窗口'], params['模糊边缘']);

					// 如果不是第一次更新（系统已初始化）
					if (!progressiveSurfacemap.firstUpdate) {
						// 根据调试模式开关显示或隐藏光照贴图纹理
						progressiveSurfacemap.showDebugLightmap(params['调试光照贴图']);
					}
				}

				// ==================== 9.3 更新方向光源位置 ====================
				// 每帧随机更新所有方向光源的位置
				// 这是渐进式光照的核心：通过多次不同位置的采样累积光照信息
				for (let l = 0; l < dirLights.length; l++) {
					// 根据环境光权重决定光源采样策略
					// 随机数大于权重值时，使用目标区域采样
					if (Math.random() > params['环境光权重']) {
						// 策略1：目标区域采样
						// 在光源控制点周围随机位置采样
						// 这模拟了来自特定方向的主光源
						dirLights[l].position.set(
							// x坐标：控制点x + 随机偏移（范围0到光源半径）
							lightOrigin.position.x + (Math.random() * params['光源半径']),
							// y坐标：控制点y + 随机偏移
							lightOrigin.position.y + (Math.random() * params['光源半径']),
							// z坐标：控制点z + 随机偏移
							lightOrigin.position.z + (Math.random() * params['光源半径'])
						);
					} else {
						// 策略2：半球均匀采样
						// 在模型上方的半球面上均匀采样
						// 这模拟了环境光遮蔽和天空光效果
						
						// 使用球面坐标系生成均匀分布的方向
						// lambda: 纬度角（从垂直方向的角度）
						// 公式：acos(2*rand-1) - π/2 确保角度在[-π/2, π/2]之间
						const lambda = Math.acos(2 * Math.random() - 1) - (Math.PI / 2.0);
						// phi: 经度角（围绕垂直轴的旋转）
						const phi = 2 * Math.PI * Math.random();
						
						// 将球面坐标转换为直角坐标
						dirLights[l].position.set(
							// x坐标：cos(lambda)*cos(phi) * 300 + 模型x位置
							// 300是采样半径，决定光源离模型的远近
							((Math.cos(lambda) * Math.cos(phi)) * 300) + object.position.x,
							// y坐标：取绝对值确保光源在上半球，+20确保光源在模型上方
							Math.abs((Math.cos(lambda) * Math.sin(phi)) * 300) + object.position.y + 20,
							// z坐标：sin(lambda) * 300 + 模型z位置
							(Math.sin(lambda) * 300) + object.position.z
						);
					}
				}

				// ==================== 9.4 渲染场景 ====================
				// 这是最终步骤：将3D场景渲染到2D画布上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>