<!-- 三维粒子动画系统
🎯 项目概述
这是一个基于Three.js和WebGL的高性能三维粒子动画系统，使用硬件实例化渲染技术高效绘制75,000个动态彩色粒子，创建出绚丽的视觉特效。

🚀 核心功能
1. 大规模粒子渲染
实时渲染75,000个动态粒子

每个粒子独立运动、缩放和变色

使用实例化渲染(Instanced Rendering)技术，极大减少GPU调用次数

2. 动态视觉效果
波动动画：粒子大小随时间正弦波动

颜色渐变：粒子颜色随大小彩虹渐变

旋转场景：整个粒子系统缓慢旋转

三维分布：粒子在500×500×500单位空间内随机分布

3. 交互与响应
自适应窗口大小变化

实时性能监控显示

支持高DPI显示设备

💡 主要技术点
1. Three.js框架
场景管理：Scene组织所有3D对象

透视相机：PerspectiveCamera模拟人眼视角

WebGL渲染器：硬件加速渲染

自定义材质：RawShaderMaterial完全控制着色器

2. 着色器编程
顶点着色器
glsl
// 核心功能：
1. 实例化位置计算：每个粒子的独立位置
2. 动态缩放：三个不同频率的正弦波叠加
3. 广告牌效果：粒子始终面向相机
片段着色器
glsl
// 核心功能：
1. HSL色彩空间：动态彩虹色计算
2. 纹理采样：圆形贴图渲染
3. Alpha测试：创建平滑圆形边缘
4. 颜色混合：纹理与动态色相乘
3. 实例化渲染技术
javascript
// 关键技术：
1. InstancedBufferGeometry：实例化几何体
2. InstancedBufferAttribute：实例化属性数组
3. 单一Draw Call渲染所有粒子
4. 性能优化
硬件实例化：减少API调用开销

低模几何体：圆形仅用6个分段

深度测试：正确渲染遮挡关系

性能监控：Stats.js实时显示帧率

5. 数学与算法
动画算法
正弦波叠加：创建复杂波动效果

HSL色彩模型：色相、饱和度、亮度

矩阵变换：模型视图投影矩阵

颜色转换
javascript
// HSL转RGB算法：
1. 色相环分区计算
2. 饱和度调整
3. 亮度映射
🎨 视觉效果特性
1. 粒子行为
独立运动：每个粒子有自己的动态缩放

频率差异：XYZ轴使用不同频率正弦波

范围映射：缩放因子从[-3,3]映射到[-20,40]

2. 色彩系统
色相变化：基于粒子大小的动态色相

高饱和度：固定为1.0，颜色鲜艳

中等亮度：固定为0.5，保证可读性

3. 渲染质量
高精度浮点：确保计算准确性

抗锯齿：通过透明度平滑边缘

深度排序：正确的前后遮挡关系

📊 技术架构
text
HTML页面
├── Three.js框架
├── 着色器系统
│   ├── 顶点着色器（位置计算）
│   └── 片段着色器（颜色计算）
├── 实例化渲染管线
│   ├── 几何数据准备
│   ├── 实例化属性设置
│   └── 单次绘制调用
└── 动画循环
    ├── 时间更新
    ├── 矩阵变换
    └── 场景渲染
🔧 关键技术实现细节
1. 实例化数据流
text
CPU端：
  创建75000×3的Float32Array
  填充随机位置数据(-1到1)
  
GPU端：
  顶点着色器读取translate属性
  每个实例应用不同的位置偏移
  共享基础圆形几何体
2. 动画时间线
javascript
// 时间统一管理：
1. JavaScript：performance.now()获取时间
2. 传递给着色器：uniform float time
3. 着色器计算：position + time创建动态效果
4. 三频正弦波：2.1Hz、3.2Hz、4.3Hz叠加
3. 颜色映射逻辑
text
粒子缩放因子 → 色相值映射 → HSL颜色 → RGB颜色

vScale范围：[-3, 3]
色相映射：vScale/5.0 → [-0.6, 0.6]
HSL参数：(色相, 1.0饱和度, 0.5亮度)
最终输出：RGB颜色与纹理混合
🌟 应用场景
数据可视化：大规模数据点的三维展示

游戏特效：粒子系统、魔法效果

艺术创作：动态抽象艺术展示

科技演示：GPU性能展示实例

教育工具：WebGL和着色器教学

⚡ 性能优势
渲染效率：75000个粒子仅需1个Draw Call

内存优化：共享几何数据，减少内存占用

