<!-- 一、整体功能描述
这是一个基于Three.js的交互式粒子系统可视化演示，展示了一个动态的3D粒子网络效果。主要功能包括：

核心视觉效果
粒子系统：1000个白色粒子在立方体区域内随机运动

动态连接：当两个粒子距离足够近时，它们之间会生成一条半透明的连接线

距离相关效果：连接线的透明度和粒子间距离成反比（距离越近，线条越明显）

边界碰撞：粒子在设定的立方体边界内反弹，形成持续的动态运动

整体旋转：整个粒子系统以恒定的速度绕Y轴旋转

交互功能
相机控制：用户可以通过鼠标拖拽、缩放、旋转来查看场景

实时参数调节：通过GUI控制面板可以调整6个参数，实时改变视觉效果

性能监控：实时显示帧率(FPS)和渲染性能

可视化信息
粒子分布：以点云形式显示所有粒子

连接关系：以线条形式显示粒子间的连接关系

边界指示：用半透明的立方体线框显示粒子运动范围

二、主要技术点详解
1. BufferGeometry与DrawRange（核心优化技术）
javascript
// 关键代码示例
particles.setDrawRange(0, particleCount);  // 只绘制部分粒子
linesMesh.geometry.setDrawRange(0, numConnected * 2);  // 只绘制实际存在的线条
技术原理：

BufferGeometry：Three.js的高性能几何体表示方式，使用类型化数组（Float32Array）直接在内存中存储顶点数据，避免了JavaScript对象的开销

DrawRange：WebGL绘制指令优化，只向GPU发送需要绘制的顶点范围，而不是整个几何体的所有顶点

性能优势：

即使预分配了1000个粒子的内存，实际可能只绘制500个

线条几何体预分配了maxParticleCount * maxParticleCount个顶点的内存，但通过DrawRange只绘制实际连接产生的线条

这种"预分配+选择性绘制"的模式避免了每帧重新创建几何体的开销

2. 动态数据更新机制
javascript
// 关键代码示例
particles.setAttribute('position', 
  new THREE.BufferAttribute(particlePositions, 3)
    .setUsage(THREE.DynamicDrawUsage));  // 标记为动态数据

// 在动画循环中
pointCloud.geometry.attributes.position.needsUpdate = true;  // 标记需要更新
技术要点：

DynamicDrawUsage：告诉Three.js这个BufferAttribute的数据会频繁更新，Three.js会采用更合适的GPU缓冲区策略

needsUpdate标志：高效的数据同步机制，只有标记为需要更新的属性才会被上传到GPU

双缓冲思想：CPU端更新JavaScript数组，GPU端使用WebGL缓冲区，通过needsUpdate标志同步

3. 粒子连接检测算法
javascript
// 关键算法
for (let i = 0; i < particleCount; i++) {
  for (let j = i + 1; j < particleCount; j++) {
    const dist = Math.sqrt(dx*dx + dy*dy + dz*dz);
    if (dist < effectController.minDistance) {
      // 创建连接
    }
  }
}
算法特点：

时间复杂度：O(n²)，每个粒子都需要与其他所有粒子比较

优化措施：

只比较i < j的粒子对，避免重复计算

通过limitConnections限制每个粒子的最大连接数，减少计算量

粒子达到最大连接数后跳过后续检测

性能考虑：

对于1000个粒子，最坏情况下需要进行约50万次距离计算

实际项目中可能需要更高效的空间分区算法（如八叉树、网格划分等）

4. 视觉特效实现
javascript
// 加法混合（Additive Blending）
const material = new THREE.LineBasicMaterial({
  blending: THREE.AdditiveBlending,  // 线条叠加时更亮
  transparent: true
});

// 距离相关透明度
const alpha = 1.0 - dist / effectController.minDistance;
colors[colorpos++] = alpha;  // RGB分量都设为alpha值
视觉效果：

加法混合：多个半透明物体重叠时，颜色值相加而不是混合，产生"发光"效果

灰度渐变：线条颜色使用相同的RGB值，创建灰度效果，透明度随距离变化

大小衰减控制：粒子材质设置sizeAttenuation: false，粒子大小不随距离变化

5. 模块化架构
javascript
// ES6模块导入
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
架构优势：

