<!-- 代码功能详细描述
1. 核心功能
这是一个基于Three.js的高级粒子系统演示，展示了如何创建具有复杂视觉效果的自定义粒子。系统将球体和立方体两个3D几何体的顶点合并，然后以点精灵（广告牌粒子） 的形式渲染，每个粒子具有独立的大小、颜色和动态行为。

2. 视觉表现
双重粒子效果：

球体粒子（外层的蓝色渐变粒子）：尺寸较小（10-28像素），具有脉动动画效果，颜色从底部的暗蓝色渐变到顶部的亮蓝色

立方体粒子（内部的紫色粒子）：尺寸较大（40像素），保持静态大小，颜色呈紫色渐变

动态效果：

整个粒子系统缓慢旋转，展示三维形态

球体粒子周期性脉动（呼吸效果）

粒子大小随距离变化（透视效果）

透明粒子正确混合（远处的先渲染）

3. 几何结构
text
原始几何体：球体(68×38细分) + 立方体(10×10×10细分)
        ↓ 清理属性（删除法线和UV）
        ↓ 合并重复顶点
        ↓ 合并为一个几何体
最终粒子系统：~2,600个顶点（球体：~2,500，立方体：~100）
主要技术点详解
1. 自定义着色器（核心）
顶点着色器技术点：
glsl
// 自定义属性：JavaScript传递的顶点数据
attribute float size;    // 每个粒子的大小
attribute vec3 ca;       // 每个粒子的颜色

// 透视大小计算：模拟真实世界透视效果
gl_PointSize = size * (300.0 / -mvPosition.z);
// -mvPosition.z：视图空间深度（距离相机的距离）
// 300.0：基准距离参数，控制透视强度
片元着色器技术点：
glsl
// 纹理采样：使用圆形纹理实现柔边粒子
texture2D(pointTexture, gl_PointCoord);
// gl_PointCoord：片元在点精灵内的标准化坐标(0.0到1.0)
// 圆形纹理使粒子边缘透明，避免方形锯齿
2. 几何体处理管道
javascript
// 1. 创建基础几何体
let sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
let boxGeometry = new THREE.BoxGeometry(0.8*radius, 0.8*radius, 0.8*radius, 10, 10, 10);

// 2. 删除不必要属性（关键步骤）
sphereGeometry.deleteAttribute('normal');
sphereGeometry.deleteAttribute('uv');
// 原因：mergeVertices()只能合并位置完全相同的顶点
// 如果法线或UV不同，即使位置相同也不会合并

// 3. 合并重复顶点（优化性能）
sphereGeometry = BufferGeometryUtils.mergeVertices(sphereGeometry);
// 减少顶点数，提高渲染效率

// 4. 合并不同几何体
const combinedGeometry = BufferGeometryUtils.mergeGeometries([sphereGeometry, boxGeometry]);
// 将两个几何体合并为一个BufferGeometry
3. 自定义顶点属性系统
javascript
// 为每个顶点计算颜色（基于位置和索引）
for (let i = 0, l = positionAttribute.count; i < l; i++) {
    vertex.fromBufferAttribute(positionAttribute, i);
    
    if (i < length1) { // 球体顶点
        // HSL颜色模式：色相、饱和度、明度
        color.setHSL(
            0.01 + 0.1 * (i / length1),      // 色相渐变
            0.99,                            // 高饱和度
            (vertex.y + radius) / (4 * radius) // 明度基于Y坐标
        );
        sizes[i] = 10; // 球体粒子较小
    } else { // 立方体顶点
        color.setHSL(0.6, 0.75, 0.25 + vertex.y / (2 * radius));
        sizes[i] = 40; // 立方体粒子较大
    }
}

// 设置几何体属性
geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
geometry.setAttribute('ca', new THREE.Float32BufferAttribute(colors, 3));
4. 深度排序算法（关键渲染技术）
javascript
function sortPoints() {
    // 1. 计算MVP矩阵（模型-视图-投影矩阵）
    const matrix = new THREE.Matrix4();
    matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
    matrix.multiply(sphere.matrixWorld);
    
    // 2. 计算每个顶点在裁剪空间的深度
    for (let i = 0; i < length; i++) {
        vector.fromArray(positions, i * 3);
        vector.applyMatrix4(matrix); // 转换到裁剪空间
        sortArray.push([vector.z, i]); // 存储深度和索引
    }
    
    // 3. 按深度降序排序（从远到近）
    sortArray.sort((a, b) => b[0] - a[0]);
    
    // 4. 更新索引顺序
    for (let i = 0; i < length; i++) {
        indices[i] = sortArray[i][1];
    }
    
    // 5. 标记索引需要更新
    geometry.index.needsUpdate = true;
}
为什么需要深度排序？

