<!-- Three.js 粒子系统代码功能和技术点详解
🎯 核心功能概述
这是一个使用Three.js创建的高级粒子系统演示，展示了两种不同类型的粒子组合效果：

动态脉动球体 - 10万个粒子形成的空心球体，粒子大小随时间脉动

静态立方体框架 - 由多个长方体几何体构成的立方体结构

粒子系统具有广告牌效果（始终面向相机）、雾效和基于Alpha测试的透明度处理。

🎨 视觉效果特征
1. 粒子类型区分
球体粒子（蓝色系渐变）：10万个随机分布的粒子，排除中心区域形成空心球体

大小周期性脉动（26-58单位范围）

HSL颜色从青蓝色到蓝色渐变（色调0.5-0.7）

框架粒子（红色系）：立方体结构边缘的粒子

固定大小（40单位）

固定红色调（HSL色相0.1）

2. 动态效果
整个系统缓慢旋转（Y轴和Z轴同时旋转）

球体粒子周期性脉动（正弦函数控制）

基于深度的雾效（200-600单位范围平滑过渡）

⚙️ 主要技术点
1. 自定义着色器系统
javascript
// 使用ShaderMaterial实现完全自定义的渲染管线
const material = new THREE.ShaderMaterial({
  uniforms: { /* 全局变量 */ },
  vertexShader:   /* 自定义顶点着色器 */,
  fragmentShader: /* 自定义片段着色器 */
});
顶点着色器：处理位置变换、广告牌大小计算

片段着色器：纹理采样、Alpha测试、颜色混合、雾效计算

2. 广告牌技术（Billboarding）
glsl
// 关键代码：保持粒子屏幕大小恒定
gl_PointSize = size * (150.0 / -mvPosition.z);
粒子大小随距离动态调整

保证粒子在屏幕上保持相同视觉大小

使用模型视图矩阵的Z分量计算距离

3. Alpha测试透明度
glsl
// 高效的透明度处理（比blending性能更好）
if (outColor.a < 0.5) discard;
使用discard指令完全丢弃透明片段

仅支持完全透明/不透明两种状态

性能优于Alpha混合（Alpha Blending）

4. 几何体生成与优化
javascript
// 多步骤几何体创建流程
let geometry = new THREE.BoxGeometry(...);
geometry.deleteAttribute('normal');    // 删除不需要的属性
geometry.deleteAttribute('uv');
geometry = BufferGeometryUtils.mergeVertices(geometry); // 合并重复顶点
空心球体生成算法：
javascript
// 生成100,000个候选点，保留在"厚壳"区域的点
if ((vertex.x > inner || vertex.x < -inner) ||
    (vertex.y > inner || vertex.y < -inner) ||
    (vertex.z > inner || vertex.z < -inner)) {
  // 保留该顶点
}
在单位球体内生成随机点

排除中心60%区域，形成空心球效果

数学原理：检查点是否至少在一个轴上超出内部范围

立方体框架构建：
使用变换矩阵组合多个长方体几何体

创建8个边和4个角柱的立方体结构

每个长方体定义不同的分段数控制粒子密度

5. 属性缓冲区管理
javascript
// 创建高效的BufferAttribute数据存储
geometry.setAttribute('position', positionAttribute);    // 位置
geometry.setAttribute('ca', colorAttribute);            // 颜色
geometry.setAttribute('size', sizeAttribute);           // 大小

// 动画中动态更新属性
attributes.size.array[i] = newValue;
attributes.size.needsUpdate = true;  // 标记需要GPU更新
使用Float32BufferAttribute存储顶点数据

批量更新粒子属性，然后一次性上传到GPU

needsUpdate机制通知Three.js数据已更改

6. 雾效实现
glsl
// 基于深度的雾效计算
float depth = gl_FragCoord.z / gl_FragCoord.w;
float fogFactor = smoothstep(200.0, 600.0, depth);
gl_FragColor = mix(originalColor, fogColor, fogFactor);
使用smoothstep实现平滑过渡

深度范围：200单位开始，600单位完全雾化

雾颜色：纯黑色

7. 性能优化技术
数据重用：
javascript
const vertex = new THREE.Vector3();  // 重用顶点对象
const color = new THREE.Color();     // 重用颜色对象
避免在循环中频繁创建新对象