代码组织：使用ES6模块系统，清晰的依赖关系

按需导入：只导入需要的Three.js组件，减少打包体积

现代JavaScript：使用import/export代替全局变量，避免命名冲突

6. 响应式设计
javascript
// 窗口大小变化处理
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
响应式特性：

自动适应浏览器窗口大小变化

保持正确的宽高比，防止图像拉伸

移动设备适配：通过viewport meta标签控制缩放

7. 性能监控与调试
javascript
// Stats.js集成
stats = new Stats();
container.appendChild(stats.dom);

// GUI调试面板
const gui = new GUI();
gui.add(effectController, 'particleCount', 0, maxParticleCount, 1);
开发工具：

实时性能监控：FPS计数器、帧时间、内存使用等

参数实时调节：无需修改代码即可测试不同参数效果

可见性控制：快速开关粒子或线条显示 -->


<!DOCTYPE html>
<html lang="zh-CN">  <!-- 修改为中文语言 -->
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的标题
			修改为中文描述，说明这是一个Three.js的BufferGeometry线条绘制范围示例
		-->
		<title>Three.js WebGL - BufferGeometry(缓冲几何体) 线条绘制范围示例</title>
		
		<!-- 
			字符编码：指定文档的字符编码为UTF-8
			UTF-8支持中文字符，确保中文能正确显示
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置：控制移动设备上的视口行为
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户缩放页面
			- minimum-scale=1.0: 最小缩放比例为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样式表
			- type="text/css": 指定MIME类型为CSS
			- rel="stylesheet": 定义与当前文档的关系为样式表
			- href="main.css": 样式表文件路径
			这个文件可能包含页面的布局、颜色、字体等样式
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			3D场景容器：Three.js渲染器将在这个div中创建canvas元素
			- id="container": 用于JavaScript中通过getElementById获取此元素
			这个div将包含整个WebGL渲染画布
		-->
		<div id="container"></div>
		
		<!-- 
			信息展示区域：显示Three.js和作者信息
			修改为中文内容，提供更友好的中文界面
		-->
		<div id="info">
			<!-- 
				Three.js官方链接：
				- href="https://threejs.org": 指向Three.js官方网站
				- target="_blank": 在新标签页中打开链接
				- rel="noopener": 安全特性，防止新页面访问window.opener属性
				显示中文描述，说明这是一个基于Three.js的WebGL BufferGeometry绘制范围演示
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL - BufferGeometry(缓冲几何体) 绘制范围演示<br/>
			
			<!-- 
				作者信息：
				- href="https://twitter.com/fernandojsg": 作者的Twitter主页
				显示中文"作者："前缀，更符合中文表达习惯
			-->
			作者：<a href="https://twitter.com/fernandojsg" target="_blank" rel="noopener">Fernando Serrano</a>
		</div>

		<!-- 
			导入映射表 (Import Maps)：现代浏览器特性，用于定义模块导入的路径映射
			作用：告诉浏览器"three"和"three/addons/"这些导入语句应该从哪个URL加载
			
			重要说明：
			1. 这是ES6模块的标准配置方式
			2. 当代码中执行`import * as THREE from 'three'`时，浏览器会查找这里的映射
			3. 将"three"映射到"../build/three.module.js"路径
			4. 将"three/addons/"映射到"./jsm/"目录
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module": 声明这是一个ES6模块，支持import/export语法
			- 模块中的代码有自己的作用域，不会污染全局命名空间
			这个模块包含整个Three.js应用的核心逻辑
		-->
		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js核心库的所有导出，命名为THREE
			// THREE对象包含了Three.js的所有核心功能（场景、相机、几何体、材质等）
			import * as THREE from 'three';

			// 导入性能监视器（FPS计数器）
			// Stats.js是一个轻量级的JavaScript性能监视器，显示帧率等信息
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入GUI控制面板库
			// lil-gui是一个轻量级的GUI库，用于创建调试控制面板
			// 这里使用解构赋值导入GUI类
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入轨道控制器
			// OrbitControls允许用户用鼠标拖拽、缩放、旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============================================
			// 全局变量声明部分
			// ============================================
			
			// 容器组：用于组织和变换所有粒子相关对象
			// 将点云、线条、辅助对象放在一个组里，便于统一操作（如旋转）
			let group;
			
			// DOM容器和性能统计对象
			let container;  // 存储对#container DOM元素的引用
			let stats;      // 存储Stats.js实例
			
			// 粒子数据数组：存储每个粒子的状态信息
			// 每个元素是一个对象，包含粒子的速度和当前连接数
			const particlesData = [];
			
			// Three.js核心对象
			let camera;     // 相机：定义观察3D场景的视角
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D画布上
			
			// 线条数据数组
			let positions;  // 线条顶点位置数据（Float32Array）
			let colors;     // 线条顶点颜色数据（Float32Array）
			
			// 粒子系统相关对象
			let particles;          // 粒子几何体（BufferGeometry实例）
			let pointCloud;         // 点云对象（Points实例），可视化粒子
			let particlePositions;  // 粒子位置数据数组（Float32Array）
			let linesMesh;          // 线条网格对象（LineSegments实例），可视化连接线

			// ============================================
			// 常量定义部分
			// ============================================
			
			// 最大粒子数量：最多可以创建的粒子数
			// 这个值决定了预分配内存的大小
			const maxParticleCount = 1000;
			
			// 当前粒子数量：实际显示的粒子数
			// 初始值为500，可以通过GUI调整
			let particleCount = 500;
			
			// 粒子活动区域尺寸
			// 粒子在一个800x800x800的立方体内运动
			const r = 800;      // 立方体边长
			const rHalf = r / 2; // 半边长，用于边界检测

			// ============================================
			// 控制参数对象
			// 这个对象的所有属性都会在GUI控制面板中显示为可调节参数
			// ============================================
			const effectController = {
				showDots: true,           // 是否显示粒子点（布尔值）
				showLines: true,          // 是否显示连接线（布尔值）
				minDistance: 150,         // 粒子间产生连接的最小距离（数值）
				limitConnections: false,  // 是否限制每个粒子的连接数（布尔值）
				maxConnections: 20,       // 每个粒子的最大连接数（数值）
				particleCount: 500        // 粒子数量（数值）
			};

			// ============================================
			// 初始化函数调用
			// ============================================
			
			// 程序入口点：调用init函数开始初始化整个应用
			init();

			// ============================================
			// 函数定义部分
			// ============================================

			/**
			 * 初始化GUI控制面板
			 * 
			 * 功能：
			 * 1. 创建GUI实例
			 * 2. 添加各种控制控件（开关、滑动条等）
			 * 3. 为每个控件绑定值改变时的回调函数
			 * 4. 实现通过GUI界面实时控制3D场景效果
			 * 
			 * 技术细节：
			 * - lil-gui会自动根据属性类型创建合适的控件
			 * - onChange回调函数在用户操作控件时被调用
			 * - 通过修改effectController对象的属性来改变场景状态
			 */
			function initGUI() {
				// 创建GUI实例
				// GUI会创建一个浮动的控制面板，默认显示在右上角
				const gui = new GUI();

				// 添加"显示粒子"复选框控件
				// 参数1：要控制的对象（effectController）
				// 参数2：要控制的属性名（'showDots'）
				gui.add( effectController, 'showDots' )
					// 绑定值改变事件处理函数
					.onChange( function ( value ) {
						// 当复选框状态改变时，更新点云对象的可见性
						pointCloud.visible = value;
					} );
				
				// 添加"显示连接线"复选框控件
				gui.add( effectController, 'showLines' )
					.onChange( function ( value ) {
						// 当复选框状态改变时，更新线条网格对象的可见性
						linesMesh.visible = value;
					} );
				
				// 添加"最小连接距离"滑动条控件
				// 参数3和4：最小值和最大值（10到300）
				// 这个控件没有绑定onChange，因为animate函数每帧都会读取这个值
				gui.add( effectController, 'minDistance', 10, 300 );
				
				// 添加"限制连接数"复选框控件
				// 控制是否启用每个粒子的最大连接数限制
				gui.add( effectController, 'limitConnections' );
				
				// 添加"最大连接数"滑动条控件
				// 参数4：步进值（1），表示每次增减的数值
				gui.add( effectController, 'maxConnections', 0, 30, 1 );
				
				// 添加"粒子数量"滑动条控件
				gui.add( effectController, 'particleCount', 0, maxParticleCount, 1 )
					.onChange( function ( value ) {
						// 当粒子数量改变时，更新两个变量：
						particleCount = value;  // 1. 更新当前粒子数量
						
						// 2. 更新粒子几何体的绘制范围
						// setDrawRange(start, count) 只绘制从start开始的count个粒子
						particles.setDrawRange( 0, particleCount );
					} );
			}

			/**
			 * 主初始化函数
			 * 
			 * 功能：
			 * 1. 初始化GUI控制面板
			 * 2. 获取DOM容器
			 * 3. 创建相机、场景、渲染器
			 * 4. 创建粒子系统和连接线系统
			 * 5. 设置事件监听
			 * 
			 * 执行流程：
			 * 1. initGUI() → 2. DOM操作 → 3. Three.js对象创建 → 4. 几何体初始化 → 5. 渲染设置
			 */
			function init() {
				// 步骤1：初始化GUI控制面板
				initGUI();

				// 步骤2：获取DOM容器元素
				// document.getElementById是DOM API，通过id获取HTML元素
				container = document.getElementById( 'container' );

				// 步骤3：创建相机
				// 透视相机（PerspectiveCamera）模拟人眼的视觉效果，近大远小
				camera = new THREE.PerspectiveCamera(
					45,                             // 视野角度（Field of View），单位是度
					window.innerWidth / window.innerHeight, // 宽高比（根据窗口尺寸计算）
					1,                              // 近裁剪面（Near Clipping Plane），比这个近的物体不显示
					4000                            // 远裁剪面（Far Clipping Plane），比这个远的物体不显示
				);
				// 设置相机位置：Z轴正方向（指向屏幕外）
				camera.position.z = 1750;

				// 步骤4：创建相机控制器
				// OrbitControls将相机控制绑定到DOM容器
				const controls = new OrbitControls( camera, container );
				// 设置相机的最小和最大缩放距离限制
				controls.minDistance = 1000;  // 最近不能小于1000单位
				controls.maxDistance = 3000;  // 最远不能超过3000单位

				// 步骤5：创建场景
				// 场景是所有3D对象的容器，包含网格、灯光、相机等
				scene = new THREE.Scene();

				// 步骤6：创建容器组并添加到场景
				// Group对象可以包含多个Object3D子对象，便于统一管理
				group = new THREE.Group();
				scene.add( group );

				// 步骤7：创建边界框辅助对象
				// BoxHelper创建一个线框盒子，用于可视化粒子的活动边界
				// 1. 创建一个立方体网格（仅用于构造，不实际显示）
				const boxGeometry = new THREE.BoxGeometry( r, r, r );
				const boxMesh = new THREE.Mesh( boxGeometry );
				
				// 2. 为这个网格创建BoxHelper（线框）
				const helper = new THREE.BoxHelper( boxMesh );
				
				// 3. 设置线框材质属性
				helper.material.color.setHex( 0x474747 );  // 颜色：深灰色（十六进制）
				helper.material.blending = THREE.AdditiveBlending;  // 混合模式：加法混合
				helper.material.transparent = true;  // 启用透明度
				
				// 4. 将辅助对象添加到组中
				group.add( helper );

				// 步骤8：预计算最大线条段数并初始化数据数组
				// 最坏情况下：每个粒子都可能与其他每个粒子连接
				const segments = maxParticleCount * maxParticleCount;
				
				// 初始化线条位置和颜色数组
				// 每个线段需要2个顶点，每个顶点有3个分量（x,y,z）
				// Float32Array是类型化数组，比普通Array性能更好，且是WebGL所需格式
				positions = new Float32Array( segments * 3 );  // 位置数据
				colors = new Float32Array( segments * 3 );     // 颜色数据

				// 步骤9：创建粒子材质
				// PointsMaterial专门用于点云渲染
				const pMaterial = new THREE.PointsMaterial( {
					color: 0xFFFFFF,          // 粒子颜色：白色
					size: 3,                  // 粒子大小：3像素
					blending: THREE.AdditiveBlending,  // 混合模式：加法混合（使叠加部分更亮）
					transparent: true,        // 启用透明度
					sizeAttenuation: false    // 禁用尺寸衰减（粒子大小不随距离变化）
				} );

				// 步骤10：创建粒子几何体并初始化粒子数据
				particles = new THREE.BufferGeometry();
				
				// 初始化粒子位置数组：每个粒子3个分量（x,y,z）
				particlePositions = new Float32Array( maxParticleCount * 3 );

				// 循环创建所有粒子（包括显示的和不显示的）
				for ( let i = 0; i < maxParticleCount; i ++ ) {
					// 在立方体区域内随机生成位置坐标
					// Math.random()返回0-1之间的随机数
					// r/2是半边长，这样计算的结果范围是[-r/2, r/2]
					const x = Math.random() * r - r / 2;
					const y = Math.random() * r - r / 2;
					const z = Math.random() * r - r / 2;

					// 将位置数据存储到数组中
					// i*3, i*3+1, i*3+2 分别对应第i个粒子的x,y,z坐标
					particlePositions[ i * 3 ] = x;
					particlePositions[ i * 3 + 1 ] = y;
					particlePositions[ i * 3 + 2 ] = z;

					// 创建粒子数据对象并存储到particlesData数组
					particlesData.push( {
						// 速度向量：每个分量的范围是[-1, 1]
						velocity: new THREE.Vector3( 
							-1 + Math.random() * 2,  // X方向：-1到1之间的随机数
							-1 + Math.random() * 2,  // Y方向
							-1 + Math.random() * 2   // Z方向
						),
						// 当前连接数：初始为0，每创建一个连接就加1
						numConnections: 0
					} );
				}

				// 步骤11：设置粒子几何体的绘制范围和属性
				// setDrawRange只绘制部分粒子，提高性能
				// 这里只绘制前particleCount个粒子
				particles.setDrawRange( 0, particleCount );
				
				// 创建BufferAttribute并设置为动态绘制
				// BufferAttribute是Three.js中存储几何体属性的数据结构
				// setUsage(THREE.DynamicDrawUsage)告诉WebGL这个属性会频繁更新
				particles.setAttribute( 'position', 
					new THREE.BufferAttribute( particlePositions, 3 )
						.setUsage( THREE.DynamicDrawUsage ) );

				// 步骤12：创建点云对象并添加到场景组
				// Points是Three.js中用于渲染点云的类
				// 参数1：几何体（包含顶点数据）
				// 参数2：材质（定义点的外观）
				pointCloud = new THREE.Points( particles, pMaterial );
				group.add( pointCloud );

				// 步骤13：创建线条几何体
				const geometry = new THREE.BufferGeometry();

				// 设置线条的位置属性
				geometry.setAttribute( 'position', 
					new THREE.BufferAttribute( positions, 3 )
						.setUsage( THREE.DynamicDrawUsage ) );
				
				// 设置线条的颜色属性
				geometry.setAttribute( 'color', 
					new THREE.BufferAttribute( colors, 3 )
						.setUsage( THREE.DynamicDrawUsage ) );

				// 计算边界球体
				// 这个操作对于视锥体裁剪（Frustum Culling）很重要
				// WebGL可以根据边界球体快速判断物体是否在视野内，提高渲染性能
				geometry.computeBoundingSphere();

				// 初始绘制范围设置为0：不绘制任何线条
				// 只有检测到粒子连接时才会绘制线条
				geometry.setDrawRange( 0, 0 );

				// 步骤14：创建线条材质
				// LineBasicMaterial是基本的线条材质
				const material = new THREE.LineBasicMaterial( {
					vertexColors: true,               // 使用顶点颜色（而不是uniform颜色）
					blending: THREE.AdditiveBlending, // 加法混合模式
					transparent: true                 // 启用透明度
				} );

				// 步骤15：创建线条网格对象
				// LineSegments用于绘制多条线段
				// 每两个顶点构成一条线段
				linesMesh = new THREE.LineSegments( geometry, material );
				group.add( linesMesh );

				// 步骤16：创建WebGL渲染器
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 启用抗锯齿，使边缘更平滑
				} );
				
				// 设置设备像素比
				// window.devicePixelRatio返回物理像素与CSS像素的比值
				// 在高DPI屏幕上（如Retina显示器），这个值可能是2或3
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环函数
				// setAnimationLoop替代了旧的requestAnimationFrame方式
				// 这个函数会以显示器的刷新率（通常60Hz）被调用
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素添加到DOM容器中
				container.appendChild( renderer.domElement );

				// 步骤17：初始化性能统计器
				// Stats.js会创建一个显示FPS、帧时间等信息的浮动面板
				stats = new Stats();
				container.appendChild( stats.dom );

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

			/**
			 * 窗口大小变化处理函数
			 * 
			 * 功能：
			 * 1. 更新相机的宽高比
			 * 2. 更新渲染器的尺寸
			 * 
			 * 触发时机：
			 * - 用户手动调整浏览器窗口大小
			 * - 浏览器全屏/退出全屏
			 * - 设备旋转（在移动设备上）
			 * 
			 * 注意：必须同时更新相机和渲染器，否则画面会拉伸变形
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// window.innerWidth / window.innerHeight 获取新的窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数（如aspect）改变后，必须调用此方法重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸以匹配窗口新尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 
			 * 功能（每帧执行）：
			 * 1. 更新所有粒子的位置
			 * 2. 处理粒子与边界的碰撞
			 * 3. 检测粒子间的距离，创建连接线
			 * 4. 更新几何体数据（粒子位置和线条数据）
			 * 5. 渲染场景
			 * 6. 更新性能统计
			 * 
			 * 性能优化：
			 * - 使用嵌套循环进行距离检测时，只比较i<j的粒子对，避免重复计算
			 * - 使用numConnections跟踪连接数，避免过度连接
			 * - 使用setDrawRange只绘制实际存在的线条
			 * - 使用needsUpdate标志，只在数据改变时才更新GPU
			 */
			function animate() {
				// 数据写入指针初始化
				// vertexpos: 写入positions数组的位置指针
				// colorpos: 写入colors数组的位置指针
				// numConnected: 统计已创建的连接数（用于后续设置绘制范围）
				let vertexpos = 0;
				let colorpos = 0;
				let numConnected = 0;

				// 步骤1：重置所有粒子的连接数
				// 每帧重新计算连接，所以需要先清零
				for ( let i = 0; i < particleCount; i ++ ) {
					particlesData[ i ].numConnections = 0;
				}

				// 步骤2：遍历所有粒子，更新位置并检测连接
				// 外层循环：遍历每个粒子
				for ( let i = 0; i < particleCount; i ++ ) {
					// 获取当前粒子的数据对象
					const particleData = particlesData[ i ];

					// 更新粒子位置：当前位置 + 速度
					// 这就是粒子运动的原理
					particlePositions[ i * 3 ] += particleData.velocity.x;
					particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
					particlePositions[ i * 3 + 2 ] += particleData.velocity.z;

					// Y轴边界碰撞检测
					// 如果粒子超出上边界或下边界，反转Y方向速度（弹性碰撞）
					if ( particlePositions[ i * 3 + 1 ] < - rHalf || particlePositions[ i * 3 + 1 ] > rHalf ) {
						particleData.velocity.y = - particleData.velocity.y;
					}

					// X轴边界碰撞检测
					if ( particlePositions[ i * 3 ] < - rHalf || particlePositions[ i * 3 ] > rHalf ) {
						particleData.velocity.x = - particleData.velocity.x;
					}

					// Z轴边界碰撞检测
					if ( particlePositions[ i * 3 + 2 ] < - rHalf || particlePositions[ i * 3 + 2 ] > rHalf ) {
						particleData.velocity.z = - particleData.velocity.z;
					}

					// 连接数限制检查
					// 如果启用了连接数限制，并且当前粒子已达到最大连接数，则跳过该粒子的后续连接检测
					// 这是性能优化：避免对已经达到连接上限的粒子进行不必要的距离计算
					if ( effectController.limitConnections && particleData.numConnections >= effectController.maxConnections ) {
						continue;  // 跳过本次循环的剩余部分，继续下一个粒子
					}

					// 步骤3：检测当前粒子与其他粒子的距离，创建连接
					// 内层循环：只遍历i之后的粒子，避免重复计算
					// 原理：如果粒子A和粒子B的距离足够近，这个检测会在A或B的循环中执行一次
					for ( let j = i + 1; j < particleCount; j ++ ) {
						// 获取目标粒子的数据
						const particleDataB = particlesData[ j ];
						
						// 检查目标粒子的连接数限制
						if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections ) {
							continue;  // 目标粒子已达到最大连接数，跳过
						}

						// 计算两个粒子间的欧几里得距离
						// 1. 计算三个坐标轴上的差值
						const dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
						const dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
						const dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
						
						// 2. 使用勾股定理计算实际距离
						// 注意：这里使用了平方根，性能开销较大
						// 在实际生产环境中，可能会使用距离的平方进行比较，避免平方根计算
						const dist = Math.sqrt( dx * dx + dy * dy + dz * dz );

						// 距离检测：如果距离小于最小连接距离
						if ( dist < effectController.minDistance ) {
							// 步骤4：更新两个粒子的连接数
							particleData.numConnections ++;
							particleDataB.numConnections ++;

							// 步骤5：计算线条透明度
							// 原理：距离越近，透明度越低（越不透明）
							// 公式：alpha = 1.0 - (dist / minDistance)
							// 当dist=0时，alpha=1.0（完全不透明）
							// 当dist=minDistance时，alpha=0.0（完全透明）
							const alpha = 1.0 - dist / effectController.minDistance;

							// 步骤6：写入线条的第一个顶点位置（粒子i的位置）
							positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
							positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
							positions[ vertexpos ++ ] = particlePositions[ i * 3 + 2 ];

							// 步骤7：写入线条的第二个顶点位置（粒子j的位置）
							positions[ vertexpos ++ ] = particlePositions[ j * 3 ];
							positions[ vertexpos ++ ] = particlePositions[ j * 3 + 1 ];
							positions[ vertexpos ++ ] = particlePositions[ j * 3 + 2 ];

							// 步骤8：写入第一个顶点的颜色
							// 三个颜色分量（R,G,B）都设置为alpha值
							// 这样会得到灰度颜色，alpha值越大越白，越小越黑
							colors[ colorpos ++ ] = alpha;
							colors[ colorpos ++ ] = alpha;
							colors[ colorpos ++ ] = alpha;

							// 步骤9：写入第二个顶点的颜色（与第一个顶点相同）
							colors[ colorpos ++ ] = alpha;
							colors[ colorpos ++ ] = alpha;
							colors[ colorpos ++ ] = alpha;

							// 步骤10：增加连接计数
							// 注意：这里增加的是连接数，而不是顶点数
							// 每个连接有2个顶点，所以后续设置绘制范围时要乘以2
							numConnected ++;
						}
					}
				}

				// 步骤11：更新线条几何体的绘制范围
				// 重要：每个连接对应2个顶点，所以绘制数量是numConnected * 2
				// 绘制范围从0开始，到numConnected*2结束
				linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
				
				// 步骤12：标记几何体属性需要更新
				// needsUpdate = true 告诉Three.js这个属性的数据已经改变，需要更新GPU缓冲区
				linesMesh.geometry.attributes.position.needsUpdate = true;
				linesMesh.geometry.attributes.color.needsUpdate = true;

				// 步骤13：标记粒子位置属性需要更新
				pointCloud.geometry.attributes.position.needsUpdate = true;

				// 步骤14：调用渲染函数
				render();

				// 步骤15：更新性能统计信息
				// stats.update()会更新FPS计数器等显示
				stats.update();
			}

			/**
			 * 渲染函数
			 * 
			 * 功能：
			 * 1. 更新场景对象的旋转（创建动画效果）
			 * 2. 执行实际的WebGL渲染
			 * 
			 * 注意：
			 * - 这个函数被animate()调用
			 * - 使用Date.now()获取时间，创建与时间相关的动画
			 */
			function render() {
				// 获取当前时间（转换为秒）
				// Date.now()返回从1970年1月1日到现在的毫秒数
				// 乘以0.001转换为秒
				const time = Date.now() * 0.001;

				// 让整个粒子系统组绕Y轴缓慢旋转
				// time * 0.1 使旋转速度较慢
				// 这样即使粒子本身不动，整个系统也在旋转，增加视觉效果
				group.rotation.y = time * 0.1;
				
				// 执行WebGL渲染
				// 这是Three.js渲染管道的最后一步，将3D场景绘制到2D画布上
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>