<!-- Three.js WebGPU 引力粒子模拟系统
🎯 项目概述
这是一个基于Three.js和WebGPU技术的高性能粒子物理模拟系统，专门模拟粒子在多个引力场作用下的运动行为。系统展示了26万+粒子在三维空间中的复杂动力学行为，具有实时交互和物理参数调整功能。

📊 核心功能
1. 物理模拟系统
多引力场模拟：3个独立的引力吸引子，每个具有可调质量和旋转轴

万有引力计算：基于牛顿万有引力定律 F = G * (m1 * m2) / r²

旋转力场：吸引子自转产生的科里奥利力效应

能量守恒：速度阻尼模拟能量耗散

边界处理：循环边界条件，粒子超出边界从另一侧进入

2. 粒子系统特性
粒子数量：262,144个（2¹⁸）高性能粒子

动态属性：

随机初始位置和速度

粒子质量在25%-100%基础质量间随机变化

大小随质量变化，质量越大粒子越大

颜色随速度动态变化（紫色→橙色）

3. 交互功能
相机控制：360度自由视角，缩放、旋转、平移

吸引子编辑：实时拖动、旋转吸引子位置

参数实时调整：物理参数和视觉效果的GUI控制面板

辅助视觉：吸引子辅助环和方向指示器

4. 视觉效果
动态着色：速度映射颜色渐变

发光效果：加法混合实现粒子发光叠加

抗锯齿：高质量边缘平滑

光照系统：环境光+方向光真实照明

🚀 主要技术点
1. WebGPU架构
javascript
// 核心技术栈
- Three.js WebGPU版本：新一代图形API封装
- GPU计算着色器：物理模拟完全GPU并行化
- 异步初始化：WebGPU设备异步获取和初始化
2. GPU计算管线
javascript
// 双计算通道设计
1. 初始化计算：随机生成粒子初始状态
2. 更新计算：每帧执行物理模拟（固定时间步长）

// 计算缓冲区
- positionBuffer：粒子位置数据（vec3 × 262,144）
- velocityBuffer：粒子速度数据（vec3 × 262,144）
3. TSL（Three.js着色器语言）
javascript
// 关键TSL特性
- 类型安全的着色器编程
- 自动着色器编译和优化
- JavaScript中直接编写GPU代码
- 统一变量（uniform）系统

// 主要TSL函数
- sphericalToVec3：球面坐标转换
- 物理计算循环：遍历所有吸引子计算合力
- 边界条件：循环边界数学实现
4. 实例化渲染技术
javascript
// 高性能渲染策略
- THREE.InstancedMesh：单次Draw Call渲染所有粒子
- 实例属性：通过缓冲区传递位置、颜色、大小
- 精灵材质：SpriteNodeMaterial优化粒子渲染
5. 物理模拟算法
javascript
// 核心物理循环
for (每个吸引子) {
  1. 计算引力向量和大小
  2. 计算旋转力（叉积运算）
  3. 累加到合力
}

// 数值积分
velocity += force * deltaTime;  // 显式欧拉积分
position += velocity * deltaTime;
velocity *= (1 - damping);      // 能量耗散
6. 内存与性能优化
javascript
// 优化策略
- 2的幂次方粒子数：GPU优化对齐
- 固定时间步长：1/60秒，保证模拟稳定性
- 禁用深度写入：粒子无遮挡关系，提升性能
- 批量更新：GPU并行处理所有粒子
🛠 关键技术实现细节
1. 引力计算实现
javascript
// 万有引力计算（TSL代码）
const gravityStrength = attractorMass
  .mul(particleMass)
  .mul(gravityConstant)
  .div(distance.pow(2));

// 旋转力计算（叉积运算）
const spinningVelocity = spinningForce.cross(toAttractor);
2. 边界条件算法
javascript
// 循环边界数学实现
position = mod(position + halfExtent, boundExtent) - halfExtent;
// 将[-N, N]范围映射到[0, 2N]，取模，再映射回[-N, N]
3. 颜色映射系统
javascript
// 速度到颜色的平滑映射
const colorMix = speed.div(maxSpeed).smoothstep(0, 0.5);
const finalColor = mix(colorA, colorB, colorMix);
// smoothstep提供非线性平滑过渡
4. 交互控制系统
javascript
// 双控制器协同
- OrbitControls：相机控制（用户视角）
- TransformControls：物体变换（吸引子编辑）
- 事件协调：编辑吸引子时自动禁用相机控制
📈 性能特征
渲染性能
Draw Call：1次（实例化渲染）

三角形数量：524,288个（每个粒子2个三角形）

帧率目标：60 FPS（高性能设备）

计算性能
并行度：262,144个线程同时执行

计算频率：60次/秒物理更新

内存使用：

位置缓冲区：262,144 × 3 × 4字节 ≈ 3 MB

速度缓冲区：262,144 × 3 × 4字节 ≈ 3 MB

优化亮点
零CPU物理计算：所有物理模拟在GPU完成

最小数据传输：位置/速度数据保留在GPU内存

固定流水线：避免动态分支，最大化GPU利用率

