<!-- 代码功能概述
这是一个使用 Three.js WebGPU 渲染器 实现的 自定义光照模型演示。程序创建了一个包含 50万个粒子 的大型点云场景，通过 三个动态移动的彩色点光源 和 完全自定义的光照计算模型，展示了Three.js在下一代图形API（WebGPU）上的强大功能和灵活性。

核心功能展示：
动态光照效果：三个不同颜色（橙、蓝、绿）的点光源按照各自不同的数学轨迹在3D空间中移动

大规模点云渲染：实时渲染50万个粒子点，展示WebGPU渲染器的高性能

自定义光照计算：完全控制光照计算逻辑，不依赖于Three.js内置的标准光照模型

交互式3D场景：用户可以通过鼠标拖拽、滚轮缩放等方式自由探索场景

光源可视化：每个点光源都附加了一个小圆球，直观显示光源位置

主要技术点详解
1. WebGPU 渲染器 (WebGPURenderer)
技术特点：使用下一代图形API WebGPU，相比WebGL有更好的性能和多线程支持

优势：更高效的GPU利用率、更好的并行计算能力、更现代的特性支持

应用：new THREE.WebGPURenderer({ antialias: true })

2. TSL (Three.js Shading Language)
是什么：Three.js的声明式着色器编程系统

特点：

使用JavaScript语法编写着色器逻辑

自动生成优化的GLSL/WebGPU着色器代码

支持节点式编程，易于组合复杂效果

关键用法：

javascript
import { color, lights } from 'three/tsl';
material.colorNode = color(hexColor);
material.lightsNode = lights([light1, light2, light3]);
3. 自定义光照模型 (CustomLightingModel)
继承体系：扩展 THREE.LightingModel 基类

核心方法：重写 direct() 方法定义光照计算逻辑

简化实现：

javascript
direct({ lightColor, reflectedLight }) {
  // 直接将光源颜色加到漫反射分量
  reflectedLight.directDiffuse.addAssign(lightColor);
}
技术意义：绕过Three.js的标准PBR光照模型，实现完全自定义的光照效果

4. 选择性光源系统
技术实现：lights([light1, light2, light3])

作用：只对指定的三个点光源应用自定义光照模型，忽略场景中其他潜在光源

优势：

精确控制哪些光源参与计算

提高渲染性能

实现特殊的光照效果组合

5. 点云大规模渲染
数据量：500,000个随机分布的点

几何体创建：

javascript
const geometryPoints = new THREE.BufferGeometry().setFromPoints(points);
性能优化：使用BufferGeometry和类型化数组，GPU传输效率高

材质：PointsNodeMaterial 专门用于点云渲染

6. 动态光源动画
数学原理：使用三角函数（Math.sin()、Math.cos()）创建周期性运动

参数设计：每个光源使用不同的频率参数（0.3、0.5、0.7等）

效果：产生复杂但规律的3D运动轨迹

实现：

javascript
light1.position.x = Math.sin(time * 0.7) * scale;
light1.position.y = Math.cos(time * 0.5) * scale;
// ...其他坐标和光源
7. 用户交互系统
控制器：OrbitControls 轨道控制器

交互方式：

鼠标左键拖拽：旋转视角

鼠标滚轮：缩放场景

鼠标右键拖拽：平移视角

配置：

javascript
controls.minDistance = 0;   // 最小缩放距离
controls.maxDistance = 4;   // 最大缩放距离
8. 响应式布局
窗口适应：监听 resize 事件，自动调整相机和渲染器

关键代码：

javascript
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
9. 模块化系统
ES6模块：使用 type="module" 标签

导入映射：importmap 配置模块路径别名

模块分离：核心库、TSL、插件清晰分离

10. 动画循环
机制：renderer.setAnimationLoop(animate)

原理：基于 requestAnimationFrame，与显示器刷新率同步

优势：平滑的60FPS动画，节能的渲染调度