减少垃圾回收压力

几何体优化：
合并重复顶点减少数据量

删除不需要的属性（法线、UV）

合理设置几何体分段数控制粒子密度

渲染优化：
使用性能统计器（Stats.js）监控性能

仅在需要时更新GPU数据（needsUpdate）

响应式设计适应不同屏幕尺寸

8. 时间驱动的动画
javascript
const time = Date.now() * 0.01;  // 获取当前时间（秒）
object.rotation.y = 0.02 * time; // 基于时间的旋转

// 粒子脉动公式
26 + 32 * Math.sin(0.1 * i + 0.6 * time)
0.1 * i：每个粒子的相位偏移，实现波浪效果

0.6 * time：控制动画速度

26：基础大小，32：脉动振幅

🔧 代码结构特点
模块化导入：
javascript
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
使用ES6模块语法

按需导入所需功能

着色器分离存储：
html
<script type="x-shader/x-vertex" id="vertexshader">
// GLSL代码
</script>
着色器代码存储在HTML脚本标签中

便于维护和语法高亮

响应式设计：
javascript
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
🚀 性能考量
优势：
GPU加速：大部分计算在着色器中完成

批量处理：一次绘制调用渲染所有粒子

内存高效：使用类型化数组存储数据

避免状态切换：单一材质和几何体

潜在优化点：
粒子数量可根据设备性能动态调整

距离裁剪：远处粒子可使用更低细节

LOD系统：根据距离调整粒子密度

🎓 学习价值
这个示例展示了Three.js中：

自定义着色器编程

高级粒子系统设计

几何体生成和优化

实时图形性能优化