🎨 视觉特性
粒子渲染效果
大小变化：基于粒子质量的视觉反馈

颜色渐变：速度热力图可视化

叠加效果：加法混合创造发光轨迹

透视效果：近大远小的3D透视

场景组成
黑色背景：星空效果

粒子系统：26万+动态粒子

吸引子：3个可交互引力源

辅助元素：坐标环和方向指示

光照系统：模拟真实光照环境

🔧 开发工具与调试
内置调试功能
Inspector面板：实时参数调整

性能监控：帧率、内存使用

着色器调试：TSL代码实时编译反馈

开发友好特性
热重载支持：参数实时更新无需刷新

错误处理：WebGPU错误捕获和报告

兼容性检测：浏览器WebGPU支持检测

🌐 浏览器兼容性
支持环境
浏览器：Chrome 113+、Edge 113+、Safari（实验性）

操作系统：Windows 10+、macOS 12+、Linux

硬件要求：支持WebGPU的显卡

优雅降级
WebGPU不可用时显示错误提示

渐进增强设计，核心功能优先 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGPU引力粒子模拟系统 -->
		<title>Three.js WebGPU - 引力粒子模拟系统</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			- width=device-width：宽度等于设备宽度
			- user-scalable=no：禁止用户缩放
			- minimum-scale=1.0：最小缩放比例为1
			- 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="example.css">
	</head>
	<body>

		<!-- 
			页面信息展示区域，包含logo、标题和描述
			id="info"：CSS选择器标识符
		-->
		<div id="info">
			<!-- 
				Three.js官方Logo链接：
				- href：指向Three.js官方网站
				- target="_blank"：在新标签页中打开链接
				- rel="noopener"：安全设置，防止新页面访问原页面的window.opener属性
				- class="logo-link"：CSS样式类，通常包含背景图片设置为Three.js logo
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器，包含主标题和副标题 -->
			<div class="title-wrapper">
				<!-- 主标题链接到Three.js官方网站 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：当前演示的具体名称 -->
				<span>引力粒子模拟系统</span>
			</div>

			<!-- 
				简要描述区域：
				<small>标签表示小号文字，通常用于辅助信息
				描述当前页面的核心功能：基于WebGPU的引力粒子计算模拟
			-->
			<small>
				基于WebGPU的引力粒子计算模拟
			</small>
		</div>

		<!-- 
			模块导入映射配置（Import Maps）：
			这是一个现代JavaScript模块导入系统，允许开发者自定义模块标识符到实际URL的映射
			作用：简化模块导入路径，提高代码可维护性
			
			详细说明：
			1. "imports"：定义所有模块的导入映射
			2. "three": "../build/three.webgpu.js" - 将"three"标识符映射到WebGPU版本的Three.js
			3. "three/webgpu": "../build/three.webgpu.js" - 同上，提供备用导入路径
			4. "three/tsl": "../build/three.tsl.js" - TSL（Three.js Shader Language）着色器语言库
			5. "three/addons/": "./jsm/" - Three.js附加组件（addons）的基础路径
			
			使用示例：
			在代码中可以使用 import * as THREE from 'three'，而不是写完整的相对路径
		-->
		<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模块，支持import/export语法
			模块化代码可以避免全局变量污染，支持异步加载
		-->
		<script type="module">

			// =============================================
			// 导入模块部分
			// =============================================
			
			// 导入Three.js WebGPU版本的核心库
			// * as THREE：将整个模块内容导入到THREE命名空间中
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）着色器语言函数
			// TSL允许在JavaScript中编写着色器代码，提供类型安全的着色器编程
			// 导入的具体函数：
			// - float, uint：数据类型（浮点数、无符号整数）
			// - PI：圆周率常量
			// - color：颜色类型
			// - sin, cos：三角函数
			// - instanceIndex：实例索引（在实例化渲染中标识当前实例）
			// - Loop：循环结构
			// - mix：线性插值函数
			// - mod：取模函数
			// - instancedArray：实例化数组（用于GPU计算）
			// - Fn：函数定义
			// - uniform：uniform变量（在着色器中可被CPU设置的变量）
			// - uniformArray：uniform数组
			// - hash：哈希函数（生成伪随机数）
			// - vec3, vec4：3维和4维向量
			import { 
				float, If, PI, color, cos, instanceIndex, 
				Loop, mix, mod, sin, instancedArray, 
				Fn, uint, uniform, uniformArray, hash, 
				vec3, vec4 
			} from 'three/tsl';

			// 导入调试检查器（Inspector）工具
			// Inspector提供GUI界面，用于调试和参数调整
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入控制器
			// OrbitControls：轨道控制器，用于鼠标控制相机旋转、平移、缩放
			// TransformControls：变换控制器，用于交互式变换3D对象（移动、旋转、缩放）
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { TransformControls } from 'three/addons/controls/TransformControls.js';

			// =============================================
			// 全局变量声明
			// =============================================
			
			// 声明全局变量（在函数外声明，使其在多个函数间共享）：
			// - camera：三维相机，决定视角
			// - scene：三维场景，包含所有要渲染的对象
			// - renderer：渲染器，负责将3D场景渲染到2D画布
			// - controls：用户交互控制器
			// - updateCompute：GPU计算任务，用于更新粒子状态
			let camera, scene, renderer, controls, updateCompute;

			// =============================================
			// 初始化函数调用
			// =============================================
			
			// 调用初始化函数，开始整个应用的初始化过程
			init();

			// =============================================
			// 异步初始化函数
			// =============================================
			
			// async关键字表示这是一个异步函数，可以在函数内使用await
			// 异步函数不会阻塞主线程，适合用于加载资源和初始化WebGPU
			async function init() {

				// =========================================
				// 1. 相机设置
				// =========================================
				
				// 创建透视相机（Perspective Camera）：
				// 参数说明：
				// - 25：视野角度（FOV），单位是度，较小的值产生类似望远镜的效果，较大的值产生广角效果
				// - window.innerWidth / window.innerHeight：宽高比，确保渲染内容不变形
				// - 0.1：近裁剪平面，距离相机多近的物体会被裁剪掉
				// - 100：远裁剪平面，距离相机多远的物体会被裁剪掉
				// 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置：
				// x=3：向右偏移3个单位
				// y=5：向上偏移5个单位
				// z=8：向后偏移8个单位
				// 这个位置提供了场景的良好俯瞰视角
				camera.position.set( 3, 5, 8 );

				// =========================================
				// 2. 场景创建
				// =========================================
				
				// 创建三维场景，场景是所有3D对象的容器
				// 包括网格（Mesh）、灯光（Light）、相机（Camera）等
				scene = new THREE.Scene();

				// =========================================
				// 3. 灯光设置
				// =========================================
				
				// 创建环境光（Ambient Light）：
				// 环境光提供均匀的全方向照明，没有明确的来源方向
				// 参数说明：
				// - '#ffffff'：白色光
				// - 0.5：光照强度，范围0-1
				// 环境光用于模拟场景中的间接光照，消除完全黑暗的区域
				const ambientLight = new THREE.AmbientLight( '#ffffff', 0.5 );
				scene.add( ambientLight );

				// 创建方向光（Directional Light）：
				// 方向光模拟太阳光等平行光源，所有光线方向平行
				// 参数说明：
				// - '#ffffff'：白色光
				// - 1.5：光照强度，比环境光强，提供主光源
				const directionalLight = new THREE.DirectionalLight( '#ffffff', 1.5 );
				// 设置方向光位置，光源方向是从这个位置指向原点(0,0,0)
				directionalLight.position.set( 4, 2, 0 );
				scene.add( directionalLight );

				// =========================================
				// 4. 渲染器设置
				// =========================================
				
				// 创建WebGPURenderer：
				// WebGPU是新一代图形API，比WebGL更高效，提供更好的GPU控制
				// 参数说明：
				// - antialias: true：启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比：
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比率
				// 在高DPI设备（如Retina显示屏）上，这个值通常是2或3
				// 设置像素比可以确保在高分辨率设备上渲染更清晰
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器大小为整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：
				// setAnimationLoop是Three.js的动画系统，相当于requestAnimationFrame的封装
				// animate函数将在每一帧被调用（通常是60fps）
				renderer.setAnimationLoop( animate );
				
				// 设置清除颜色（背景色）：
				// '#000000'：纯黑色，作为星空背景
				// 清除颜色是渲染每帧前清除画布时使用的颜色
				renderer.setClearColor( '#000000' );
				
				// 创建并附加调试检查器：
				// Inspector提供GUI界面，用于实时调整场景参数
				// 开发工具，方便调试和参数优化
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement是<canvas>元素，所有3D内容将渲染到这个canvas上
				document.body.appendChild( renderer.domElement );

				// 初始化渲染器（异步操作）：
				// WebGPU需要异步初始化，包括获取GPU设备、创建上下文等
				// await等待初始化完成，确保后续代码可以安全使用WebGPU功能
				await renderer.init();

				// =========================================
				// 5. 控制器设置
				// =========================================
				
				// 创建轨道控制器（OrbitControls）：
				// 允许用户通过鼠标/触摸控制相机
				// 参数说明：
				// - camera：要控制的相机
				// - renderer.domElement：事件监听的DOM元素（canvas）
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 启用阻尼效果：
				// 相机移动时有惯性效果，停止操作后还会缓慢移动一点，提供更自然的交互体验
				controls.enableDamping = true;
				
				// 设置相机与目标点（场景中心）的最小距离
				// 防止相机穿过物体或离得太近
				controls.minDistance = 0.1;
				
				// 设置相机与目标点（场景中心）的最大距离
				// 防止相机离得太远，物体太小
				controls.maxDistance = 50;

				// =========================================
				// 6. 事件监听器
				// =========================================
				
				// 监听窗口大小改变事件：
				// 当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
				// 确保3D场景始终正确填充窗口，不变形
				window.addEventListener( 'resize', onWindowResize );

				// =========================================
				// 7. 吸引子系统设置
				// =========================================
				
				// 创建吸引子位置数组（uniformArray）：
				// uniformArray创建可在GPU着色器中访问的数组
				// 包含三个吸引子的初始位置，使用THREE.Vector3表示三维坐标
				// 位置坐标：
				// - 第一个：(-1, 0, 0) - 左方
				// - 第二个：(1, 0, -0.5) - 右前方
				// - 第三个：(0, 0.5, 1) - 上方偏后
				const attractorsPositions = uniformArray( [
					new THREE.Vector3( - 1, 0, 0 ),
					new THREE.Vector3( 1, 0, - 0.5 ),
					new THREE.Vector3( 0, 0.5, 1 )
				] );
				
				// 创建吸引子旋转轴数组：
				// 每个吸引子有一个旋转轴，粒子会围绕这个轴旋转
				// 旋转轴是单位向量（长度为1），表示旋转方向
				const attractorsRotationAxes = uniformArray( [
					new THREE.Vector3( 0, 1, 0 ),  // 绕Y轴旋转
					new THREE.Vector3( 0, 1, 0 ),  // 绕Y轴旋转
					new THREE.Vector3( 1, 0, - 0.5 ).normalize()  // 自定义旋转轴
				] );
				
				// 创建吸引子数量uniform变量：
				// 'uint'表示无符号整数类型
				// 这个值将在GPU计算中用于循环遍历所有吸引子
				const attractorsLength = uniform( attractorsPositions.array.length, 'uint' );
				
				// 创建吸引子对象数组，用于存储每个吸引子的所有相关数据
				const attractors = [];
				
				// 创建辅助几何体用于可视化吸引子：
				// RingGeometry：圆环几何体，用于显示吸引子的影响范围
				// 参数说明：
				// - 1：内半径
				// - 1.02：外半径（略大于内半径，形成细圆环）
				// - 32：分段数，越高圆环越平滑
				// - 1：径向分段数
				// - 0：起始角度
				// - Math.PI * 1.5：圆弧角度（270度，不是完整圆环）
				const helpersRingGeometry = new THREE.RingGeometry( 1, 1.02, 32, 1, 0, Math.PI * 1.5 );
				
				// ConeGeometry：圆锥几何体，用于指示旋转方向
				// 参数说明：
				// - 0.1：底面半径
				// - 0.4：高度
				// - 12：底面分段数
				// - 1：高度分段数
				// - false：不开放底面
				const helpersArrowGeometry = new THREE.ConeGeometry( 0.1, 0.4, 12, 1, false );
				
				// 创建基本材质用于辅助几何体：
				// MeshBasicMaterial：基础网格材质，不受光照影响，直接显示颜色
				// side: THREE.DoubleSide：双面渲染，从两面都能看到
				const helpersMaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide } );

				// 循环初始化每个吸引子
				for ( let i = 0; i < attractorsPositions.array.length; i ++ ) {

					// 创建吸引子对象，存储所有相关属性
					const attractor = {};

					// 存储位置和方向（从uniform数组中获取）
					attractor.position = attractorsPositions.array[ i ];
					attractor.orientation = attractorsRotationAxes.array[ i ];
					
					// 创建参考对象（Object3D）：
					// Object3D是Three.js中所有3D对象的基类，可以设置位置、旋转、缩放
					// 用于变换控制器的附着点
					attractor.reference = new THREE.Object3D();
					attractor.reference.position.copy( attractor.position );
					
					// 设置参考对象的四元数（旋转）：
					// 将默认的向上方向(0,1,0)旋转到吸引子的方向
					// quaternion：四元数，用于表示3D旋转，避免万向锁问题
					attractor.reference.quaternion.setFromUnitVectors( new THREE.Vector3( 0, 1, 0 ), attractor.orientation );
					scene.add( attractor.reference );

					// 创建辅助对象组（Group）：
					// Group可以包含多个子对象，作为一个整体进行变换
					attractor.helper = new THREE.Group();
					attractor.helper.scale.setScalar( 0.325 );  // 统一缩放为原始大小的32.5%
					attractor.reference.add( attractor.helper );

					// 创建圆环网格（显示吸引子影响范围）
					attractor.ring = new THREE.Mesh( helpersRingGeometry, helpersMaterial );
					attractor.ring.rotation.x = - Math.PI * 0.5;  // 旋转-90度，使圆环水平
					attractor.helper.add( attractor.ring );

					// 创建箭头网格（指示旋转方向）
					attractor.arrow = new THREE.Mesh( helpersArrowGeometry, helpersMaterial );
					attractor.arrow.position.x = 1;      // X轴偏移1单位
					attractor.arrow.position.z = 0.2;    // Z轴轻微偏移
					attractor.arrow.rotation.x = Math.PI * 0.5;  // 旋转90度，使箭头指向正确方向
					attractor.helper.add( attractor.arrow );

					// 创建变换控制器（TransformControls）：
					// 允许用户交互式地移动、旋转吸引子
					attractor.controls = new TransformControls( camera, renderer.domElement );
					attractor.controls.mode = 'rotate';  // 默认模式为旋转
					attractor.controls.size = 0.5;       // 控制器视觉大小
					attractor.controls.attach( attractor.reference );  // 附加到参考对象
					attractor.controls.visible = true;   // 可见
					attractor.controls.enabled = attractor.controls.visible;  // 启用
					scene.add( attractor.controls.getHelper() );  // 添加控制器的辅助线

					// 添加控制器拖动开始/结束事件监听器：
					// 'dragging-changed'事件在开始或结束拖动时触发
					// event.value：true表示开始拖动，false表示结束拖动
					attractor.controls.addEventListener( 'dragging-changed', ( event ) => {
						// 当拖动吸引子时，禁用轨道控制器，避免冲突
						controls.enabled = ! event.value;
					} );

					// 添加控制器变换改变事件监听器：
					// 'change'事件在变换（移动、旋转）发生时触发
					attractor.controls.addEventListener( 'change', () => {
						// 当控制器改变参考对象时，更新吸引子的位置和方向
						attractor.position.copy( attractor.reference.position );
						attractor.orientation.copy( new THREE.Vector3( 0, 1, 0 ).applyQuaternion( attractor.reference.quaternion ) );
					} );

					// 将吸引子对象添加到数组
					attractors.push( attractor );
				}

				// =========================================
				// 8. 粒子系统设置
				// =========================================
				
				// 设置粒子数量：
				// Math.pow(2, 18) = 262,144个粒子
				// 使用2的幂次方，因为GPU处理这类数字更高效
				const count = Math.pow( 2, 18 );
				
				// 创建精灵节点材质（SpriteNodeMaterial）：
				// 专门用于粒子渲染的材质，性能优于普通网格材质
				// 参数说明：
				// - blending: THREE.AdditiveBlending：加法混合模式
				//   使粒子叠加时颜色相加变亮，适合发光效果
				// - depthWrite: false：禁用深度写入
				//   粒子间不进行深度测试，防止近处粒子遮挡远处粒子
				const material = new THREE.SpriteNodeMaterial( { 
					blending: THREE.AdditiveBlending, 
					depthWrite: false 
				} );

				// =========================================
				// 9. 物理参数设置（使用uniform以便实时调整）
				// =========================================
				
				// attractorMass：吸引子质量
				// Number(`1e${7}`) = 10,000,000（一千万）
				// uniform：在着色器中可被CPU修改的变量
				const attractorMass = uniform( Number( `1e${7}` ) );
				
				// particleGlobalMass：粒子全局基础质量
				// Number(`1e${4}`) = 10,000（一万）
				const particleGlobalMass = uniform( Number( `1e${4}` ) );
				
				// timeScale：时间缩放因子，控制模拟速度
				// 1表示正常速度，大于1加速，小于1减速
				const timeScale = uniform( 1 );
				
				// spinningStrength：旋转强度，控制粒子绕吸引子旋转的力度
				const spinningStrength = uniform( 2.75 );
				
				// maxSpeed：粒子最大速度限制，防止速度过快
				const maxSpeed = uniform( 8 );
				
				// gravityConstant：万有引力常数，真实物理值为6.67e-11 N·m²/kg²
				// 这里使用真实物理常数，但乘以了吸引子和粒子的质量
				const gravityConstant = 6.67e-11;
				
				// velocityDamping：速度阻尼，模拟空气阻力或能量损失
				// 每帧速度乘以(1 - velocityDamping)
				const velocityDamping = uniform( 0.1 );
				
				// scale：粒子基础大小缩放
				const scale = uniform( 0.008 );
				
				// boundHalfExtent：边界半范围
				// 粒子运动范围是[-boundHalfExtent, boundHalfExtent]
				const boundHalfExtent = uniform( 8 );
				
				// colorA：颜色A（起始颜色）
				// '#5900ff'：深紫色
				const colorA = uniform( color( '#5900ff' ) );
				
				// colorB：颜色B（结束颜色）
				// '#ffa575'：浅橙色
				const colorB = uniform( color( '#ffa575' ) );

				// =========================================
				// 10. 创建GPU计算缓冲区
				// =========================================
				
				// positionBuffer：位置缓冲区，存储每个粒子的当前位置（vec3）
				// instancedArray：创建实例化数组，可在GPU计算中读写
				// 'vec3'：三维向量类型，包含x,y,z三个分量
				const positionBuffer = instancedArray( count, 'vec3' );
				
				// velocityBuffer：速度缓冲区，存储每个粒子的当前速度（vec3）
				const velocityBuffer = instancedArray( count, 'vec3' );

				// =========================================
				// 11. 球面坐标转换函数（TSL函数）
				// =========================================
				
				// 定义球面坐标转三维向量的TSL函数
				// 球面坐标参数：
				// - phi：极角（与Z轴的夹角）
				// - theta：方位角（在XY平面内与X轴的夹角）
				// 返回值：三维向量(x, y, z)
				const sphericalToVec3 = Fn( ( [ phi, theta ] ) => {
					// sin(phi)相当于球面上的半径投影
					const sinPhiRadius = sin( phi );
					
					// 球面坐标转直角坐标公式：
					// x = r * sin(phi) * sin(theta)
					// y = r * cos(phi)
					// z = r * sin(phi) * cos(theta)
					// 这里r=1（单位球面）
					return vec3(
						sinPhiRadius.mul( sin( theta ) ),  // x分量
						cos( phi ),                         // y分量
						sinPhiRadius.mul( cos( theta ) )    // z分量
					);
				} );

				// =========================================
				// 12. 初始化计算函数（设置粒子初始状态）
				// =========================================
				
				// 定义初始化函数，使用Fn创建TSL函数
				const init = Fn( () => {
					// 获取当前实例（粒子）的位置和速度缓冲区元素
					// instanceIndex：当前粒子的索引（0到count-1）
					const position = positionBuffer.element( instanceIndex );
					const velocity = velocityBuffer.element( instanceIndex );

					// 生成随机初始位置：
					// 1. 使用hash函数生成三个伪随机数（基于粒子索引和随机种子）
					// 2. 减去0.5使范围从[0,1]变为[-0.5,0.5]
					// 3. 乘以(5, 0.2, 5)使分布在一个扁平的长方体内
					//    x和z方向范围大（±2.5），y方向范围小（±0.1）
					const basePosition = vec3(
						hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) ),
						hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) ),
						hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) )
					).sub( 0.5 ).mul( vec3( 5, 0.2, 5 ) );
					
					// 将计算的位置赋值给位置缓冲区
					position.assign( basePosition );

					// 生成随机初始速度：
					// 1. 使用球面坐标，phi和theta在球面上均匀随机
					// 2. phi：0到2π，theta：0到π
					// 3. 将球面坐标转换为三维方向向量
					// 4. 乘以0.05调整初始速度大小
					const phi = hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) ).mul( PI ).mul( 2 );
					const theta = hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) ).mul( PI );
					const baseVelocity = sphericalToVec3( phi, theta ).mul( 0.05 );
					
					// 将计算的速度赋值给速度缓冲区
					velocity.assign( baseVelocity );
				} );

				// 创建初始化计算任务：
				// init().compute(count)将TSL函数编译为GPU计算着色器
				// 参数count指定并行处理的线程数（等于粒子数）
				const initCompute = init().compute( count );

				// 重置函数：重新初始化所有粒子
				const reset = () => {
					// 执行初始化计算，将所有粒子位置和速度重置为初始状态
					renderer.compute( initCompute );
				};

				// 初始执行一次重置，确保粒子有初始状态
				reset();

				// =========================================
				// 13. 更新计算函数（每帧执行的物理模拟）
				// =========================================
				
				// 粒子质量乘子：每个粒子的质量不同，增加多样性
				// hash生成伪随机数，remap将范围从[0,1]映射到[0.25,1]
				// 这样粒子质量在基础质量的25%到100%之间变化
				const particleMassMultiplier = hash( instanceIndex.add( uint( Math.random() * 0xffffff ) ) ).remap( 0.25, 1 ).toVar();
				
				// 计算实际粒子质量：基础质量 × 质量乘子
				const particleMass = particleMassMultiplier.mul( particleGlobalMass ).toVar();

				// 定义更新函数，包含完整的物理模拟逻辑
				const update = Fn( () => {
					// 时间步长计算：
					// 使用固定时间步长（1/60秒），确保物理模拟稳定
					// 固定时间步长比使用真实帧间隔更稳定，避免因帧率波动导致模拟不一致
					// timeScale允许调整模拟速度
					const delta = float( 1 / 60 ).mul( timeScale ).toVar();
					
					// 获取当前粒子的位置和速度
					const position = positionBuffer.element( instanceIndex );
					const velocity = velocityBuffer.element( instanceIndex );

					// 初始化合力为零向量
					const force = vec3( 0 ).toVar();

					// 遍历所有吸引子，计算每个吸引子对当前粒子的作用力
					// Loop是TSL中的循环结构，在GPU上并行执行
					// attractorsLength：吸引子数量，循环上限
					Loop( attractorsLength, ( { i } ) => {
						// 获取第i个吸引子的位置和旋转轴
						const attractorPosition = attractorsPositions.element( i );
						const attractorRotationAxis = attractorsRotationAxes.element( i );
						
						// 计算从粒子指向吸引子的向量
						const toAttractor = attractorPosition.sub( position );
						
						// 计算粒子与吸引子之间的距离
						const distance = toAttractor.length();
						
						// 计算单位方向向量（从粒子指向吸引子）
						const direction = toAttractor.normalize();

						// 计算万有引力强度：
						// 万有引力公式：F = G * (m1 * m2) / r²
						// - G：万有引力常数（gravityConstant）
						// - m1：吸引子质量（attractorMass）
						// - m2：粒子质量（particleMass）
						// - r：距离（distance）
						const gravityStrength = attractorMass.mul( particleMass ).mul( gravityConstant ).div( distance.pow( 2 ) ).toVar();
						
						// 计算万有引力向量：方向 × 强度
						const gravityForce = direction.mul( gravityStrength );
						
						// 将万有引力添加到合力中
						force.addAssign( gravityForce );

						// 计算旋转力（使粒子绕吸引子旋转）：
						// 旋转力 = 旋转轴 × 引力强度 × 旋转强度
						// 这是一种简化模型，模拟吸引子自转对周围粒子的影响
						const spinningForce = attractorRotationAxis.mul( gravityStrength ).mul( spinningStrength );
						
						// 计算旋转速度：旋转力与方向向量的叉积
						// 叉积产生垂直于两个向量的新向量，使粒子绕吸引子旋转
						const spinningVelocity = spinningForce.cross( toAttractor );
						
						// 将旋转速度添加到合力中
						force.addAssign( spinningVelocity );
					} );

					// 更新速度：
					// 根据牛顿第二定律：v = v0 + a * t
					// 这里a = F/m，但F已经是力（不是加速度），所以直接加F*t
					velocity.addAssign( force.mul( delta ) );
					
					// 计算当前速度大小
					const speed = velocity.length();
					
					// 如果速度超过最大速度限制，进行限制
					// If是TSL中的条件语句，在GPU上执行
					If( speed.greaterThan( maxSpeed ), () => {
						// 将速度向量归一化（方向不变），然后乘以最大速度
						velocity.assign( velocity.normalize().mul( maxSpeed ) );
					} );
					
					// 应用速度阻尼：
					// velocityDamping.oneMinus() = 1 - velocityDamping
					// 每帧速度乘以(1-damping)，模拟能量损失
					velocity.mulAssign( velocityDamping.oneMinus() );

					// 更新位置：
					// 根据速度和时间步长更新位置
					// p = p0 + v * t
					position.addAssign( velocity.mul( delta ) );

					// 边界处理（循环边界）：
					// 如果粒子超出边界，从另一侧进入
					// 这种边界条件保持粒子总数不变
					
					// 计算边界的一半范围
					const halfHalfExtent = boundHalfExtent.div( 2 ).toVar();
					
					// 边界处理算法：
					// 1. position.add(halfHalfExtent)：将坐标从[-halfHalfExtent, halfHalfExtent]映射到[0, boundHalfExtent]
					// 2. mod(..., boundHalfExtent)：对boundHalfExtent取模，实现循环
					// 3. .sub(halfHalfExtent)：将坐标映射回[-halfHalfExtent, halfHalfExtent]
					position.assign( mod( position.add( halfHalfExtent ), boundHalfExtent ).sub( halfHalfExtent ) );
				} );
				
				// 创建更新计算任务：
				// update().compute(count)将更新函数编译为GPU计算着色器
				// setName('Update Particles')：设置计算任务名称，便于调试
				// 这个计算任务将在每一帧执行，更新所有粒子的状态
				updateCompute = update().compute( count ).setName( 'Update Particles' );

				// =========================================
				// 14. 材质节点设置（TSL节点材质）
				// =========================================
				
				// 设置位置节点：从位置缓冲区读取粒子位置
				// toAttribute()将缓冲区转换为顶点属性，供渲染管线使用
				material.positionNode = positionBuffer.toAttribute();

				// 设置颜色节点：根据粒子速度动态改变颜色
				// 使用Fn创建颜色计算函数
				material.colorNode = Fn( () => {
					// 从速度缓冲区读取当前粒子的速度
					const velocity = velocityBuffer.toAttribute();
					
					// 计算速度大小
					const speed = velocity.length();
					
					// 计算颜色混合系数：
					// 1. speed.div(maxSpeed)：速度相对于最大速度的比例（0到1）
					// 2. smoothstep(0, 0.5)：平滑过渡函数，在0到0.5之间平滑过渡
					//    速度较慢时颜色变化明显，速度接近最大时颜色变化平缓
					const colorMix = speed.div( maxSpeed ).smoothstep( 0, 0.5 );
					
					// 混合两种颜色：
					// mix(colorA, colorB, colorMix)：线性插值
					// colorMix=0时返回colorA，colorMix=1时返回colorB
					const finalColor = mix( colorA, colorB, colorMix );
					
					// 返回四维向量（RGBA），A通道（透明度）固定为1
					return vec4( finalColor, 1 );
				} )();  // 立即执行函数，返回节点

				// 设置缩放节点：粒子大小根据质量变化
				// 质量大的粒子显示得更大
				material.scaleNode = particleMassMultiplier.mul( scale );

				// =========================================
				// 15. 创建实例化网格
				// =========================================
				
				// 创建平面几何体作为粒子基础形状：
				// PlaneGeometry：平面几何体，参数为宽度和高度（都是1）
				// 实际大小由material.scaleNode控制
				const geometry = new THREE.PlaneGeometry( 1, 1 );
				
				// 创建实例化网格（InstancedMesh）：
				// 实例化渲染是高效渲染大量相同几何体的技术
				// 参数说明：
				// - geometry：基础几何体
				// - material：材质
				// - count：实例数量（粒子数）
				// 实例化渲染只上传一次几何体数据，通过实例属性区分每个实例
				const mesh = new THREE.InstancedMesh( geometry, material, count );
				scene.add( mesh );

				// =========================================
				// 16. 调试面板（GUI）设置
				// =========================================
				
				// 从检查器创建参数面板，标题为'Parameters'
				const gui = renderer.inspector.createParameters( 'Parameters' );

				// 添加吸引子质量指数滑块：
				// 指数滑块控制吸引子质量（10^1 到 10^10）
				gui.add( { 
					attractorMassExponent: attractorMass.value.toString().length - 1 
				}, 'attractorMassExponent', 1, 10, 1 )
				   .onChange( value => {
						// 当滑块改变时，更新吸引子质量
						// Number(`1e${value}`)创建10的幂次方数
						attractorMass.value = Number( `1e${value}` );
				   } );
				
				// 添加粒子质量指数滑块：
				// 指数滑块控制粒子基础质量（10^1 到 10^10）
				gui.add( { 
					particleGlobalMassExponent: particleGlobalMass.value.toString().length - 1 
				}, 'particleGlobalMassExponent', 1, 10, 1 )
				   .onChange( value => {
						particleGlobalMass.value = Number( `1e${value}` );
				   } );
				
				// 添加最大速度滑块：
				// 范围0到10，步长0.01
				gui.add( maxSpeed, 'value', 0, 10, 0.01 ).name( 'maxSpeed' );
				
				// 添加速度阻尼滑块：
				// 范围0到0.1，步长0.001
				gui.add( velocityDamping, 'value', 0, 0.1, 0.001 ).name( 'velocityDamping' );
				
				// 添加旋转强度滑块：
				// 范围0到10，步长0.01
				gui.add( spinningStrength, 'value', 0, 10, 0.01 ).name( 'spinningStrength' );
				
				// 添加粒子大小滑块：
				// 范围0到0.1，步长0.001
				gui.add( scale, 'value', 0, 0.1, 0.001 ).name( 'scale' );
				
				// 添加边界范围滑块：
				// 范围0到20，步长0.01
				gui.add( boundHalfExtent, 'value', 0, 20, 0.01 ).name( 'boundHalfExtent' );
				
				// 添加颜色A选择器：
				// 使用十六进制颜色字符串
				gui.addColor( { 
					color: colorA.value.getHexString( THREE.SRGBColorSpace ) 
				}, 'color' )
				   .name( 'colorA' )
				   .onChange( value => {
						// 当颜色改变时，更新colorA uniform
						colorA.value.set( value );
				   } );
				
				// 添加颜色B选择器：
				gui.addColor( { 
					color: colorB.value.getHexString( THREE.SRGBColorSpace ) 
				}, 'color' )
				   .name( 'colorB' )
				   .onChange( value => {
						colorB.value.set( value );
				   } );
				
				// 添加控制器模式选择下拉框：
				gui.add( { 
					controlsMode: attractors[ 0 ].controls.mode 
				}, 'controlsMode', [ 'translate', 'rotate', 'none' ] )
				   .onChange( value => {
						// 遍历所有吸引子，更新控制器模式
						for ( const attractor of attractors ) {
							if ( value === 'none' ) {
								// 如果选择'none'，隐藏并禁用控制器
								attractor.controls.visible = false;
								attractor.controls.enabled = false;
							} else {
								// 否则显示、启用并设置模式
								attractor.controls.visible = true;
								attractor.controls.enabled = true;
								attractor.controls.mode = value;
							}
						}
				   } );

				// 添加辅助线显示切换复选框：
				gui.add( { 
					helperVisible: attractors[ 0 ].helper.visible 
				}, 'helperVisible' )
				   .onChange( value => {
						// 遍历所有吸引子，更新辅助线可见性
						for ( const attractor of attractors ) {
							attractor.helper.visible = value;
						}
				   } );

				// 添加重置按钮：
				// 点击时调用reset函数，重新初始化所有粒子
				gui.add( { reset }, 'reset' );
			}

			// =============================================
			// 窗口大小改变处理函数
			// =============================================
			
			/**
			 * 处理浏览器窗口大小改变事件
			 * 确保3D场景始终正确适应新窗口尺寸，不变形
			 */
			function onWindowResize() {
				// 更新相机宽高比：新窗口宽度 / 新窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵：
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小：设置为新窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// =============================================
			// 动画循环函数（每帧执行）
			// =============================================
			
			/**
			 * 动画循环函数，由渲染器的setAnimationLoop自动调用
			 * 每帧执行一次（通常60fps，即每秒60次）
			 * async关键字允许在函数内使用await（虽然这里没有使用）
			 */
			async function animate() {
				// 更新轨道控制器：
				// 如果启用了阻尼效果，需要每帧更新控制器状态
				controls.update();

				// 执行GPU计算：更新所有粒子的物理状态
				// updateCompute是在init函数中创建的GPU计算任务
				// 它在GPU上并行更新所有262,144个粒子的位置和速度
				renderer.compute( updateCompute );
				
				// 渲染场景：
				// 将3D场景通过相机视角渲染到2D画布上
				// 参数：要渲染的场景和使用的相机
				renderer.render( scene, camera );
			}

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