技术架构亮点
渲染管线：
text
JavaScript逻辑 → TSL节点图 → WebGPU着色器 → GPU渲染 → Canvas输出
光照计算流程：
text
1. 每个片元（点云中的每个点）执行着色器
2. 对每个启用的光源调用 CustomLightingModel.direct()
3. 累积所有光源的贡献到 reflectedLight.directDiffuse
4. 输出最终颜色到屏幕
性能优化：
WebGPU原生性能：更好的多线程和并行处理

BufferGeometry：高效的GPU数据传输

选择性光源：减少不必要的着色器计算

GPU驱动动画：所有动画在GPU上执行，CPU负担轻

教育意义
这个示例演示了：

如何扩展Three.js的核心系统：通过继承LightingModel

现代图形编程范式：声明式着色器编程（TSL）

性能敏感场景的处理：大规模粒子系统的优化

交互式3D应用的完整架构：从初始化到动画循环的全流程

WebGPU的优势展示：处理复杂场景的能力

可扩展方向
更复杂的光照模型：添加法线计算、距离衰减、镜面反射等

更多光源类型：支持聚光灯、方向光、环境光等

物理正确性：实现PBR（基于物理的渲染）模型

后处理效果：添加辉光、景深、色彩分级等

交互增强：点击选择粒子、动态修改光源参数等 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题
			描述了这个示例的主要功能：使用Three.js的WebGPU渲染器实现自定义光照模型
		-->
		<title>three.js WebGPU 渲染器 - 自定义光照模型演示</title>
		
		<!-- 
			字符编码设置
			UTF-8编码确保可以正确显示中文字符和各种特殊符号
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置 - 针对移动端优化
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放页面
			minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
			这些设置确保在移动设备上获得最佳的视觉体验和性能
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表
			example.css 应该包含页面的基本样式，如布局、颜色、字体等
			type="text/css" 指定了链接资源的MIME类型
			rel="stylesheet" 定义了当前文档与链接资源的关系
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			页面信息展示区域容器
			id="info" 为该div元素指定唯一标识符，方便CSS和JavaScript进行选择和操作
			这个区域通常用于显示标题、描述、链接等辅助信息
		-->
		<div id="info">
			<!-- 
				Three.js官方Logo链接
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全措施，防止新打开的页面访问原页面的window对象
				class="logo-link": CSS类名，通常用于设置Logo的背景图片、尺寸等样式
				这是一个空链接，点击Three.js Logo会跳转到Three.js官网
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装容器
				用于组织主标题和副标题的布局
			-->
			<div class="title-wrapper">
				<!-- 
					主标题链接
					Three.js的官方链接，同样在新标签页打开
					这里显示"Three.js"文本，点击跳转到官网
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 
					副标题
					用span标签包裹，表示内联元素
					这里显示当前示例的具体功能描述
				-->
				<span>自定义光照模型演示</span>
			</div>

			<!-- 
				详细描述区域
				使用<small>标签表示次要的、较小的文字内容
				这里提供了示例的简要技术说明
			-->
			<small>
				本示例展示了使用Three.js WebGPU渲染器创建自定义光照模型，并实现选择性光源控制。
				场景中包含三个不同颜色的动态点光源，它们对包含50万个粒子的点云施加自定义的光照效果。
				您可以使用鼠标或触摸屏进行旋转、缩放和平移操作来查看不同角度的效果。
			</small>
			
			
		</div>

		<!-- 
			ES模块导入映射(Import Map)配置
			type="importmap" 告诉浏览器这是一个导入映射声明
			导入映射允许开发者控制JavaScript模块的解析方式
			在现代浏览器中，这允许使用"裸模块说明符"(bare module specifiers)
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					
					"three/webgpu": "../build/three.webgpu.js",
					
					"three/tsl": "../build/three.tsl.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript程序模块
			type="module" 表示这是一个ES6模块，支持模块化导入导出
			浏览器会自动延迟(defer)执行模块脚本，无需手动设置defer属性
		-->
		<script type="module">

			// ============================================================================
			// 模块导入部分
			// ============================================================================
			
			// 导入Three.js的WebGPU版本核心模块
			// * as THREE 表示将整个模块导出对象命名为THREE
			// WebGPU是新一代的图形API，相比WebGL有更好的性能和功能
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块中导入特定的着色器函数
			// color(): 创建颜色节点，用于在TSL着色器图中表示颜色值
			// lights(): 创建光源节点，用于在着色器中定义光照系统
			import { color, lights } from 'three/tsl';

			// 导入轨道控制器(OrbitControls)
			// 这是一个Three.js的扩展插件，提供鼠标/触摸控制相机旋转、缩放和平移的功能
			// OrbitControls允许用户通过直观的交互方式浏览3D场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============================================================================
			// 自定义光照模型类定义
			// ============================================================================
			
			/**
			 * 自定义光照模型类
			 * 
			 * 这个类继承自THREE.LightingModel，允许开发者完全自定义光照计算逻辑。
			 * LightingModel是Three.js TSL系统中的基础类，用于定义光照如何影响材质表面。
			 * 
			 * 在传统的Three.js材质中，光照计算是固定的（如MeshStandardMaterial的PBR光照）。
			 * 通过自定义LightingModel，我们可以：
			 * 1. 实现非真实感渲染(NPR)效果
			 * 2. 创建特殊的光照风格（如卡通着色、水彩效果）
			 * 3. 优化特定场景的光照性能
			 * 4. 实现自定义的物理模型
			 * 
			 * @extends THREE.LightingModel
			 */
			class CustomLightingModel extends THREE.LightingModel {

				/**
				 * 直接光照计算方法
				 * 
				 * 这个方法在着色器中被调用，用于计算每个光源对当前片元的直接光照贡献。
				 * 在标准的光照模型中，这个方法会考虑光源类型（点光源、方向光等）、
				 * 光照角度（兰伯特余弦定律）、距离衰减等因素。
				 * 
				 * 在这个简化的自定义模型中，我们忽略了所有物理因素，直接将光源颜色
				 * 加到漫反射分量上。这会产生一种均匀的、无方向性的光照效果。
				 * 
				 * @param {Object} context - 光照计算的上下文对象，包含所有必要的光照数据
				 * @param {THREE.TSL.Node} context.lightColor - 当前光源的颜色值（作为TSL节点）
				 * @param {Object} context.reflectedLight - 反射光对象，用于累积所有光源的贡献
				 * @param {THREE.TSL.Node} context.reflectedLight.directDiffuse - 直接漫反射光照分量
				 * @param {THREE.TSL.Node} context.reflectedLight.directSpecular - 直接镜面反射光照分量（本例未使用）
				 * @param {THREE.TSL.Node} context.reflectedLight.indirectDiffuse - 间接漫反射光照分量（本例未使用）
				 * @param {THREE.TSL.Node} context.reflectedLight.indirectSpecular - 间接镜面反射光照分量（本例未使用）
				 * @param {Object} builder - 着色器构建器对象（本例中未使用）
				 * @param {THREE.WebGPUNodes} builder.nodes - 节点构建器（可用于创建复杂的着色器节点）
				 * 
				 * @example
				 * // 完整的物理光照计算可能包括：
				 * // 1. 计算光线方向
				 * // 2. 计算光线与法线的点积（兰伯特余弦定律）
				 * // 3. 应用距离衰减
				 * // 4. 计算镜面反射（Blinn-Phong或Cook-Torrance模型）
				 * // 5. 将结果累积到reflectedLight的相应分量中
				 */
				direct( { lightColor, reflectedLight }/*, builder */ ) {

					// addAssign 是TSL中的操作符，表示"加并赋值"
					// 这相当于在着色器代码中执行：reflectedLight.directDiffuse += lightColor
					// 
					// 注意：这不是JavaScript的直接加法操作，而是生成了GLSL/WebGPU着色器代码
					// 这个操作会在GPU上对每个片元并行执行
					// 
					// 在这个简化的模型中：
					// 1. 我们忽略了光照角度（没有使用法线信息）
					// 2. 我们忽略了距离衰减（所有点得到相同的光照强度）
					// 3. 我们只计算了漫反射，没有镜面反射
					// 
					// 实际效果：点云中的每个点都会平等地接收所有光源的颜色贡献
					reflectedLight.directDiffuse.addAssign( lightColor );

				}

				// 注意：我们还可以重写其他光照计算方法，例如：
				// indirect(): 计算间接光照（全局光照、环境光遮蔽等）
				// ambient(): 计算环境光
				// 但在这个简单示例中，我们只实现了direct()方法

			}

			// ============================================================================
			// 全局变量声明
			// ============================================================================
			
			// 渲染核心对象
			let camera;      // 相机：定义了观察3D场景的视角和投影方式
			let scene;       // 场景：包含所有3D对象（网格、光源、相机等）的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D Canvas上

			// 光源对象
			let light1;      // 第一个点光源（橙色）
			let light2;      // 第二个点光源（蓝色）
			let light3;      // 第三个点光源（绿色）

			// ============================================================================
			// 初始化函数调用
			// 页面加载完成后立即执行，启动整个3D应用程序
			// ============================================================================
			init();

			/**
			 * 初始化函数 - 整个3D应用的入口点
			 * 
			 * 这个函数负责创建和配置所有必要的Three.js对象：
			 * 1. 相机、场景、渲染器
			 * 2. 光源系统
			 * 3. 几何体和材质
			 * 4. 用户交互控制器
			 * 5. 事件监听器
			 * 
			 * 函数执行流程：
			 * 1. 创建基础Three.js对象
			 * 2. 设置光源
			 * 3. 创建点云几何体
			 * 4. 应用自定义光照模型
			 * 5. 配置渲染器和交互控制
			 * 
			 * @function init
			 * @returns {void}
			 */
			function init() {

				// ------------------------------------------------------------------------
				// 1. 创建透视相机 (PerspectiveCamera)
				// ------------------------------------------------------------------------
				
				// 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				// 参数说明：
				// 70 - 视野角度(Field of View)，单位是度，较大的值产生广角效果
				// window.innerWidth / window.innerHeight - 宽高比，确保渲染不变形
				// 0.1 - 近裁剪面，距离相机小于0.1单位的物体不被渲染（防止精度问题）
				// 10 - 远裁剪面，距离相机大于10单位的物体不被渲染（优化性能）
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
				
				// 设置相机初始位置
				// 将相机沿Z轴正方向移动1.5个单位，这样我们可以从正面看到场景
				// 在Three.js坐标系中：
				// X轴：水平向右，Y轴：垂直向上，Z轴：垂直于屏幕向外
				camera.position.z = 1.5;

				// ------------------------------------------------------------------------
				// 2. 创建场景 (Scene)
				// ------------------------------------------------------------------------
				
				// Scene是所有3D对象的容器，包括网格、光源、相机等
				// 它还管理场景的背景色、雾效、环境光等全局属性
				scene = new THREE.Scene();

				// ========================================================================
				// 3. 光源系统创建
				// ========================================================================
				
				// 创建一个小球几何体，用于可视化光源的位置
				// 参数说明：
				// 0.02 - 球体半径，非常小的球体
				// 16 - 宽度分段数，控制球体水平方向的细节
				// 8 - 高度分段数，控制球体垂直方向的细节
				// 较低的分段数可以节省性能，但球体不够圆滑
				const sphereGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );

				/**
				 * 辅助函数：创建并添加一个点光源
				 * 
				 * 这个函数封装了点光源的创建过程，包括：
				 * 1. 创建光源本身（提供光照）
				 * 2. 创建可视化的小球（帮助用户理解光源位置）
				 * 3. 将两者组合并添加到场景
				 * 
				 * @param {number} hexColor - 光源的颜色值，使用十六进制表示
				 *                         例如：0xffaa00 表示橙色
				 * @returns {THREE.PointLight} 返回创建的点光源对象
				 */
				const addLight = ( hexColor ) => {

					// --------------------------------------------------------------------
					// 3.1 创建光源可视化材质（小球）
					// --------------------------------------------------------------------
					
					// NodeMaterial是Three.js的新材质系统，使用TSL（着色器语言）
					// 相比传统的材质，NodeMaterial提供更灵活的着色器控制
					const material = new THREE.NodeMaterial();
					
					// 设置材质的颜色节点
					// color(hexColor) 创建一个表示颜色的TSL节点
					// 这个颜色节点会在着色器图中传递和处理
					material.colorNode = color( hexColor );
					
					// 设置材质的光源节点
					// lights() 创建一个空的光源节点列表
					// 这意味着这个材质不会受到场景中任何光源的影响
					// 小球会显示纯色，不受光照影响，只作为位置标记
					material.lightsNode = lights();

					// 创建小球网格对象
					// Mesh是Three.js中基本的可渲染对象，包含几何体和材质
					const mesh = new THREE.Mesh( sphereGeometry, material );

					// --------------------------------------------------------------------
					// 3.2 创建点光源
					// --------------------------------------------------------------------
					
					// 创建点光源对象
					// 参数说明：
					// hexColor - 光源颜色
					// 0.1 - 光源强度，值越大光照越亮
					// 1.0 - 光源衰减距离，超过此距离光照强度为0
					const light = new THREE.PointLight( hexColor, 0.1, 1 );
					
					// 将小球网格添加为光源的子对象
					// 这意味着小球的变换（位置、旋转、缩放）会相对于光源
					// 当光源移动时，小球会自动跟随
					light.add( mesh );

					// 将光源（包含小球子对象）添加到场景
					// 现在光源会照亮场景中的其他物体，而小球只是视觉参考
					scene.add( light );

					// 返回创建的光源对象，以便后续操作（如动画）
					return light;

				};

				// 使用辅助函数创建三个不同颜色的点光源
				// 这些光源将在animate()函数中设置动画
				light1 = addLight( 0xffaa00 ); // 橙色光源
				light2 = addLight( 0x0040ff ); // 蓝色光源
				light3 = addLight( 0x80ff80 ); // 绿色光源

				// ------------------------------------------------------------------------
				// 4. 创建选择性光源节点
				// ------------------------------------------------------------------------
				
				// lights([light1, light2, light3]) 创建一个只包含这三个光源的节点
				// 这意味着我们的自定义光照模型只会处理这三个光源
				// 如果场景中有其他光源，它们将被忽略
				// 这种选择性光源控制对于复杂场景的性能优化非常有用
				const allLightsNode = lights( [ light1, light2, light3 ] );

				// ========================================================================
				// 5. 创建点云几何体
				// ========================================================================
				
				// 创建一个空数组来存储所有的点位置
				const points = [];

				// 生成500,000个随机点
				// 这样大规模的点云展示了WebGPU渲染器的性能优势
				for ( let i = 0; i < 500000; i ++ ) {

					// 创建并随机化一个3D向量
					// 链式调用说明：
					// 1. new THREE.Vector3() - 创建默认向量(0,0,0)
					// 2. .random() - 随机生成各分量在[0,1]范围内的向量
					// 3. .subScalar(0.5) - 每个分量减去0.5，范围变为[-0.5, 0.5]
					// 4. .multiplyScalar(3) - 每个分量乘以3，范围变为[-1.5, 1.5]
					// 最终得到分布在3x3x3立方体空间内的随机点
					const point = new THREE.Vector3()
						.random()
						.subScalar( 0.5 )
						.multiplyScalar( 3 );

					// 将生成的点添加到数组中
					points.push( point );

				}

				// 从点数组创建BufferGeometry
				// BufferGeometry是Three.js的高性能几何体类型，使用类型化数组存储数据
				// setFromPoints()方法将THREE.Vector3数组转换为BufferGeometry的position属性
				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
				
				// 创建点云材质
				// PointsNodeMaterial是专门用于点渲染的节点材质
				// 相比PointsMaterial，它支持TSL着色器系统
				const materialPoints = new THREE.PointsNodeMaterial();

				// ========================================================================
				// 6. 应用自定义光照模型
				// ========================================================================
				
				// 创建自定义光照模型的实例
				const lightingModel = new CustomLightingModel();
				
				// 创建光照模型上下文
				// context()方法将光照模型与光源节点结合
				// { lightingModel } 是一个对象简写，等价于 { lightingModel: lightingModel }
				// 这创建了一个特殊的TSL上下文，其中所有光照计算都使用我们的自定义模型
				const lightingModelContext = allLightsNode.context( { lightingModel } );

				// 将自定义光照上下文设置为点云材质的光源节点
				// 现在，当渲染点云时：
				// 1. 只使用light1、light2、light3这三个光源
				// 2. 使用CustomLightingModel类中的direct()方法计算光照
				materialPoints.lightsNode = lightingModelContext;

				// ------------------------------------------------------------------------
				// 7. 创建点云对象并添加到场景
				// ------------------------------------------------------------------------
				
				// Points是Three.js中用于渲染点云的特殊网格类型
				// 它接受BufferGeometry和PointsMaterial（或PointsNodeMaterial）
				const pointCloud = new THREE.Points( geometryPoints, materialPoints );
				
				// 将点云添加到场景中，现在它将成为场景中主要的可见对象
				scene.add( pointCloud );

				// ========================================================================
				// 8. 创建WebGPU渲染器
				// ========================================================================
				
				// 创建WebGPURenderer实例
				// WebGPU是新一代图形API，相比WebGL有更好的性能和多线程支持
				// { antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上，这确保渲染的清晰度
				// window.devicePixelRatio 返回物理像素与CSS像素的比率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调
				// setAnimationLoop()是requestAnimationFrame的Three.js封装
				// 它会在每一帧自动调用animate()函数
				// 这对于流畅的动画非常重要（通常60FPS）
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的DOM元素（通常是Canvas元素）添加到页面body中
				// 这样用户才能看到渲染的3D场景
				document.body.appendChild( renderer.domElement );

				// ========================================================================
				// 9. 创建轨道控制器（用户交互）
				// ========================================================================
				
				// 创建OrbitControls实例
				// 参数：要控制的相机，以及交互的DOM元素（这里是渲染器的Canvas）
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置相机距离目标的最小距离
				// 0表示可以无限接近目标点（但实际受近裁剪面限制）
				controls.minDistance = 0;
				
				// 设置相机距离目标的最大距离
				// 4表示最远可以拉远到距离目标4个单位的位置
				controls.maxDistance = 4;

				// 注意：OrbitControls的更多配置选项：
				// controls.enableDamping = true; // 启用阻尼效果，使旋转更平滑
				// controls.dampingFactor = 0.05; // 阻尼系数
				// controls.autoRotate = true; // 自动旋转场景
				// controls.autoRotateSpeed = 2.0; // 自动旋转速度

				// ========================================================================
				// 10. 设置窗口大小变化事件监听器
				// ========================================================================
				
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				// 这是响应式设计的重要部分，确保3D场景总是正确填充窗口
				window.addEventListener( 'resize', onWindowResize );

				// 初始化完成
				// 此时所有Three.js对象都已创建并配置好
				// animate()函数将被自动调用，开始渲染循环
			}

			/**
			 * 窗口大小变化处理函数
			 * 
			 * 当用户调整浏览器窗口大小时，需要更新：
			 * 1. 相机的宽高比（防止图像拉伸）
			 * 2. 渲染器的输出尺寸（填满整个窗口）
			 * 
			 * 这个函数由window的resize事件触发
			 * 
			 * @function onWindowResize
			 * @returns {void}
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				// 如果宽高比不正确，渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 在Three.js中，修改相机参数后必须调用此方法
				// 它重新计算相机的内部投影矩阵，确保渲染正确
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				// 这确保Canvas元素的大小与窗口大小保持一致
				// 如果忘记调用此方法，渲染的图像可能只占据Canvas的一部分
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 
			 * 这是整个3D应用的核心循环，每帧都会调用（通常60次/秒）
			 * 主要任务：
			 * 1. 更新光源位置（创建动画效果）
			 * 2. 更新场景旋转
			 * 3. 渲染场景到Canvas
			 * 
			 * 这个函数由renderer.setAnimationLoop()自动调用
			 * 使用requestAnimationFrame API，与显示器的刷新率同步
			 * 
			 * @function animate
			 * @returns {void}
			 */
			function animate() {

				// 获取当前时间（以秒为单位）
				// Date.now()返回毫秒数，乘以0.001转换为秒
				// 使用时间作为参数可以创建与时间相关的动画
				const time = Date.now() * 0.001;
				
				// 运动幅度缩放因子
				// 较小的值使光源在更小的范围内运动
				const scale = .5;

				// ------------------------------------------------------------------------
				// 更新光源1的位置（橙色光源）
				// ------------------------------------------------------------------------
				
				// 使用三角函数创建周期性运动
				// Math.sin()和Math.cos()产生[-1, 1]的波动
				// 每个坐标使用不同的频率（0.7, 0.5, 0.3）创建复杂的3D轨迹
				// 乘以scale控制运动范围
				light1.position.x = Math.sin( time * 0.7 ) * scale;
				light1.position.y = Math.cos( time * 0.5 ) * scale;
				light1.position.z = Math.cos( time * 0.3 ) * scale;

				// ------------------------------------------------------------------------
				// 更新光源2的位置（蓝色光源）
				// ------------------------------------------------------------------------
				
				// 使用不同的频率组合，使每个光源有独特的运动轨迹
				// 这种差异化的运动创造了动态变化的光照效果
				light2.position.x = Math.cos( time * 0.3 ) * scale;
				light2.position.y = Math.sin( time * 0.5 ) * scale;
				light2.position.z = Math.sin( time * 0.7 ) * scale;

				// ------------------------------------------------------------------------
				// 更新光源3的位置（绿色光源）
				// ------------------------------------------------------------------------
				
				// 第三个光源也使用不同的频率组合
				// 三个光源的协同运动在点云上产生复杂的光照变化
				light3.position.x = Math.sin( time * 0.7 ) * scale;
				light3.position.y = Math.cos( time * 0.3 ) * scale;
				light3.position.z = Math.sin( time * 0.5 ) * scale;

				// ------------------------------------------------------------------------
				// 更新场景旋转
				// ------------------------------------------------------------------------
				
				// 使整个场景绕Y轴缓慢旋转
				// time * 0.1 表示旋转速度，值越大旋转越快
				// 这为用户提供了自动变化的视角
				scene.rotation.y = time * 0.1;

				// ------------------------------------------------------------------------
				// 渲染场景
				// ------------------------------------------------------------------------
				
				// 调用渲染器的render()方法，将3D场景绘制到2D Canvas上
				// 参数：
				// scene - 要渲染的场景（包含所有对象）
				// camera - 从哪个视角渲染场景
				// 
				// 在内部，render()方法会：
				// 1. 遍历场景中的所有对象
				// 2. 为每个对象执行顶点着色器和片元着色器
				// 3. 使用我们的自定义光照模型计算光照
				// 4. 将结果输出到Canvas
				renderer.render( scene, camera );

				// 注意：由于设置了setAnimationLoop(animate)
				// 这个函数会在下一帧自动再次调用，形成动画循环

			}

			// ============================================================================
			// 模块代码结束
			// ============================================================================

		</script>
	</body>
</html>