WebGL底层概念应用 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：描述Three.js WebGL示例的类型和特性 -->
		<title>Three.js WebGL - 自定义属性粒子系统 [粒子][广告牌][Alpha测试]</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止用户缩放，设置最小和最大缩放比例为1.0 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部CSS样式表，文件名为main.css，用于页面基本样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 信息展示区域：显示项目信息和链接 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- 自定义属性示例 - 广告牌粒子系统 - Alpha透明度测试
			<br>
			<small>包含空心球体粒子和立方体框架的动态粒子系统</small>
		</div>
		<!-- Three.js渲染器输出的canvas元素将放置在此容器中 -->
		<div id="container"></div>

		<!-- 
			顶点着色器脚本定义：
			type="x-shader/x-vertex" 标识这是一个顶点着色器脚本
			id="vertexshader" 用于后续通过JavaScript获取此脚本内容
		-->
		<script type="x-shader/x-vertex" id="vertexshader">
			/**
			 * 自定义顶点属性（由JavaScript传递）：
			 * size - 每个粒子的基础大小（浮点数）
			 * ca (color attribute) - 每个粒子的颜色属性（四维向量，rgba）
			 */
			attribute float size;
			attribute vec4 ca;
			
			/**
			 * 传递给片段着色器的变量：
			 * varying关键字表示这个变量会在顶点着色器和片段着色器之间插值
			 * vColor - 插值后的颜色，传递给片段着色器使用
			 */
			varying vec4 vColor;

			/**
			 * 顶点着色器主函数：
			 * 每个顶点（粒子）都会执行一次此函数
			 */
			void main() {
				// 将颜色属性传递给片段着色器，用于后续片段着色计算
				vColor = ca;

				/**
				 * 模型视图变换：
				 * modelViewMatrix - 模型矩阵和视图矩阵的组合
				 * position - 当前顶点的原始位置（来自geometry的position属性）
				 * 将顶点从模型空间转换到视图空间（相机空间）
				 */
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				/**
				 * 计算点精灵大小：
				 * 实现广告牌效果 - 粒子大小随距离变化，保持屏幕大小恒定
				 * 150.0 - 基准大小参数，可调整以控制整体粒子大小
				 * -mvPosition.z - 顶点在视图空间中的深度（负值，因为相机看向-Z方向）
				 * 公式解释：离相机越远（-mvPosition.z越大），gl_PointSize越小，但size*(150/-z)会抵消距离影响
				 */
				gl_PointSize = size * ( 150.0 / -mvPosition.z );

				/**
				 * 投影变换：
				 * projectionMatrix - 投影矩阵（透视或正交）
				 * 将视图空间坐标转换到裁剪空间（归一化的设备坐标）
				 * 这是顶点着色器必须设置的输出变量
				 */
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>

		<!-- 
			片段着色器脚本定义：
			type="x-shader/x-fragment" 标识这是一个片段着色器脚本
			id="fragmentshader" 用于后续通过JavaScript获取此脚本内容
		-->
		<script type="x-shader/x-fragment" id="fragmentshader">
			/**
			 * Uniform变量（全局变量，所有片段共享）：
			 * color - 基础颜色（三维向量，rgb），由材质uniforms传入
			 * pointTexture - 点精灵纹理采样器，用于读取粒子贴图
			 */
			uniform vec3 color;
			uniform sampler2D pointTexture;
			
			/**
			 * 从顶点着色器传递过来的插值变量：
			 * vColor - 每个粒子的颜色，在顶点间插值后得到
			 */
			varying vec4 vColor;

			/**
			 * 片段着色器主函数：
			 * 每个像素（片段）都会执行一次此函数
			 */
			void main() {
				/**
				 * 纹理采样：
				 * texture2D() - 纹理采样函数
				 * pointTexture - 纹理采样器
				 * gl_PointCoord - 点精灵内部的纹理坐标（自动生成）
				 *   在点精灵内部，gl_PointCoord的范围是(0.0, 0.0)到(1.0, 1.0)
				 *   在点精灵外部，不会执行片段着色器
				 */
				vec4 outColor = texture2D( pointTexture, gl_PointCoord );

				/**
				 * Alpha测试（透明度测试）：
				 * 如果纹理的alpha通道值小于0.5，完全丢弃该片段
				 * discard - 立即终止当前片段的处理，不写入任何颜色
				 * 这种方法比blending性能更好，但只有完全透明/不透明两种状态
				 */
				if ( outColor.a < 0.5 ) discard;

				/**
				 * 颜色混合：
				 * 将纹理颜色与粒子颜色、基础颜色相乘
				 * vColor.xyz - 粒子的RGB颜色
				 * color - uniform基础颜色（通常为白色1,1,1，不改变颜色）
				 * 1.0 - 固定alpha值为1（完全不透明，因为已经做过alpha测试）
				 */
				gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );

				/**
				 * 雾效计算 - 第一部分：计算深度
				 * gl_FragCoord.z - 当前片段在裁剪空间中的深度值（0到1）
				 * gl_FragCoord.w - 裁剪空间中的w分量（用于透视除法）
				 * depth - 计算实际的世界空间深度或视图空间深度
				 * 公式：depth = z/w 将归一化的深度转换为实际距离
				 */
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				
				/**
				 * 雾效计算 - 第二部分：定义雾颜色
				 * 使用常量vec3定义雾颜色为纯黑色
				 * const关键字表示编译时常量，不可修改
				 */
				const vec3 fogColor = vec3( 0.0 );

				/**
				 * 雾效计算 - 第三部分：计算雾因子
				 * smoothstep() - 平滑阶跃函数，返回0到1之间的平滑插值
				 * 参数1 (200.0) - 雾效开始的距离
				 * 参数2 (600.0) - 雾效完全覆盖的距离
				 * 参数3 (depth) - 当前片段的深度
				 * 当depth<200时，fogFactor≈0；当depth>600时，fogFactor≈1
				 */
				float fogFactor = smoothstep( 200.0, 600.0, depth );
				
				/**
				 * 雾效计算 - 第四部分：颜色混合
				 * mix() - 线性混合函数：mix(x, y, a) = x*(1-a) + y*a
				 * gl_FragColor - 原始片段颜色
				 * vec4(fogColor, gl_FragColor.w) - 雾颜色，保留原始alpha
				 * fogFactor - 混合因子（0=无雾，1=完全雾化）
				 * 最终结果：根据深度将片段颜色逐渐混合为雾颜色
				 */
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
			}
		</script>

		<!-- 
			导入映射配置（Import Maps）：
			现代浏览器中ES6模块导入的路径映射配置
			允许使用简短名称导入模块，而不需要完整相对路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript代码模块：
			type="module" 表示这是ES6模块，支持import/export语法
			浏览器会自动延迟执行模块代码
		-->
		<script type="module">
			// 导入Three.js核心库的所有导出内容，命名为THREE
			// THREE对象包含所有Three.js的核心类和方法
			import * as THREE from 'three';
			
			// 导入性能统计器（Stats.js）
			// 这是一个显示FPS、渲染时间等性能指标的小工具
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入BufferGeometry工具函数库
			// 提供几何体合并、优化等实用功能
			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

			// 全局变量声明（模块作用域）
			let renderer;    // WebGL渲染器对象，负责将3D场景绘制到canvas
			let scene;       // 场景对象，包含所有3D对象、灯光、相机等
			let camera;      // 相机对象，定义观察3D场景的视角
			let stats;       // 性能统计器实例
			
			let object;      // 粒子系统对象（Points对象）
			
			// 存储第一部分（空心球体）的粒子数量
			// 用于区分两种不同类型的粒子
			let vertices1;

			// 获取浏览器窗口的当前宽度和高度
			// 用于设置渲染器和相机的初始尺寸
			const WIDTH = window.innerWidth;
			const HEIGHT = window.innerHeight;

			// 立即调用初始化函数，启动应用
			init();

			/**
			 * 主初始化函数
			 * 负责创建所有Three.js对象、设置场景、加载资源等
			 */
			function init() {
				/**
				 * 创建透视相机（PerspectiveCamera）
				 * 参数说明：
				 *   1. 40 - 视野角度（Field of View），单位度，控制可见范围
				 *   2. WIDTH/HEIGHT - 宽高比，匹配窗口比例防止变形
				 *   3. 1 - 近裁剪面，距离相机1个单位以内的物体不可见
				 *   4. 1000 - 远裁剪面，距离相机1000个单位以外的物体不可见
				 */
				camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 1000 );
				
				/**
				 * 设置相机位置：
				 * 将相机沿Z轴正方向移动500个单位
				 * 在Three.js坐标系中：
				 *   X轴向右，Y轴向上，Z轴从屏幕向外（相机默认看向-Z方向）
				 */
				camera.position.z = 500;

				// 创建场景对象，作为所有3D对象的容器
				scene = new THREE.Scene();

				/**
				 * 第一部分：创建空心球体粒子
				 * 生成100,000个随机分布在球体表面但不包括中心区域的粒子
				 */
				
				let radius = 100;                     // 球体外半径
				const inner = 0.6 * radius;          // 内部排除区域的半径（外半径的60%）
				const vertex = new THREE.Vector3();  // 临时顶点对象，重用避免频繁创建
				const vertices = [];                 // 存储所有顶点坐标的数组（一维数组，每3个元素表示一个顶点）
				
				/**
				 * 粒子生成循环：
				 * 生成100,000个候选点，但只有符合条件（在空心区域）的才会被保留
				 */
				for ( let i = 0; i < 100000; i ++ ) {
					/**
					 * 生成单位立方体内的随机点：
					 * Math.random()返回0-1的随机数
					 * *2-1将范围变换到-1到1
					 */
					vertex.x = Math.random() * 2 - 1;
					vertex.y = Math.random() * 2 - 1;
					vertex.z = Math.random() * 2 - 1;
					
					/**
					 * 将点扩展到半径为radius的球体表面：
					 * multiplyScalar()将向量乘以标量
					 * 这会将单位立方体内的点映射到半径为radius的球体内
					 */
					vertex.multiplyScalar( radius );

					/**
					 * 条件检查：排除中心区域，创建空心球效果
					 * 只有当顶点在至少一个轴向上超出inner范围时，才保留该点
					 * 这创建了一个"厚壳"球体，而不是实心球体
					 */
					if ( ( vertex.x > inner || vertex.x < - inner ) ||
					     ( vertex.y > inner || vertex.y < - inner ) ||
					     ( vertex.z > inner || vertex.z < - inner ) ) {
						// 将顶点的x,y,z依次推入数组，创建扁平化的顶点数组
						vertices.push( vertex.x, vertex.y, vertex.z );
					}
				}

				/**
				 * 计算第一部分粒子的数量：
				 * vertices数组每3个元素表示一个顶点（x,y,z）
				 * 所以顶点数 = 数组长度 ÷ 3
				 */
				vertices1 = vertices.length / 3;

				/**
				 * 第二部分：创建立方体框架粒子
				 * 使用多个长方体几何体组合成立方体框架结构
				 */
				
				radius = 200;  // 立方体框架使用更大的半径

				/**
				 * 创建第一个长方体几何体（用于立方体的边）：
				 * BoxGeometry参数：
				 *   radius - 宽度（X轴方向）
				 *   0.1*radius - 高度（Y轴方向），很薄
				 *   0.1*radius - 深度（Z轴方向），很薄
				 *   50 - 宽度方向分段数（控制粒子密度）
				 *   5 - 高度方向分段数
				 *   5 - 深度方向分段数
				 * 这个长方体看起来像一根细长的杆
				 */
				let boxGeometry1 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );

				/**
				 * 删除不需要的几何体属性：
				 * 由于我们只需要顶点位置，法线和UV坐标对粒子系统不是必需的
				 * 删除这些属性可以让mergeVertices()函数正确工作
				 * mergeVertices()通过位置判断顶点是否相同，如果法线或UV不同，即使位置相同也不会合并
				 */
				boxGeometry1.deleteAttribute( 'normal' );  // 删除法线属性
				boxGeometry1.deleteAttribute( 'uv' );       // 删除UV坐标属性

				/**
				 * 合并重复的顶点：
				 * mergeVertices()函数会遍历所有顶点，合并位置相同的顶点
				 * 这对于从标准几何体创建粒子系统很重要，避免同一位置有多个粒子
				 */
				boxGeometry1 = BufferGeometryUtils.mergeVertices( boxGeometry1 );

				/**
				 * 创建变换相关的对象（重用避免频繁创建）：
				 * matrix - 4x4变换矩阵，用于几何体的平移、旋转、缩放
				 * position - 位置向量
				 * rotation - 欧拉角旋转
				 * quaternion - 四元数旋转（避免万向节锁）
				 * scale - 缩放向量（这里保持1,1,1不缩放）
				 */
				const matrix = new THREE.Matrix4();
				const position = new THREE.Vector3();
				const rotation = new THREE.Euler();
				const quaternion = new THREE.Quaternion();
				const scale = new THREE.Vector3( 1, 1, 1 );

				/**
				 * 辅助函数：将几何体顶点添加到总顶点数组
				 * 参数：
				 *   geo - 要添加的几何体
				 *   x, y, z - 几何体在世界空间中的位置
				 *   ry - Y轴旋转角度（弧度）
				 */
				function addGeo( geo, x, y, z, ry ) {
					// 设置位置
					position.set( x, y, z );
					
					// 设置旋转（只绕Y轴旋转）
					rotation.set( 0, ry, 0 );

					/**
					 * 构建变换矩阵：
					 * matrix.compose() 根据位置、旋转、缩放创建变换矩阵
					 * quaternion.setFromEuler() 将欧拉角转换为四元数
					 */
					matrix.compose( position, quaternion.setFromEuler( rotation ), scale );

					// 获取几何体的位置属性（包含所有顶点坐标）
					const positionAttribute = geo.getAttribute( 'position' );

					/**
					 * 遍历几何体的所有顶点：
					 * positionAttribute.count - 顶点数量
					 * 对每个顶点应用变换矩阵，然后添加到总顶点数组
					 */
					for ( let i = 0, l = positionAttribute.count; i < l; i ++ ) {
						// 从缓冲区属性中读取第i个顶点
						vertex.fromBufferAttribute( positionAttribute, i );
						
						// 应用变换矩阵（将局部坐标转换为世界坐标）
						vertex.applyMatrix4( matrix );
						
						// 将变换后的顶点坐标添加到总数组
						vertices.push( vertex.x, vertex.y, vertex.z );
					}
				}

				/**
				 * 添加第一组边（立方体的垂直边）：
				 * 使用boxGeometry1（细长长方体）创建立方体的四个垂直边
				 * 参数说明：
				 *   1. 几何体对象
				 *   2. X位置（0表示在X=0平面上）
				 *   3. Y位置（±110表示上下边）
				 *   4. Z位置（±110表示前后边）
				 *   5. Y旋转（0表示不旋转）
				 */
				addGeo( boxGeometry1, 0, 110, 110, 0 );    // 前面右上垂直边
				addGeo( boxGeometry1, 0, 110, -110, 0 );   // 前面右下垂直边
				addGeo( boxGeometry1, 0, -110, 110, 0 );   // 前面左上垂直边
				addGeo( boxGeometry1, 0, -110, -110, 0 );  // 前面左下垂直边

				/**
				 * 添加第二组边（旋转90度后的垂直边）：
				 * 将同样的长方体旋转90度后放置，创建立方体的另外四个垂直边
				 * Math.PI/2 = 90度弧度
				 */
				addGeo( boxGeometry1, 110, 110, 0, Math.PI / 2 );    // 右边上垂直边
				addGeo( boxGeometry1, 110, -110, 0, Math.PI / 2 );   // 右边下垂直边
				addGeo( boxGeometry1, -110, 110, 0, Math.PI / 2 );   // 左边上垂直边
				addGeo( boxGeometry1, -110, -110, 0, Math.PI / 2 );  // 左边下垂直边

				/**
				 * 创建第二个长方体几何体（用于立方体的角柱）：
				 * 参数说明：
				 *   0.1*radius - 很窄的宽度
				 *   radius*1.2 - 稍长的高度（1.2倍半径）
				 *   0.1*radius - 很窄的深度
				 *   5 - 较少的分段数（宽度）
				 *   60 - 较多的分段数（高度，产生更多粒子）
				 *   5 - 较少的分段数（深度）
				 * 这个长方体用于立方体的四个垂直角柱
				 */
				let boxGeometry2 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );

				// 同样删除不需要的属性
				boxGeometry2.deleteAttribute( 'normal' );
				boxGeometry2.deleteAttribute( 'uv' );

				// 合并顶点
				boxGeometry2 = BufferGeometryUtils.mergeVertices( boxGeometry2 );

				/**
				 * 添加四个角柱：
				 * 放置在立方体的四个角上，连接上下边
				 */
				addGeo( boxGeometry2, 110, 0, 110, 0 );    // 前右角柱
				addGeo( boxGeometry2, 110, 0, -110, 0 );   // 后右角柱
				addGeo( boxGeometry2, -110, 0, 110, 0 );   // 前左角柱
				addGeo( boxGeometry2, -110, 0, -110, 0 );  // 后左角柱

				/**
				 * 创建位置属性缓冲区：
				 * Float32BufferAttribute - 32位浮点数缓冲区属性
				 * 参数1：顶点数据数组（扁平化的[x,y,z,x,y,z,...]）
				 * 参数2：每个顶点的分量数（3表示x,y,z）
				 * 这是Three.js高效存储几何数据的方式
				 */
				const positionAttribute = new THREE.Float32BufferAttribute( vertices, 3 );

				/**
				 * 创建颜色和大小数组：
				 * 为每个顶点（粒子）分配颜色和大小
				 */
				const colors = [];      // 颜色数组，每3个元素表示一个RGB颜色
				const sizes = [];       // 大小数组，每个元素表示一个粒子的大小
				const color = new THREE.Color();  // 临时颜色对象，重用避免频繁创建

				/**
				 * 遍历所有顶点，为每个粒子设置颜色和大小：
				 * positionAttribute.count - 总顶点数（粒子数）
				 */
				for ( let i = 0; i < positionAttribute.count; i ++ ) {
					/**
					 * 根据粒子类型设置不同颜色：
					 * vertices1是第一部分（空心球体）的粒子数
					 * i < vertices1 表示这是球体粒子
					 */
					if ( i < vertices1 ) {
						/**
						 * 球体粒子：使用HSL颜色模式，创建渐变效果
						 * setHSL()参数：色相(0-1), 饱和度(0-1), 亮度(0-1)
						 * 0.5 + 0.2 * (i/vertices1) - 色相从0.5到0.7渐变（蓝绿色到蓝色）
						 * 1 - 最大饱和度
						 * 0.5 - 中等亮度
						 */
						color.setHSL( 0.5 + 0.2 * ( i / vertices1 ), 1, 0.5 );
					} else {
						/**
						 * 框架粒子：固定颜色
						 * 0.1 - 红色调
						 * 1 - 最大饱和度
						 * 0.5 - 中等亮度
						 */
						color.setHSL( 0.1, 1, 0.5 );
					}

					/**
					 * 将颜色添加到颜色数组：
					 * toArray()将THREE.Color对象转换为[r,g,b]数组
					 * i*3 - 在数组中的起始索引位置
					 */
					color.toArray( colors, i * 3 );

					/**
					 * 设置粒子大小：
					 * 球体粒子：较小（10）
					 * 框架粒子：较大（40）
					 * 这样框架粒子在屏幕上更明显
					 */
					sizes[ i ] = i < vertices1 ? 10 : 40;
				}

				/**
				 * 创建最终的BufferGeometry：
				 * BufferGeometry是Three.js中存储几何数据的高效方式
				 * 使用缓冲区属性（BufferAttribute）存储顶点数据
				 */
				const geometry = new THREE.BufferGeometry();
				
				/**
				 * 设置几何体的各种属性：
				 * 每个属性对应着色器中的一个attribute变量
				 */
				
				// 位置属性：每个顶点的x,y,z坐标
				geometry.setAttribute( 'position', positionAttribute );
				
				/**
				 * 自定义颜色属性（ca）：
				 * 这是我们在着色器中使用的attribute名称
				 * 存储每个粒子的RGB颜色
				 * 3表示每个颜色有3个分量（r,g,b）
				 */
				geometry.setAttribute( 'ca', new THREE.Float32BufferAttribute( colors, 3 ) );
				
				/**
				 * 自定义大小属性（size）：
				 * 存储每个粒子的大小
				 * 1表示每个大小只有1个分量
				 */
				geometry.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );

				/**
				 * 加载纹理贴图：
				 * TextureLoader用于加载图片作为纹理
				 * 'textures/sprites/ball.png' - 纹理文件路径（相对路径）
				 * 这个纹理应该是带有透明通道的圆形粒子贴图
				 */
				const texture = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
				
				/**
				 * 设置纹理包裹方式：
				 * wrapS - S方向（U方向，水平）的包裹方式
				 * wrapT - T方向（V方向，垂直）的包裹方式
				 * RepeatWrapping - 重复包裹，但这里对点精灵意义不大
				 * 通常点精灵使用整个纹理，不需要重复
				 */
				texture.wrapS = THREE.RepeatWrapping;
				texture.wrapT = THREE.RepeatWrapping;

				/**
				 * 创建自定义着色器材质（ShaderMaterial）：
				 * ShaderMaterial允许使用自定义的GLSL着色器代码
				 * 提供最大的灵活性和性能控制
				 */
				const material = new THREE.ShaderMaterial( {
					/**
					 * uniforms对象：
					 * 全局变量，所有顶点/片段共享，可以在运行时修改
					 */
					uniforms: {
						// 振幅uniform（虽然在着色器中未使用，但保留在代码中）
						amplitude: { value: 1.0 },
						
						// 基础颜色uniform，默认白色（不改变粒子颜色）
						color: { value: new THREE.Color( 0xffffff ) },
						
						// 纹理uniform，传递加载的纹理给着色器
						pointTexture: { value: texture }
					},
					
					/**
					 * 着色器代码：
					 * 从HTML中的<script>标签获取GLSL代码
					 */
					vertexShader: document.getElementById( 'vertexshader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
				} );

				/**
				 * 创建点精灵对象（粒子系统）：
				 * Points - Three.js中的点精灵/粒子系统类
				 * 参数1：几何体（包含所有顶点数据）
				 * 参数2：材质（定义如何渲染每个点）
				 */
				object = new THREE.Points( geometry, material );
				
				// 将粒子系统添加到场景中
				scene.add( object );

				/**
				 * 创建WebGL渲染器：
				 * WebGLRenderer是Three.js的核心渲染器
				 * 使用WebGL API在canvas上绘制3D图形
				 */
				renderer = new THREE.WebGLRenderer();
				
				/**
				 * 设置设备像素比：
				 * window.devicePixelRatio - 物理像素与CSS像素的比率
				 * 在高DPI屏幕（如Retina）上，这个值可能是2或3
				 * 设置这个值可以避免在高DPI屏幕上模糊
				 */
				renderer.setPixelRatio( window.devicePixelRatio );
				
				/**
				 * 设置渲染器尺寸：
				 * 使用窗口的宽度和高度
				 * 这也会设置canvas元素的尺寸
				 */
				renderer.setSize( WIDTH, HEIGHT );
				
				/**
				 * 设置动画循环：
				 * setAnimationLoop()替代了之前的requestAnimationFrame循环
				 * 参数：每帧调用的函数
				 */
				renderer.setAnimationLoop( animate );

				/**
				 * 将渲染器的canvas元素添加到DOM：
				 * renderer.domElement - 渲染器创建的<canvas>元素
				 * 将其添加到id为"container"的div中
				 */
				const container = document.getElementById( 'container' );
				container.appendChild( renderer.domElement );

				/**
				 * 创建性能统计器：
				 * Stats.js是一个显示性能指标的小面板
				 * 通常显示FPS（帧率）、渲染时间等
				 */
				stats = new Stats();
				
				// 将统计器的DOM元素添加到容器中
				container.appendChild( stats.dom );

				/**
				 * 添加窗口大小变化事件监听器：
				 * 当用户调整浏览器窗口大小时，需要更新相机和渲染器
				 */
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时调用
			 */
			function onWindowResize() {
				/**
				 * 更新相机宽高比：
				 * 相机宽高比需要与窗口宽高比匹配
				 * 否则渲染的图像会被拉伸或压缩
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机投影矩阵：
				 * 当相机参数改变后，必须调用此方法
				 * 重新计算投影矩阵
				 */
				camera.updateProjectionMatrix();

				/**
				 * 更新渲染器尺寸：
				 * 将渲染器和canvas调整为新的窗口尺寸
				 */
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 每帧被调用一次（通常60次/秒）
			 * 这是Three.js应用的主循环
			 */
			function animate() {
				render();        // 渲染场景
				stats.update();  // 更新性能统计器显示
			}

			/**
			 * 渲染函数
			 * 执行实际的渲染操作和动画更新
			 */
			function render() {
				/**
				 * 获取当前时间：
				 * Date.now()返回毫秒数，乘以0.01转换为秒并缩小
				 * 用于基于时间的动画
				 */
				const time = Date.now() * 0.01;

				/**
				 * 旋转整个粒子系统：
				 * 使粒子系统绕Y轴和Z轴缓慢旋转
				 * 0.02是旋转速度系数
				 * 乘以time使旋转随时间连续进行
				 */
				object.rotation.y = object.rotation.z = 0.02 * time;

				/**
				 * 获取几何体和属性：
				 * 用于直接操作粒子数据
				 */
				const geometry = object.geometry;
				const attributes = geometry.attributes;

				/**
				 * 更新粒子大小（脉动效果）：
				 * 遍历所有粒子的大小属性
				 * 只对第一部分（球体粒子）应用脉动效果
				 * 框架粒子保持固定大小
				 */
				for ( let i = 0; i < attributes.size.array.length; i ++ ) {
					// 检查是否属于第一部分粒子（球体粒子）
					if ( i < vertices1 ) {
						/**
						 * 计算脉动大小：
						 * Math.sin() - 正弦函数，产生周期性变化
						 * 0.1*i - 每个粒子的相位偏移，使不同粒子脉动不同步
						 * 0.6*time - 时间因子，控制脉动速度
						 * 26 - 基础大小
						 * 32 - 脉动振幅（最大变化量）
						 * Math.max(0, ...) - 确保大小不为负
						 */
						attributes.size.array[ i ] = Math.max( 0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ) );
					}
				}

				/**
				 * 标记大小属性需要更新：
				 * 当我们直接修改BufferAttribute的array时
				 * 必须将needsUpdate设置为true，告诉Three.js数据已更改
				 * 这样Three.js会在下一帧渲染前将数据上传到GPU
				 */
				attributes.size.needsUpdate = true;

				/**
				 * 渲染场景：
				 * 这是实际绘制3D场景到canvas的操作
				 * 参数1：要渲染的场景对象
				 * 参数2：使用的相机对象
				 */
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>