GPU利用率：充分利用GPU并行计算能力

实时响应：60FPS流畅动画体验

🛠️ 可扩展性
粒子数量：可轻松调整到数十万级别

着色效果：修改着色器实现不同效果

交互功能：添加鼠标交互、点击效果

数据驱动：连接实时数据源动态更新 -->


<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 页面标题：描述这是一个使用three.js创建的WebGL粒子效果 -->
	<title>three.js WebGL - BufferGeometry(缓冲几何体) - 实例化粒子系统 - 广告牌效果 - 动态颜色</title>
	
	<!-- 字符编码设置：使用UTF-8编码支持多语言字符 -->
	<meta charset="utf-8">
	
	<!-- 视口设置：确保在移动设备上的正确显示和缩放控制 -->
	<!-- width=device-width：宽度设置为设备宽度 -->
	<!-- user-scalable=no：禁止用户手动缩放（为了保持3D场景的稳定显示） -->
	<!-- minimum-scale=1.0, maximum-scale=1.0：固定缩放比例为1 -->
	<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>

	<!-- 页面信息显示区域：显示项目信息和提示 -->
	<div id="info">
		<!-- three.js官方链接 -->
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 
		- BufferGeometry(缓冲几何体) - 实例化圆形广告牌粒子系统 - 动态颜色效果
		<!-- 硬件不支持提示：当浏览器不支持WebGL硬件实例化时显示 -->
		<div id="notSupported" style="display:none">
			抱歉，您的显卡或浏览器不支持硬件实例化渲染功能。
			请尝试更新浏览器或使用支持WebGL 2.0的设备。
		</div>
	</div>

	<!-- ========== 顶点着色器代码 ========== -->
	<!-- 
		顶点着色器：在GPU上运行，处理每个顶点的位置计算
		类型声明：x-shader/x-vertex 表示这是顶点着色器代码
	-->
	<script id="vshader" type="x-shader/x-vertex">
		// 设置浮点数精度：highp表示高精度，确保计算准确
		precision highp float;
		
		// ========== Uniform变量（从JavaScript传递的常量数据） ==========
		// modelViewMatrix：模型视图矩阵，结合模型变换和视图变换
		// 作用：将物体从模型空间转换到视图空间
		uniform mat4 modelViewMatrix;
		
		// projectionMatrix：投影矩阵
		// 作用：将视图空间坐标转换到裁剪空间（2D屏幕坐标）
		uniform mat4 projectionMatrix;
		
		// time：时间变量，从JavaScript传入，用于创建动画效果
		// 值范围：随时间线性增加
		uniform float time;
		
		// ========== Attribute变量（每个顶点特有的数据） ==========
		// position：顶点位置坐标（来自基础圆形几何体）
		// 对于所有实例，这个值是相同的（圆形的顶点位置）
		attribute vec3 position;
		
		// uv：纹理坐标，用于纹理映射
		// 范围：[0,0]到[1,1]，表示纹理上的位置
		attribute vec2 uv;
		
		// translate：实例化平移属性（每个粒子独有的位置偏移）
		// 这是实例化渲染的关键：每个实例有不同的translate值
		// 三个分量：x, y, z坐标偏移
		attribute vec3 translate;
		
		// ========== Varying变量（从顶点着色器传递到片段着色器） ==========
		// vUv：传递纹理坐标到片段着色器
		varying vec2 vUv;
		
		// vScale：传递计算出的缩放因子到片段着色器
		// 在片段着色器中用于颜色计算
		varying float vScale;
		
		// ========== 主函数：顶点着色器的入口点 ==========
		void main() {
			// 第一步：计算实例化粒子的模型视图位置
			// 将实例特有的平移位置转换到视图空间
			// vec4(translate, 1.0)：将3D坐标转换为齐次坐标（w=1.0表示点）
			vec4 mvPosition = modelViewMatrix * vec4(translate, 1.0);
			
			// 第二步：创建基于时间和位置的动态变量
			// 将时间加到每个坐标分量上，使每个粒子的变化略有不同
			// 这样每个粒子会有独特的动画效果
			vec3 trTime = vec3(
				translate.x + time,  // x分量随时间变化
				translate.y + time,  // y分量随时间变化
				translate.z + time   // z分量随时间变化
			);
			
			// 第三步：计算动态缩放因子
			// 使用三个不同频率的正弦波叠加，创建复杂的波动效果：
			// 1. sin(trTime.x * 2.1)：基于x坐标和时间，频率2.1
			// 2. sin(trTime.y * 3.2)：基于y坐标和时间，频率3.2
			// 3. sin(trTime.z * 4.3)：基于z坐标和时间，频率4.3
			// 三个波叠加：结果范围约为[-3, 3]
			float scale = sin(trTime.x * 2.1) + 
						 sin(trTime.y * 3.2) + 
						 sin(trTime.z * 4.3);
			
			// 将原始缩放因子传递到片段着色器（用于颜色计算）
			vScale = scale;
			
			// 第四步：重新映射缩放因子的范围
			// 原始范围：[-3, 3]
			// 乘以10：[-30, 30]
			// 加上10：[-20, 40]？等一下，这里需要仔细计算：
			// 实际上：scale * 10.0 + 10.0
			// 当scale=-3时：-30+10=-20
			// 当scale=3时：30+10=40
			// 范围：[-20, 40]
			// 这确保了粒子大小有足够的变化范围
			scale = scale * 10.0 + 10.0;
			
			// 第五步：应用缩放到基础几何体
			// position是基础圆形几何体的顶点位置
			// 将每个顶点按缩放因子偏移，实现粒子大小的变化
			mvPosition.xyz += position * scale;
			
			// 第六步：传递纹理坐标
			// 将纹理坐标传递给片段着色器
			vUv = uv;
			
			// 第七步：计算最终裁剪空间位置
			// 投影矩阵将3D视图空间坐标转换为2D裁剪空间坐标
			gl_Position = projectionMatrix * mvPosition;
			
			// 至此，顶点处理完成：
			// 1. 每个粒子有自己的位置（translate）
			// 2. 每个粒子有自己的动态缩放（基于位置和时间的正弦波）
			// 3. 所有粒子共享相同的基础几何形状（圆形）
		}
	</script>
	
	<!-- ========== 片段着色器代码 ========== -->
	<!-- 
		片段着色器：在GPU上运行，处理每个像素的颜色计算
		类型声明：x-shader/x-fragment 表示这是片段着色器代码
	-->
	<script id="fshader" type="x-shader/x-fragment">
		// 设置浮点数精度：highp表示高精度
		precision highp float;
		
		// ========== Uniform变量 ==========
		// map：纹理采样器，用于读取圆形纹理贴图
		// 纹理包含一个圆形，边缘是透明的
		uniform sampler2D map;
		
		// ========== Varying变量（从顶点着色器接收） ==========
		// vUv：插值后的纹理坐标
		// 由于顶点之间的插值，每个片段有略微不同的uv值
		varying vec2 vUv;
		
		// vScale：从顶点着色器传递的缩放因子
		// 这个值在顶点间插值，但基本上每个粒子是相同的
		varying float vScale;
		
		// ========== HSL转RGB辅助函数 ==========
		// HSL色彩模型：Hue（色相），Saturation（饱和度），Lightness（亮度）
		
		// 函数：将色相(H)值转换为RGB基色
		// 参数H：色相值，范围[0,1]，对应色相环的360度
		// 返回：RGB颜色向量，范围[0,1]
		vec3 HUEtoRGB(float H) {
			// 使用模运算确保H在[0,1]范围内
			H = mod(H, 1.0);
			
			// 经典HSL到RGB转换算法：
			// 将色相环（0-1）分为6个区域（0-60°, 60-120°, 120-180°, 180-240°, 240-300°, 300-360°）
			// 每个区域有不同的RGB计算公式
			
			// 红色分量计算
			float R = abs(H * 6.0 - 3.0) - 1.0;
			
			// 绿色分量计算
			float G = 2.0 - abs(H * 6.0 - 2.0);
			
			// 蓝色分量计算
			float B = 2.0 - abs(H * 6.0 - 4.0);
			
			// 使用clamp将值限制在[0,1]范围内
			return clamp(vec3(R, G, B), 0.0, 1.0);
		}
		
		// 函数：完整的HSL到RGB颜色转换
		// 参数HSL：三维向量
		//   HSL.x：色相（Hue），范围[0,1]
		//   HSL.y：饱和度（Saturation），范围[0,1]
		//   HSL.z：亮度（Lightness），范围[0,1]
		// 返回：RGB颜色向量，范围[0,1]
		vec3 HSLtoRGB(vec3 HSL) {
			// 第一步：通过色相获取RGB基色
			vec3 RGB = HUEtoRGB(HSL.x);
			
			// 第二步：计算色彩度（Chroma）
			// 公式：C = (1 - |2L - 1|) × S
			// 其中：L是亮度，S是饱和度
			// 这个值表示颜色的纯度或强度
			float C = (1.0 - abs(2.0 * HSL.z - 1.0)) * HSL.y;
			
			// 第三步：将基色转换为最终颜色
			// 公式：RGB = (RGB_base - 0.5) × C + L
			// 解释：
			// 1. (RGB - 0.5)：将基色中心化（减去0.5）
			// 2. × C：应用色彩度（控制饱和度）
			// 3. + L：应用亮度
			return (RGB - 0.5) * C + HSL.z;
		}
		
		// ========== 主函数：片段着色器的入口点 ==========
		void main() {
			// 第一步：纹理采样
			// 从纹理贴图中获取当前像素的颜色
			// texture2D函数：根据uv坐标从纹理中读取颜色
			// map：纹理采样器
			// vUv：纹理坐标
			// diffuseColor：包含RGBA四个分量
			vec4 diffuseColor = texture2D(map, vUv);
			
			// 第二步：基于缩放因子计算HSL颜色
			// vScale范围：大约[-3, 3]（来自顶点着色器）
			// vScale/5.0：映射到大约[-0.6, 0.6]作为色相
			// 饱和度设置为1.0：最大饱和度，颜色最鲜艳
			// 亮度设置为0.5：中等亮度
			vec3 hslColor = HSLtoRGB(vec3(
				vScale / 5.0,  // 色相：基于粒子大小变化
				1.0,           // 饱和度：固定为最大值
				0.5            // 亮度：固定为中等亮度
			));
			
			// 第三步：组合纹理颜色和HSL颜色
			// 将纹理的RGB颜色与HSL颜色相乘：
			// 1. 纹理提供形状（圆形）和透明度
			// 2. HSL提供动态颜色变化
			// 3. 保留纹理的Alpha通道（透明度）
			gl_FragColor = vec4(
				diffuseColor.xyz * hslColor,  // RGB = 纹理RGB × HSL颜色
				diffuseColor.w                // Alpha = 纹理Alpha（透明度）
			);
			
			// 第四步：Alpha测试（透明度测试）
			// 如果纹理的Alpha值小于0.5，丢弃该片段
			// 作用：创建圆形的透明边缘，实现平滑的圆形效果
			// discard：立即停止当前片段的处理，不写入颜色缓冲区
			if (diffuseColor.w < 0.5) discard;
			
			// 至此，片段处理完成：
			// 1. 读取纹理获取圆形形状和透明度
			// 2. 基于粒子大小计算动态颜色
			// 3. 组合形状和颜色
			// 4. 进行透明度测试确保圆形边缘平滑
		}
	</script>

	<!-- ========== 导入映射表（Import Map） ========== -->
	<!-- 
		导入映射：现代JavaScript模块导入的配置
		允许浏览器正确解析模块路径
	-->
	<script type="importmap">
		{
			"imports": {
				"three": "../build/three.module.js",
				
				"three/addons/": "./jsm/"
			}
		}
	</script>

	<!-- ========== 主JavaScript代码（模块类型） ========== -->
	<script type="module">
		// 导入Three.js库的所有功能
		// Three.js是一个强大的3D图形库，基于WebGL
		import * as THREE from 'three';
		
		// 导入Stats.js性能监控库
		// 用于显示帧率（FPS）、渲染时间等性能指标
		import Stats from 'three/addons/libs/stats.module.js';
		
		// ========== 全局变量声明 ==========
		let container;    // 主容器DOM元素，用于包含所有Three.js元素
		let stats;       // Stats性能监控器实例
		
		// Three.js核心对象
		let camera;      // 相机：定义观察3D场景的视角
		let scene;       // 场景：包含所有3D对象的容器
		let renderer;    // 渲染器：负责将3D场景绘制到2D画布
		
		// 几何对象
		let geometry;    // 实例化几何体：包含所有粒子的几何信息
		let material;    // 材质：定义物体的外观（颜色、纹理、着色器等）
		let mesh;        // 网格：几何体和材质的结合体，是实际的3D对象
		
		// ========== 初始化函数调用 ==========
		// 页面加载完成后立即执行初始化
		init();
		
		// ========== 初始化函数定义 ==========
		function init() {
			// 第一步：创建主容器
			// 创建一个div元素作为Three.js渲染器的容器
			container = document.createElement('div');
			
			// 将容器添加到body中
			// 这样Three.js创建的所有元素都会在这个容器内
			document.body.appendChild(container);
			
			// 第二步：创建透视相机
			// 透视相机模拟人眼的视角，有透视效果（近大远小）
			// 参数说明：
			//   1. fov（视野角度）：50度，角度越大看到的范围越广
			//   2. aspect（宽高比）：窗口宽度/高度，确保图像不变形
			//   3. near（近裁剪面）：1，距离相机1单位以内的物体不显示
			//   4. far（远裁剪面）：5000，距离相机5000单位以外的物体不显示
			camera = new THREE.PerspectiveCamera(
				50,                                 // 视野角度
				window.innerWidth / window.innerHeight, // 宽高比
				1,                                   // 近裁剪面
				5000                                 // 远裁剪面
			);
			
			// 设置相机位置
			// 将相机沿Z轴正方向移动1400单位，从远处观察场景
			camera.position.z = 1400;
			
			// 第三步：创建场景
			// 场景是所有3D对象的容器，类似一个虚拟世界
			scene = new THREE.Scene();
			
			// 第四步：创建基础几何体
			// 创建一个圆形几何体，作为每个粒子的基础形状
			// 参数说明：
			//   1. radius（半径）：1，基础圆的半径
			//   2. segments（分段数）：6，圆的细分程度，值越大圆越平滑
			// 注意：这里分段数设为6是为了性能优化，因为粒子很小，6段已经足够
			const circleGeometry = new THREE.CircleGeometry(1, 6);
			
			// 第五步：创建实例化缓冲几何体
			// InstancedBufferGeometry是Three.js的实例化几何体
			// 特点：可以高效渲染大量相同几何形状但不同位置/旋转/缩放的物体
			geometry = new THREE.InstancedBufferGeometry();
			
			// 复制基础几何体的索引（定义三角形如何连接）
			geometry.index = circleGeometry.index;
			
			// 复制基础几何体的属性（顶点位置、法线、UV等）
			geometry.attributes = circleGeometry.attributes;
			
			// 第六步：设置粒子数量
			// 这里使用75000个粒子，可以在性能和效果之间取得平衡
			// 更多粒子 = 更密集的效果但更低帧率
			const particleCount = 75000;
			
			// 第七步：创建实例化平移属性数组
			// 每个粒子需要3个浮点数（x, y, z）表示位置
			// 所以数组长度 = 粒子数 × 3
			const translateArray = new Float32Array(particleCount * 3);
			
			// 第八步：为每个粒子生成随机位置
			// 循环初始化每个粒子的位置
			// i：粒子索引（0到74999）
			// i3：在数组中的索引（0,3,6,9,...）
			// l：粒子总数
			for (let i = 0, i3 = 0, l = particleCount; i < l; i++, i3 += 3) {
				// 为每个粒子生成随机位置
				// Math.random()：生成[0,1)的随机数
				// Math.random() * 2 - 1：生成[-1,1)的随机数
				
				// X坐标：在[-1,1]范围内随机
				translateArray[i3 + 0] = Math.random() * 2 - 1;
				
				// Y坐标：在[-1,1]范围内随机
				translateArray[i3 + 1] = Math.random() * 2 - 1;
				
				// Z坐标：在[-1,1]范围内随机
				translateArray[i3 + 2] = Math.random() * 2 - 1;
				
				// 所有粒子最初都在一个立方体空间内随机分布
				// 后面会通过mesh.scale.set(500, 500, 500)放大这个空间
			}
			
			// 第九步：将平移数组设置为几何体的实例化属性
			// InstancedBufferAttribute是专门用于实例化渲染的属性
			// 参数说明：
			//   1. translateArray：数据数组
			//   2. 3：每个实例的数据项数（x,y,z三个分量）
			geometry.setAttribute(
				'translate',  // 属性名，对应着色器中的attribute
				new THREE.InstancedBufferAttribute(translateArray, 3)
			);
			
			// 第十步：创建自定义着色器材质
			// RawShaderMaterial允许完全自定义着色器代码
			// 而不是使用Three.js内置的材质着色器
			material = new THREE.RawShaderMaterial({
				// Uniforms：从JavaScript传递到着色器的常量数据
				uniforms: {
					// 纹理贴图：加载圆形纹理
					'map': {
						value: new THREE.TextureLoader().load(
							'textures/sprites/circle.png'  // 纹理文件路径
						)
					},
					// 时间Uniform：用于动画效果
					'time': {
						value: 0.0  // 初始值为0
					}
				},
				
				// 顶点着色器代码
				// 从页面中id为'vshader'的script元素获取
				vertexShader: document.getElementById('vshader').textContent,
				
				// 片段着色器代码
				// 从页面中id为'fshader'的script元素获取
				fragmentShader: document.getElementById('fshader').textContent,
				
				// 深度测试：启用
				// 确保靠近相机的物体遮挡远离相机的物体
				depthTest: true,
				
				// 深度写入：启用
				// 将深度信息写入深度缓冲区
				depthWrite: true
			});
			
			// 第十一步：创建网格对象
			// Mesh是Three.js中最基本的3D对象
			// 由几何体（形状）和材质（外观）组成
			mesh = new THREE.Mesh(geometry, material);
			
			// 放大网格
			// 将整个粒子系统放大500倍
			// 这样粒子会分布在更大的空间（-500到500的立方体）
			mesh.scale.set(500, 500, 500);
			
			// 将网格添加到场景中
			scene.add(mesh);
			
			// 第十二步：创建WebGL渲染器
			// WebGLRenderer是Three.js的主要渲染器
			// 使用WebGL API进行硬件加速渲染
			renderer = new THREE.WebGLRenderer();
			
			// 设置设备像素比
			// 在高DPI屏幕（如Retina显示屏）上提供更清晰的图像
			renderer.setPixelRatio(window.devicePixelRatio);
			
			// 设置渲染器尺寸为窗口大小
			renderer.setSize(window.innerWidth, window.innerHeight);
			
			// 设置动画循环
			// setAnimationLoop替代了之前的requestAnimationFrame
			// 参数animate是每帧调用的函数
			renderer.setAnimationLoop(animate);
			
			// 将渲染器的canvas元素添加到容器中
			// domElement是渲染器创建的<canvas>元素
			container.appendChild(renderer.domElement);
			
			// 第十三步：初始化性能监控器
			stats = new Stats();
			
			// 将监控器的DOM元素添加到容器中
			// stats.dom是包含FPS显示等信息的div元素
			container.appendChild(stats.dom);
			
			// 第十四步：添加窗口大小改变事件监听
			// 当用户调整浏览器窗口大小时，调整渲染尺寸
			window.addEventListener('resize', onWindowResize);
			
			// 初始化完成
			return true;
		}
		
		// ========== 窗口大小改变处理函数 ==========
		function onWindowResize() {
			// 第一步：更新相机的宽高比
			// 窗口大小改变后，需要更新相机的宽高比
			// 否则图像会被拉伸或压缩
			camera.aspect = window.innerWidth / window.innerHeight;
			
			// 第二步：更新相机的投影矩阵
			// 当相机参数改变后，必须调用此方法更新内部矩阵
			camera.updateProjectionMatrix();
			
			// 第三步：更新渲染器尺寸
			// 使渲染器填充整个窗口
			renderer.setSize(window.innerWidth, window.innerHeight);
			
			// 至此，窗口大小改变处理完成：
			// 1. 相机适应新的窗口比例
			// 2. 渲染器使用新的窗口尺寸
			// 3. 下一帧会自动以新尺寸渲染
		}
		
		// ========== 动画循环函数 ==========
		// 这个函数每帧都会被调用（通常每秒60次）
		function animate() {
			// 第一步：计算当前时间
			// performance.now()返回从页面加载开始的高精度时间（毫秒）
			// 乘以0.0005转换为秒，并适当缩放用于动画
			// 这样time值会随时间线性增加
			const time = performance.now() * 0.0005;
			
			// 第二步：更新时间Uniform
			// 将时间值传递给着色器
			// 着色器会使用这个值计算动态效果
			material.uniforms['time'].value = time;
			
			// 第三步：旋转整个粒子系统
			// 创建全局的旋转动画
			
			// X轴旋转：随时间缓慢旋转
			// time * 0.2：使旋转速度适中
			mesh.rotation.x = time * 0.2;
			
			// Y轴旋转：随时间较快旋转
			// time * 0.4：使Y轴旋转速度是X轴的两倍
			mesh.rotation.y = time * 0.4;
			
			// 第四步：渲染场景
			// 这是最核心的一步：将3D场景渲染到2D画布
			// 参数：
			//   1. scene：要渲染的场景
			//   2. camera：用于渲染的相机视角
			renderer.render(scene, camera);
			
			// 第五步：更新性能监控器
			// 更新FPS计数和渲染时间显示
			stats.update();
			
			// 至此，一帧的渲染完成：
			// 1. 更新时间变量
			// 2. 更新物体变换
			// 3. 渲染整个场景
			// 4. 更新性能显示
			// 然后浏览器会安排下一帧继续调用此函数
		}
	</script>

</body>
</html>