透明物体渲染需要从后往前（画家算法）

否则会出现混合错误：近处物体可能被错误地显示在远处物体后面

5. 动态粒子动画
javascript
// 球体粒子脉动效果
attributes.size.array[i] = 16 + 12 * Math.sin(0.1 * i + time);
// 16：基础大小
// 12：脉动幅度
// 0.1 * i：基于顶点索引的相位偏移（创建波浪效果）
// time：时间变量（产生动画）
// Math.sin()：正弦函数（产生平滑周期性变化）
6. 性能优化技术
BufferGeometry：使用类型化数组存储顶点数据，GPU友好

顶点合并：减少重复顶点，降低GPU处理负担

属性按需更新：只更新修改的属性（size.needsUpdate = true）

使用Stats监控：实时查看帧率，确保性能达标

7. 现代JavaScript特性
javascript
// ES6模块系统
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';

// Import maps（现代浏览器支持）
<script type="importmap">
{
    "imports": {
        "three": "../build/three.module.js",
        "three/addons/": "./jsm/"
    }
}
</script>
技术难点与解决方案
难点1：透明粒子渲染顺序
问题：透明粒子需要从后往前渲染才能正确混合
解决方案：实现深度排序算法，每帧重新计算粒子深度并排序

难点2：不同几何体的顶点区分
问题：需要为球体和立方体顶点设置不同的外观和行为
解决方案：记录球体顶点数量（length1），在循环中根据索引区分处理

难点3：粒子大小随距离变化
问题：实现真实的透视效果
解决方案：在着色器中基于深度动态计算粒子大小

难点4：性能优化
问题：粒子系统每帧需要深度排序和属性更新
解决方案：

使用BufferGeometry提高数据传递效率

只标记修改的属性需要更新

使用合并后的几何体减少顶点数量

可扩展应用场景
数据可视化：将粒子替换为数据点，不同颜色/大小表示不同数据属性

游戏特效：修改为火焰、烟雾、星空等粒子特效

分子模拟：显示分子结构，不同元素用不同颜色/大小的粒子表示

天文模拟：模拟星云、星系等天体分布

艺术创作：创建动态抽象艺术，通过交互改变粒子行为 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：描述网页内容和功能 -->
		<title>three.js WebGL - 自定义属性粒子系统示例 [粒子][广告牌]</title>
		<!-- 字符编码设置：确保中文字符正确显示 -->
		<meta charset="utf-8">
		<!-- 视口设置：控制移动设备上的显示和缩放行为 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 外部样式表链接：引入页面样式 -->
		<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> - 自定义属性示例 - 粒子系统 - 广告牌效果<br>
			球体粒子(动态脉动) + 立方体粒子(静态)
		</div>
		
		<!-- 3D渲染容器：WebGL渲染器将在此DOM元素中绘制场景 -->
		<div id="container"></div>

		<!-- 顶点着色器脚本：定义GPU如何计算每个顶点的位置和属性 -->
		<!-- type="x-shader/x-vertex"：表示这是顶点着色器代码，不是可执行脚本 -->
		<!-- id="vertexshader"：用于在JavaScript中引用此着色器代码 -->
		<script type="x-shader/x-vertex" id="vertexshader">
			// attribute关键字：声明顶点属性，每个顶点都有独立的值
			// float类型：32位浮点数，存储粒子大小
			attribute float size;
			// vec3类型：三维向量，存储颜色值(r,g,b)
			attribute vec3 ca; // ca = color attribute，颜色属性
			
			// varying关键字：声明插值变量，从顶点着色器传递到片元着色器
			// 在顶点间自动插值，为每个片元提供平滑过渡的颜色
			varying vec3 vColor;
			
			// main()函数：顶点着色器的入口点，每个顶点执行一次
			void main() {
				// 将颜色属性传递给插值变量
				// 片元着色器将接收插值后的颜色值
				vColor = ca;
				
				// modelViewMatrix：模型视图矩阵
				// 组合模型变换(位置/旋转/缩放)和视图变换(相机位置/方向)
				// 将顶点从模型空间转换到视图空间(相机空间)
				vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
				
				// 计算粒子在屏幕上的大小
				// -mvPosition.z：视图空间中的深度(距离)，负号因为Z轴指向屏幕内
				// 300.0：基准距离，控制粒子大小的缩放因子
				// 距离越远(-mvPosition.z越大)，粒子越小，实现透视效果
				// gl_PointSize：内置变量，设置点精灵(粒子)的大小(像素)
				gl_PointSize = size * (300.0 / -mvPosition.z);
				
				// projectionMatrix：投影矩阵
				// 将视图空间坐标转换到裁剪空间(标准化设备坐标)
				// gl_Position：内置变量，存储顶点在裁剪空间中的最终位置
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>

		<!-- 片元着色器脚本：定义GPU如何计算每个像素(片元)的颜色 -->
		<script type="x-shader/x-fragment" id="fragmentshader">
			// uniform关键字：声明统一变量，所有顶点/片元共享相同的值
			// 由JavaScript代码设置，在渲染过程中保持不变
			uniform vec3 color; // 基础颜色，用于整体色调调整
			uniform sampler2D pointTexture; // 2D纹理采样器，存储粒子纹理图像
			
			// 从顶点着色器传递过来的插值颜色
			// 在三角形/点精灵内部平滑过渡
			varying vec3 vColor;
			
			// main()函数：片元着色器的入口点，每个像素执行一次
			void main() {
				// 计算最终颜色：
				// 1. color * vColor：基础颜色 × 顶点颜色 = 混合颜色
				// 2. vec4(..., 1.0)：转换为四维向量，alpha=1.0(完全不透明)
				// 3. * texture2D(...)：乘以纹理颜色，实现纹理贴图
				// texture2D函数：在纹理坐标处采样颜色
				// gl_PointCoord：内置变量，点在点精灵内的坐标(0.0到1.0)
				// 对于点精灵，gl_PointCoord表示当前片元在点精灵内的相对位置
				vec4 finalColor = vec4(color * vColor, 1.0) * texture2D(pointTexture, gl_PointCoord);
				
				// gl_FragColor：内置变量，设置片元的输出颜色
				// GPU将使用此颜色值更新帧缓冲区
				gl_FragColor = finalColor;
			}
		</script>

		<!-- 模块导入映射：现代JavaScript模块系统的配置 -->
		<!-- 告诉浏览器如何解析import语句中的模块标识符 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有Three.js逻辑代码 -->
		<!-- type="module"：表示这是ES6模块，支持import/export语法 -->
		<script type="module">
			// 导入Three.js核心库：3D图形库，提供创建和显示3D图形的功能
			import * as THREE from 'three';
			
			// 导入性能监控器：显示帧率、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入几何体工具库：提供几何体合并、优化等实用功能
			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

			// ========== 全局变量声明 ==========
			// renderer: WebGL渲染器，负责将3D场景绘制到Canvas中
			let renderer;
			// scene: 3D场景，包含所有需要渲染的对象(网格、灯光、相机等)
			let scene;
			// camera: 相机，定义观察者的视角和视锥体
			let camera;
			// stats: 性能统计对象，用于监控渲染性能
			let stats;
			// sphere: 粒子系统对象，包含所有粒子
			let sphere;
			// length1: 球体几何体的顶点数量，用于区分球体和立方体粒子
			let length1;

			// 获取浏览器窗口的当前尺寸
			const WIDTH = window.innerWidth;   // 窗口宽度(像素)
			const HEIGHT = window.innerHeight; // 窗口高度(像素)

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

			// ========== 初始化函数 ==========
			// 设置Three.js场景的所有组件：相机、场景、几何体、材质、渲染器等
			function init() {
				// ---------- 1. 创建相机 ----------
				// PerspectiveCamera: 透视相机，模拟人眼视角，有近大远小的透视效果
				// 参数说明：
				//   45: 视野角度(Field of View, FOV)，单位度，垂直方向的可视角度
				//   WIDTH / HEIGHT: 宽高比，确保渲染画面不被拉伸
				//   1: 近裁剪面距离，比此距离更近的物体不被渲染
				//   10000: 远裁剪面距离，比此距离更远的物体不被渲染
				camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 1, 10000);
				// 设置相机位置：沿Z轴向后移动300单位，获得更好的观察距离
				camera.position.z = 300;

				// ---------- 2. 创建场景 ----------
				// Scene: 3D场景容器，所有可见对象(网格、灯光等)都添加到场景中
				scene = new THREE.Scene();

				// ---------- 3. 创建几何体 ----------
				// 定义几何体参数
				const radius = 100;     // 球体半径
				const segments = 68;    // 经度分段数(水平细分)，值越高球体越圆滑
				const rings = 38;       // 纬度分段数(垂直细分)，值越高球体越圆滑
				
				// 创建球体几何体
				// SphereGeometry: 球体几何体，参数：半径，宽度分段，高度分段
				let sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
				
				// 创建立方体几何体
				// BoxGeometry: 立方体几何体，参数：宽度，高度，深度，宽度分段，高度分段，深度分段
				// 0.8 * radius: 立方体尺寸为球体的80%
				let boxGeometry = new THREE.BoxGeometry(
					0.8 * radius, 0.8 * radius, 0.8 * radius, // 尺寸
					10, 10, 10                                  // 分段数
				);

				// ---------- 4. 清理几何体属性 ----------
				// 删除不需要的属性以优化性能并确保后续操作正确
				// mergeVertices()函数要求几何体没有法线/UV属性才能正确合并相同顶点
				sphereGeometry.deleteAttribute('normal'); // 删除法线属性(光照计算需要)
				sphereGeometry.deleteAttribute('uv');     // 删除UV坐标属性(纹理映射需要)
				boxGeometry.deleteAttribute('normal');
				boxGeometry.deleteAttribute('uv');

				// ---------- 5. 合并重复顶点 ----------
				// 优化几何体：合并位置相同的顶点，减少顶点数量，提高渲染性能
				sphereGeometry = BufferGeometryUtils.mergeVertices(sphereGeometry);
				boxGeometry = BufferGeometryUtils.mergeVertices(boxGeometry);

				// ---------- 6. 合并球体和立方体几何体 ----------
				// 将两个几何体合并为一个几何体，以便创建统一的粒子系统
				const combinedGeometry = BufferGeometryUtils.mergeGeometries([sphereGeometry, boxGeometry]);
				// 获取合并后几何体的位置属性(顶点坐标数组)
				const positionAttribute = combinedGeometry.getAttribute('position');

				// ---------- 7. 为顶点准备颜色和大小数据 ----------
				// colors: 存储所有顶点的RGB颜色值，每个顶点3个值(r,g,b)
				const colors = [];
				// sizes: 存储所有顶点的大小值，每个顶点1个值
				const sizes = [];
				// 临时变量：用于颜色计算和转换
				const color = new THREE.Color();
				const vertex = new THREE.Vector3();

				// 记录球体几何体的原始顶点数量
				// 重要：用于区分哪些顶点属于球体，哪些属于立方体
				length1 = sphereGeometry.getAttribute('position').count;

				// 遍历合并后几何体的所有顶点
				for (let i = 0, l = positionAttribute.count; i < l; i++) {
					// 获取第i个顶点的位置坐标
					vertex.fromBufferAttribute(positionAttribute, i);
					
					// 根据顶点索引判断属于球体还是立方体，设置不同颜色
					if (i < length1) {
						// 球体部分顶点：使用HSL颜色模式创建渐变效果
						// HSL: 色相(Hue), 饱和度(Saturation), 明度(Lightness)
						// setHSL参数: 色相(0-1), 饱和度(0-1), 明度(0-1)
						color.setHSL(
							0.01 + 0.1 * (i / length1),      // 色相：基于顶点索引的渐变
							0.99,                            // 饱和度：接近最大值，颜色鲜艳
							(vertex.y + radius) / (4 * radius) // 明度：基于Y坐标，底部暗顶部亮
						);
					} else {
						// 立方体部分顶点：固定颜色方案
						color.setHSL(
							0.6,                          // 色相：蓝色调
							0.75,                         // 饱和度：中等饱和度
							0.25 + vertex.y / (2 * radius) // 明度：基于Y坐标变化
						);
					}
					
					// 将THREE.Color对象转换为数组并添加到colors数组
					// toArray方法：将颜色(r,g,b)写入数组的指定位置
					color.toArray(colors, i * 3);
					
					// 设置顶点大小：球体顶点小，立方体顶点大
					sizes[i] = i < length1 ? 10 : 40;
				}

				// ---------- 8. 创建粒子系统几何体 ----------
				// BufferGeometry: 高效几何体，使用类型化数组存储顶点数据
				const geometry = new THREE.BufferGeometry();
				
				// 设置几何体属性：位置、大小、颜色
				geometry.setAttribute('position', positionAttribute); // 位置属性(从合并几何体复制)
				
				// Float32BufferAttribute: 32位浮点数缓冲区属性
				// 参数：数据数组，每个顶点的分量数
				geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1)); // 大小属性，每顶点1个值
				geometry.setAttribute('ca', new THREE.Float32BufferAttribute(colors, 3));  // 颜色属性，每顶点3个值(r,g,b)

				// ---------- 9. 加载纹理 ----------
				// TextureLoader: 纹理加载器，从URL加载图像并创建纹理
				const texture = new THREE.TextureLoader().load('textures/sprites/disc.png');
				// 设置纹理包装模式：当纹理坐标超出[0,1]范围时如何处理
				texture.wrapS = THREE.RepeatWrapping; // S方向(水平/U轴)重复
				texture.wrapT = THREE.RepeatWrapping; // T方向(垂直/V轴)重复

				// ---------- 10. 创建自定义着色器材质 ----------
				// ShaderMaterial: 自定义着色器材质，完全控制渲染管线
				const material = new THREE.ShaderMaterial({
					// uniforms: 统一变量，所有顶点/片元共享，可由JavaScript更新
					uniforms: {
						// 基础颜色：白色，与顶点颜色相乘得到最终颜色
						color: { value: new THREE.Color(0xffffff) },
						// 粒子纹理：圆形渐变纹理，使粒子边缘透明
						pointTexture: { value: texture }
					},
					// 顶点着色器代码：从HTML脚本元素获取
					vertexShader: document.getElementById('vertexshader').textContent,
					// 片元着色器代码：从HTML脚本元素获取
					fragmentShader: document.getElementById('fragmentshader').textContent,
					// 启用透明度：允许纹理的透明部分显示背景
					transparent: true
				});

				// ---------- 11. 创建粒子系统 ----------
				// Points: 粒子系统(点精灵)，将几何体的每个顶点渲染为点
				// 参数：几何体(定义顶点位置和属性)，材质(定义如何渲染每个点)
				sphere = new THREE.Points(geometry, material);
				// 将粒子系统添加到场景中，使其可被渲染
				scene.add(sphere);

				// ---------- 12. 创建WebGL渲染器 ----------
				// WebGLRenderer: Three.js的主要渲染器，使用WebGL API绘制3D图形
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：在高DPI屏幕(如Retina)上获得更清晰的渲染
				// window.devicePixelRatio: 物理像素与CSS像素的比率
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸：使其填充整个容器
				renderer.setSize(WIDTH, HEIGHT);
				// 设置动画循环：requestAnimationFrame的Three.js封装
				// 参数：每帧调用的函数(通常是渲染函数)
				renderer.setAnimationLoop(animate);

				// ---------- 13. 将渲染器添加到DOM ----------
				// 获取页面上的容器元素
				const container = document.getElementById('container');
				// renderer.domElement: Canvas元素，WebGL在此绘制
				// 将Canvas添加到容器中，使其显示在页面上
				container.appendChild(renderer.domElement);

				// ---------- 14. 添加性能监控 ----------
				// Stats.js: 性能监控库，显示帧率、渲染时间等指标
				stats = new Stats();
				// stats.dom: 包含性能显示板的DOM元素
				container.appendChild(stats.dom);

				// ---------- 15. 添加窗口大小变化监听器 ----------
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener('resize', onWindowResize);
			}

			// ========== 窗口大小变化处理函数 ==========
			// 响应式设计：确保3D场景适应不同窗口尺寸
			function onWindowResize() {
				// 更新相机宽高比：使用新的窗口尺寸
				// 避免画面被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵：应用新的宽高比
				// 必须在修改相机参数后调用
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸：使用新的窗口尺寸
				// 确保Canvas填充整个容器
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ========== 粒子深度排序函数 ==========
			// 重要：透明物体需要从后往前渲染才能正确混合
			// 此函数根据深度(距离相机远近)对粒子进行排序
			function sortPoints() {
				// 临时向量：用于坐标转换计算
				const vector = new THREE.Vector3();
				
				// 计算模型视图投影矩阵(MVP矩阵)
				// 将顶点从模型空间转换到裁剪空间
				const matrix = new THREE.Matrix4();
				// 1. camera.matrixWorldInverse: 世界到相机空间的变换矩阵
				// 2. camera.projectionMatrix: 相机到裁剪空间的投影矩阵
				// 3. sphere.matrixWorld: 粒子系统的世界变换矩阵
				// 矩阵乘法顺序：从右到左应用变换
				matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
				matrix.multiply(sphere.matrixWorld);

				// 获取粒子系统的几何体
				const geometry = sphere.geometry;
				// 获取索引：决定顶点绘制顺序
				let index = geometry.getIndex();
				// 获取顶点位置数组：每个顶点3个值(x,y,z)
				const positions = geometry.getAttribute('position').array;
				// 计算顶点总数：位置数组长度 ÷ 3(每个顶点x,y,z三个分量)
				const length = positions.length / 3;

				// 如果几何体没有索引，创建默认索引[0, 1, 2, ..., length-1]
				if (index === null) {
					// Uint16Array: 16位无符号整数数组，最大索引65535
					// 如果顶点数超过65535，应使用Uint32Array
					const array = new Uint16Array(length);
					// 填充默认索引值
					for (let i = 0; i < length; i++) {
						array[i] = i;
					}
					// 创建BufferAttribute包装数组
					index = new THREE.BufferAttribute(array, 1);
					// 将索引属性设置到几何体
					geometry.setIndex(index);
				}

				// 创建排序数组：每个元素是[深度值, 原始索引]对
				const sortArray = [];
				for (let i = 0; i < length; i++) {
					// 从位置数组获取第i个顶点的坐标
					vector.fromArray(positions, i * 3);
					// 应用MVP矩阵：将顶点转换到裁剪空间
					vector.applyMatrix4(matrix);
					// 存储裁剪空间的Z值(深度)和原始索引
					// 在透视投影中，Z值表示距离相机的远近
					sortArray.push([vector.z, i]);
				}

				// 深度排序比较函数
				// 按深度降序排列：远处的顶点先绘制，近处的后绘制
				function numericalSort(a, b) {
					// b[0] - a[0]: 返回正值时b在前，负值时a在前
					// 由于使用Z值(透视投影中远处的Z值更大)，实现从远到近排序
					return b[0] - a[0];
				}

				// 对排序数组进行排序：改变原数组顺序
				sortArray.sort(numericalSort);

				// 获取索引数组的引用
				const indices = index.array;
				// 用排序后的索引顺序更新索引数组
				for (let i = 0; i < length; i++) {
					// sortArray[i][1]: 排序后第i个位置的原始索引
					indices[i] = sortArray[i][1];
				}

				// 标记索引属性需要更新
				// Three.js使用此标志知道需要将数据上传到GPU
				geometry.index.needsUpdate = true;
			}

			// ========== 动画循环函数 ==========
			// 每帧调用，驱动场景更新和渲染
			function animate() {
				// 渲染场景：执行所有3D计算和绘制
				render();
				// 更新性能统计：计算帧率等指标
				stats.update();
			}

			// ========== 渲染函数 ==========
			// 每帧执行的逻辑：更新动画状态并渲染场景
			function render() {
				// 计算当前时间(秒)，用于动画
				// Date.now(): 返回当前时间戳(毫秒)
				// * 0.005: 缩放因子，使动画速度合适
				const time = Date.now() * 0.005;

				// ---------- 1. 更新粒子系统旋转 ----------
				// 使粒子系统随时间缓慢旋转，展示3D效果
				sphere.rotation.y = 0.02 * time; // 绕Y轴旋转
				sphere.rotation.z = 0.02 * time; // 绕Z轴旋转

				// ---------- 2. 动态更新球体粒子大小 ----------
				// 获取几何体及其属性
				const geometry = sphere.geometry;
				const attributes = geometry.attributes;

				// 遍历所有顶点的大小属性
				for (let i = 0; i < attributes.size.array.length; i++) {
					// 只更新球体部分的粒子(前length1个顶点)
					if (i < length1) {
						// 使用正弦函数创建脉动效果：
						// 16: 基础大小
						// 12: 脉动幅度
						// 0.1 * i: 基于顶点索引的相位偏移，创建波浪效果
						// time: 时间变量，使脉动随时间变化
						// Math.sin(): 返回-1到1之间的值，创建平滑振荡
						attributes.size.array[i] = 16 + 12 * Math.sin(0.1 * i + time);
					}
					// 注意：立方体部分粒子大小保持不变(40)
				}
				
				// 标记大小属性需要更新
				// 重要：修改BufferAttribute后必须设置此标志
				// 告诉Three.js将更新后的数据上传到GPU
				attributes.size.needsUpdate = true;

				// ---------- 3. 对粒子进行深度排序 ----------
				// 确保透明粒子正确混合(远处的先绘制，近处的后绘制)
				sortPoints();

				// ---------- 4. 渲染场景 ----------
				// 执行WebGL绘制调用，将3D场景渲染到Canvas
				// 参数：场景(包含所有要渲染的对象)，相机(定义观察视角)
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>