<!-- Three.js WebGPU 实例化精灵粒子系统
一、代码功能概述
这是一个基于Three.js WebGPU渲染器的大规模粒子系统演示，展示如何高效渲染10000个动态雪花精灵。核心功能包括：

1. 视觉效果
雪花粒子系统：10000个随机分布的雪花精灵

动态旋转：每个雪花根据时间和索引以不同速度旋转

颜色循环：整体色调随时间缓慢变化（彩虹色循环）

雾效深度：添加指数雾效增强场景的层次感和距离感

透视衰减：雪花近大远小的自然透视效果

2. 交互功能
鼠标跟随：相机平滑跟随鼠标移动，实现沉浸式交互

实时控制：GUI面板可开关尺寸衰减效果

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

3. 技术演示
WebGPU渲染：展示下一代Web图形API的能力

实例化渲染：演示如何高效渲染大量相同物体

TSL着色器：使用Three.js着色器语言编写高级材质

二、主要技术点详解
1. WebGPU渲染技术
javascript
renderer = new THREE.WebGPURenderer();
现代图形API：相比WebGL有更好的性能和功能支持

多线程支持：更好的CPU多线程利用

计算着色器：支持通用GPU计算

显存管理：更高效的GPU内存管理

2. 实例化渲染（Instanced Rendering）
javascript
const positionAttribute = new THREE.InstancedBufferAttribute();
const particles = new THREE.Sprite(material);
particles.count = 10000;
核心优势：一次绘制调用渲染所有10000个精灵

传统方式对比：传统渲染需要10000次绘制调用

性能提升：减少CPU开销和GPU状态切换

数据存储：使用InstancedBufferAttribute存储每个实例的独特数据

3. Three.js着色器语言（TSL）
javascript
// 使用TSL节点定义材质属性
material.positionNode = instancedBufferAttribute(positionAttribute);
material.rotationNode = time.add(instanceIndex).sin();
material.scaleNode = uniform(15);
声明式编程：用JavaScript语法编写着色器

节点化系统：着色器操作表示为可连接的节点

实时编译：运行时编译为WebGPU着色器代码

类型安全：编译时类型检查减少错误

4. 精灵系统（Sprite System）
javascript
const particles = new THREE.Sprite(material);
公告板技术：始终面向相机的2D图像

透明处理：使用alpha贴图和alpha测试

尺寸控制：支持尺寸衰减（透视效果）

高效排序：自动处理透明物体的渲染顺序

5. 动画与交互系统
相机平滑跟随
javascript
// 线性插值（LERP）实现平滑移动
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;
色相循环动画
javascript
// 基于时间的色相计算
const h = (360 * (1.0 + time) % 360) / 360;
material.color.setHSL(h, 0.5, 0.5);
6. 性能优化技术
缓冲区重用
javascript
// 使用Float32Array提高内存效率
new Float32Array(positions)
剔除优化
视锥体剔除：自动剔除屏幕外的精灵

雾效裁剪：远处物体逐渐融入雾中

透明度优化：使用alphaTest避免半透明混合开销

内存管理
javascript
// 实例化数据存储在GPU缓冲区
new THREE.InstancedBufferAttribute(data, 3)
7. 调试与开发工具
javascript
import { Inspector } from 'three/addons/inspector/Inspector.js';
renderer.inspector = new Inspector();
实时调试：查看和修改场景参数

性能分析：监控帧率和渲染时间

场景检查：可视化场景层次结构

8. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自适应布局：自动适应不同屏幕尺寸

像素密度感知：正确处理高DPI显示器

相机参数更新：保持正确的宽高比

三、技术架构优势
1. 渲染管线优化
text
CPU端：
1. 准备实例化数据
2. 更新相机和动画参数
3. 一次绘制调用

GPU端：
1. 顶点着色器：处理所有实例
2. 片元着色器：计算每个像素颜色
3. 输出到帧缓冲区
2. 着色器工作流程
glsl
// 伪代码表示实际生成的着色器
for each instance i:
    position = instancedPositions[i]
    rotation = sin(time + i)  // 每个实例不同
    scale = 15.0 * attenuation
    renderSprite(position, rotation, scale)
3. 内存效率
几何数据：所有实例共享同一几何体

材质数据：所有实例共享同一材质

实例数据：只有位置数据需要单独存储（10000×3×4=120KB）

四、应用场景扩展
1. 游戏开发
大规模粒子效果（爆炸、火焰、魔法）

星空背景生成

人群/兽群模拟

2. 数据可视化
大规模数据点渲染

动态图表和散点图

实时流数据可视化

3. 科学模拟
分子运动模拟

天体系统可视化

流体动力学演示

4. 创意艺术
交互式数字艺术

动态背景生成

实时视觉特效

五、性能对比
技术方案	10000个精灵	绘制调用次数	CPU开销	GPU内存
传统渲染	逐个绘制	10000次	高	低
实例化渲染	一次绘制	1次	低	中等
计算着色器	GPU计算	依赖实现	最低	最高
六、浏览器兼容性
支持的浏览器：
Chrome 113+：完整支持WebGPU

Edge 113+：基于Chromium，相同支持

Firefox：实验性支持（需开启标志）

Safari：开发中支持

备用方案：
javascript
// 可添加WebGL回退
if (!navigator.gpu) {
    console.warn('WebGPU not supported, falling back to WebGL');
    // 切换到WebGLRenderer
} -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGPU - 实例化精灵示例 -->
		<title>Three.js WebGPU - 实例化精灵演示</title>
		
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		
		<!-- 
			视口设置（Viewport Meta Tag）：
			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样式表文件，用于页面样式美化 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域，包含网站链接、标题和描述
			id="info" 用于CSS样式选择和JavaScript操作
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				target="_blank" - 在新标签页中打开链接
				rel="noopener" - 安全属性，防止新页面访问原页面的window对象
				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>标签表示次要信息
				说明本示例使用的核心技术
			-->
			<small>
				使用TSL（Three.js着色器语言）渲染实例化精灵粒子系统
			</small>
		</div>
		
		<!-- 
			导入映射（Import Maps）：
			现代JavaScript模块系统的一部分，用于定义模块的别名和路径
			允许在浏览器中直接使用ES6模块语法导入第三方库
			无需打包工具即可直接引用模块
		-->
		<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模块
			模块具有自己的作用域，不会污染全局命名空间
			支持顶层的await和import/export语法
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			
			// 导入Three.js WebGPU版本的所有功能
			// 注意：由于使用了importmap，这里的"three/webgpu"会被映射到实际的构建文件
			import * as THREE from 'three/webgpu';

			// 导入Three.js的调试检查器（Inspector）
			// 这是一个GUI工具，用于调试和修改场景中的参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入TSL（Three.js Shading Language）的核心函数
			// TSL是Three.js的着色器节点系统，允许使用JavaScript语法编写着色器
			import { 
				uniform,              // 创建统一变量节点（在着色器中保持不变的值）
				time,                 // 获取着色器运行时间节点
				instanceIndex,        // 获取当前实例索引节点（用于实例化渲染）
				instancedBufferAttribute // 访问实例化缓冲区属性节点
			} from 'three/tsl';


			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象变量
			let camera;    // 相机对象 - 控制观察场景的视角
			let scene;     // 场景对象 - 包含所有3D对象的容器
			let renderer;  // 渲染器对象 - 负责将3D场景渲染到2D画布上
			let material;  // 材质对象 - 定义物体的表面特性（颜色、纹理、反光等）
			
			// 鼠标位置跟踪变量
			let mouseX = 0;  // 鼠标水平位置（相对于窗口中心）
			let mouseY = 0;  // 鼠标垂直位置（相对于窗口中心）

			// 窗口中心点坐标计算
			// 用于将鼠标坐标转换为以窗口中心为原点的坐标系
			let windowHalfX = window.innerWidth / 2;   // 窗口水平中心
			let windowHalfY = window.innerHeight / 2;  // 窗口垂直中心

			// ==================== 初始化函数调用 ====================
			
			// 程序入口点：调用初始化函数，开始构建3D场景
			init();

			/**
			 * 初始化函数 - 构建整个3D应用程序的基础架构
			 * 
			 * 功能概述：
			 * 1. 创建相机、场景、渲染器
			 * 2. 创建实例化精灵的几何数据和材质
			 * 3. 设置用户交互事件监听器
			 * 4. 创建GUI控制面板
			 * 5. 启动动画循环
			 */
			function init() {

				// ========== 创建透视相机（Perspective Camera） ==========
				
				/**
				 * 透视相机参数说明：
				 * 参数1: 55 - 视野角度（Field of View, FOV），单位是度
				 *        控制相机能看到的角度范围，值越大看到的范围越广
				 * 参数2: window.innerWidth / window.innerHeight - 宽高比
				 *        确保渲染画面不拉伸变形
				 * 参数3: 2 - 近裁剪面（Near Clipping Plane）
				 *        距离相机多近的物体开始被渲染，小于此距离的物体不可见
				 * 参数4: 2000 - 远裁剪面（Far Clipping Plane）
				 *        距离相机多远的物体停止被渲染，大于此距离的物体不可见
				 * 
				 * 注意：近裁剪面和远裁剪面之间的范围称为视锥体（Frustum）
				 */
				camera = new THREE.PerspectiveCamera( 
					55, 
					window.innerWidth / window.innerHeight, 
					2, 
					2000 
				);
				
				// 设置相机初始位置：沿Z轴正方向移动1000个单位
				// 在Three.js坐标系中：
				// X轴：水平方向，向右为正
				// Y轴：垂直方向，向上为正
				// Z轴：深度方向，从屏幕向外为正
				camera.position.z = 1000;

				// ========== 创建3D场景 ==========
				scene = new THREE.Scene();
				
				// 为场景添加指数雾效（Exponential Fog）
				/**
				 * 指数雾效参数：
				 * 参数1: 0x000000 - 雾的颜色（黑色）
				 * 参数2: 0.001 - 雾的密度（density）
				 *        值越大，雾越浓，物体在远处消失得越快
				 * 
				 * 指数雾的特点：雾的浓度随距离指数增长
				 * 与线性雾相比，指数雾更适合创建深度感强的场景
				 */
				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );

				// ========== 创建实例化精灵的位置数据 ==========
				
				// 定义要创建的精灵数量
				const count = 10000;  // 创建1万个精灵实例
				
				// 创建空数组来存储所有精灵的位置坐标
				const positions = [];  // 格式：[x1, y1, z1, x2, y2, z2, ...]

				// 使用循环为每个精灵生成随机位置
				/**
				 * Math.random() 返回0到1之间的随机数（包含0，不包含1）
				 * 2000 * Math.random() - 1000 的计算过程：
				 * 1. Math.random() 生成0~1的随机数
				 * 2. 乘以2000得到0~2000的随机数
				 * 3. 减去1000得到-1000~1000的随机数
				 * 
				 * 这样每个精灵的位置在X、Y、Z三个方向上都分布在-1000到1000的范围内
				 */
				for ( let i = 0; i < count; i ++ ) {
					// 为每个精灵添加三个坐标值（x, y, z）
					positions.push( 
						2000 * Math.random() - 1000,  // X坐标
						2000 * Math.random() - 1000,  // Y坐标
						2000 * Math.random() - 1000   // Z坐标
					);
				}

				// 创建实例化缓冲区属性（InstancedBufferAttribute）
				/**
				 * InstancedBufferAttribute是Three.js中用于实例化渲染的特殊属性
				 * 与传统BufferAttribute的区别：
				 * - BufferAttribute：每个顶点有独立的值
				 * - InstancedBufferAttribute：每个实例（精灵）有独立的值
				 * 
				 * 参数说明：
				 * 参数1: new Float32Array(positions) - 将普通数组转换为Float32类型数组
				 *        Float32Array是WebGL/WebGPU的高性能数值数组
				 * 参数2: 3 - 每个值包含的分量数量（3表示x、y、z三个分量）
				 * 
				 * 在着色器中，这个属性会被每个实例单独访问
				 */
				const positionAttribute = new THREE.InstancedBufferAttribute( 
					new Float32Array( positions ),  // 数据源
					3  // 每个项目的大小（3个浮点数 = 一个三维坐标）
				);

				// ========== 加载纹理贴图 ==========
				
				/**
				 * TextureLoader是Three.js的纹理加载器
				 * 它异步加载图片文件并将其转换为WebGL/WebGPU可用的纹理
				 * 
				 * 加载的图片：'textures/sprites/snowflake1.png'
				 * 这是一个雪花形状的透明PNG图片，作为精灵的纹理
				 */
				const map = new THREE.TextureLoader().load( 'textures/sprites/snowflake1.png' );
				
				/**
				 * 设置纹理的颜色空间为sRGB
				 * sRGB颜色空间更符合人眼感知，能提供更自然的颜色显示
				 * 这是现代图形应用的推荐设置
				 */
				map.colorSpace = THREE.SRGBColorSpace;

				// ========== 创建精灵节点材质（SpriteNodeMaterial） ==========
				
				/**
				 * SpriteNodeMaterial是Three.js专门为精灵节点系统设计的材质
				 * 它支持TSL（Three.js Shading Language）节点
				 * 
				 * 构造函数参数（选项对象）：
				 * sizeAttenuation: true - 启用尺寸衰减（距离相机越远，精灵越小）
				 * map: map - 设置漫反射纹理贴图（基础颜色）
				 * alphaMap: map - 设置透明度贴图（使用同一纹理控制透明度）
				 * alphaTest: 0.1 - 透明度测试阈值
				 *   - 像素透明度小于0.1的会被完全剔除（透明）
				 *   - 像素透明度大于等于0.1的会完全显示（不透明）
				 */
				material = new THREE.SpriteNodeMaterial( { 
					sizeAttenuation: true,  // 透视效果：近大远小
					map,                    // 颜色纹理
					alphaMap: map,          // 透明度纹理
					alphaTest: 0.1          // 透明度测试阈值
				} );
				
				/**
				 * 设置材质的初始颜色（使用HSL颜色模型）
				 * HSL（色相Hue、饱和度Saturation、亮度Lightness）是一种直观的颜色表示方法
				 * 
				 * setHSL参数：
				 * 参数1: 1.0 - 色相（0.0到1.0，对应0°到360°的色相环）
				 *        1.0对应红色（360°）
				 * 参数2: 0.3 - 饱和度（0.0灰色到1.0纯色）
				 *        0.3是较低的饱和度，颜色不会太鲜艳
				 * 参数3: 0.7 - 亮度（0.0黑色到1.0白色）
				 *        0.7是较高的亮度，颜色较亮
				 * 参数4: THREE.SRGBColorSpace - 颜色空间，确保颜色正确显示
				 */
				material.color.setHSL( 1.0, 0.3, 0.7, THREE.SRGBColorSpace );
				
				/**
				 * 使用TSL节点系统定义材质的高级特性
				 * TSL允许使用JavaScript语法编写着色器逻辑
				 */
				
				// 1. 位置节点：从实例化缓冲区属性获取每个精灵的位置
				// 每个实例根据其在positionAttribute中的索引获得不同的位置
				material.positionNode = instancedBufferAttribute( positionAttribute );
				
				// 2. 旋转节点：基于时间和实例索引的正弦函数
				/**
				 * time.add(instanceIndex).sin() 的含义：
				 * - time(): 返回着色器运行时间（秒），随时间增加
				 * - instanceIndex: 当前实例的索引（0到count-1）
				 * - add(): 将时间和实例索引相加，使每个实例有不同相位
				 * - sin(): 计算正弦值，结果在-1到1之间波动
				 * 
				 * 效果：每个精灵都会旋转，且旋转速度和相位都不同
				 * 形成波浪状的动态旋转效果
				 */
				material.rotationNode = time.add( instanceIndex ).sin();
				
				// 3. 缩放节点：统一缩放值（所有精灵大小相同）
				// uniform(15) 创建一个值为15的统一变量
				// 所有实例共享这个缩放值，每个精灵都被放大15倍
				material.scaleNode = uniform( 15 );

				// ========== 创建精灵系统（Sprite） ==========
				
				/**
				 * THREE.Sprite是专门用于显示始终面向相机的2D图像的物体
				 * 常用于粒子系统、UI元素、公告板（billboard）效果
				 * 
				 * 精灵的特点：
				 * - 始终面向相机（无论相机如何移动）
				 * - 没有厚度，只有2D表面
				 * - 适合表现火花、雪花、星星等效果
				 */
				const particles = new THREE.Sprite( material );
				
				// 设置实例数量为10000
				// 这个属性告诉Three.js要渲染多少个精灵实例
				particles.count = count;

				// 将精灵系统添加到场景中
				// 现在场景包含了10000个位置、旋转各不相同的雪花精灵
				scene.add( particles );

				// ========== 创建WebGPU渲染器 ==========
				
				/**
				 * WebGPURenderer是Three.js的下一代渲染器
				 * 相比WebGLRenderer的优势：
				 * 1. 更好的性能（多线程、并行计算）
				 * 2. 更低的CPU开销
				 * 3. 支持更复杂的着色器和计算任务
				 * 4. 更好的多渲染目标支持
				 */
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比（Device Pixel Ratio）
				/**
				 * window.devicePixelRatio 获取设备的物理像素与CSS像素的比值
				 * 例如：Retina显示屏的devicePixelRatio为2
				 * 设置此值可以确保在高DPI屏幕上渲染清晰的内容
				 */
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				/**
				 * setAnimationLoop是requestAnimationFrame的Three.js封装
				 * 它会以显示器的刷新率（通常60fps）连续调用指定的函数
				 * 这是现代浏览器中执行动画的标准方法
				 */
				renderer.setAnimationLoop( animate );
				
				// 附加调试检查器到渲染器
				/**
				 * Inspector是一个强大的调试工具，允许：
				 * 1. 查看场景层次结构
				 * 2. 修改对象属性（位置、旋转、缩放等）
				 * 3. 实时调整材质参数
				 * 4. 查看性能统计
				 */
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到HTML文档的body中
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ========== 创建GUI控制面板 ==========
				
				// 从检查器创建一个参数控制面板，标题为"Settings"
				const gui = renderer.inspector.createParameters( '设置面板' );

				// 添加"尺寸衰减"控制开关
				/**
				 * gui.add() 创建一个GUI控制器
				 * 参数1: material - 要控制的对象
				 * 参数2: 'sizeAttenuation' - 要控制的属性名
				 * 返回值：返回一个控制器对象，可以链接更多方法
				 */
				gui.add( material, 'sizeAttenuation' )
				   .name('尺寸衰减')  // 设置控制器显示名称
				   .onChange( function () {  // 当值改变时执行的回调函数
						// 标记材质需要重新编译
						// 当切换尺寸衰减时，着色器需要重新编译以适应不同的计算
						material.needsUpdate = true;
						
						// 根据是否启用衰减调整精灵的缩放值
						// 启用衰减：大尺寸（15），因为远处会变小
						// 禁用衰减：小尺寸（0.03），因为所有精灵大小相同
						material.scaleNode.value = material.sizeAttenuation ? 15 : 0.03;
				   } );

				// ========== 设置事件监听器 ==========
				
				/**
				 * 设置页面CSS样式，禁止触摸操作的默认行为
				 * 在触摸设备上，这可以防止滚动等默认手势干扰3D交互
				 */
				document.body.style.touchAction = 'none';
				
				/**
				 * 添加指针移动事件监听器
				 * pointermove事件同时支持鼠标、触摸笔和触摸屏
				 * 比单独的mousemove和touchmove事件更通用
				 */
				document.body.addEventListener( 'pointermove', onPointerMove );

				// 监听窗口大小变化事件
				/**
				 * 当用户调整浏览器窗口大小时，需要更新：
				 * 1. 相机宽高比（防止画面拉伸）
				 * 2. 渲染器尺寸（填充新窗口大小）
				 * 3. 窗口中心点坐标（用于鼠标跟踪）
				 */
				window.addEventListener( 'resize', onWindowResize );

			} // init函数结束

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时自动调用
			 */
			function onWindowResize() {
				// 重新计算窗口中心点坐标
				// 这些值用于将鼠标坐标转换为以窗口中心为原点的坐标系
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				// 更新相机的宽高比（Aspect Ratio）
				// 宽高比 = 窗口宽度 / 窗口高度
				// 必须更新，否则渲染画面会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵（Projection Matrix）
				/**
				 * 投影矩阵定义了3D空间如何映射到2D屏幕
				 * 当相机参数改变时，必须调用updateProjectionMatrix()来重新计算这个矩阵
				 */
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸，使其匹配新的窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 指针移动事件处理函数
			 * 当鼠标移动或触摸屏上的手指移动时调用
			 * 
			 * @param {PointerEvent} event - 指针事件对象
			 * 包含坐标信息：event.clientX, event.clientY
			 */
			function onPointerMove( event ) {
				/**
				 * 检查是否为"主指针"（Primary Pointer）
				 * 在多指针设备（如支持多点触控的触摸屏）上：
				 * - event.isPrimary 为true表示这是第一个/主要的指针
				 * - event.isPrimary 为false表示这是附加的指针
				 * 只处理主指针可以避免多个指针同时控制的问题
				 */
				if ( event.isPrimary === false ) return;

				/**
				 * 计算鼠标相对于窗口中心的位置
				 * 转换原因：
				 * - event.clientX/clientY是相对于浏览器窗口左上角的坐标
				 * - 我们想要以窗口中心为原点的坐标（向右为+X，向上为+Y）
				 * 
				 * 计算公式：
				 * 鼠标X相对于中心 = 鼠标X绝对坐标 - 窗口宽度的一半
				 * 鼠标Y相对于中心 = 鼠标Y绝对坐标 - 窗口高度的一半
				 * 
				 * 注意：屏幕坐标系的Y轴是向下的，而3D坐标系的Y轴是向上的
				 * 所以在render()函数中，我们会对mouseY取负值来翻转方向
				 */
				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}

			/**
			 * 动画循环函数
			 * 由渲染器的setAnimationLoop()以显示器刷新率（通常60fps）连续调用
			 * 这是整个3D应用程序的核心循环
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
			}

			/**
			 * 渲染函数 - 执行每一帧的更新和渲染操作
			 * 这个函数在每次屏幕刷新时被调用（通常每秒60次）
			 */
			function render() {
				// 计算基于时间的值（单位：秒）
				/**
				 * Date.now() 返回当前时间戳（毫秒）
				 * 乘以0.00005等价于除以20000，将毫秒转换为秒并缩放
				 * 这会产生一个缓慢变化的时间值，用于动画
				 */
				const time = Date.now() * 0.00005;

				// ========== 平滑相机跟随鼠标 ==========
				
				/**
				 * 使用线性插值（Linear Interpolation, LERP）实现平滑的相机移动
				 * 公式：当前位置 + (目标位置 - 当前位置) * 插值因子
				 * 
				 * 数学原理：
				 * 每次调用时，相机位置向目标位置移动剩余距离的5%
				 * 这创建了一个指数衰减的平滑运动效果
				 * 
				 * 为什么是0.05（5%）？
				 * - 值太小：相机移动太慢，感觉延迟
				 * - 值太大：相机移动不连贯，有跳跃感
				 * - 0.05是一个平衡值，提供平滑而及时的反应
				 */
				
				// 水平方向：相机X坐标平滑移向鼠标X坐标
				// mouseX是相对于窗口中心的坐标（范围：-窗口宽度/2 到 +窗口宽度/2）
				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				
				// 垂直方向：相机Y坐标平滑移向鼠标Y坐标的负值
				// 注意：mouseY取负值（-mouseY）是因为：
				// 屏幕坐标系：Y轴向下为正（鼠标向下移动，clientY增加）
				// 3D坐标系：Y轴向上为正
				// 取负值翻转Y轴，使鼠标向下移动时相机也向下移动（符合直觉）
				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

				// 设置相机始终看向场景原点（0, 0, 0）
				/**
				 * camera.lookAt() 设置相机的观察目标点
				 * 参数scene.position是场景的位置，默认是(0, 0, 0)
				 * 这确保了无论相机如何移动，它始终看向场景中心
				 */
				camera.lookAt( scene.position );

				// ========== 动态改变材质颜色（色相循环） ==========
				
				/**
				 * HSL色相循环动画：
				 * 1. 计算基于时间的色相值（0到1之间循环）
				 * 2. 更新材质颜色，实现彩虹色循环效果
				 * 
				 * 计算公式分解：
				 * 1. 1.0 + time：基础偏移，确保颜色从红色开始
				 * 2. 360 * (1.0 + time)：将0-1范围映射到0-360度
				 * 3. % 360：取模运算，确保结果在0-359之间循环
				 * 4. / 360：将0-360度转换回0-1范围，供setHSL使用
				 * 
				 * 效果：颜色随时间缓慢循环变化（约55秒完成一个完整循环）
				 * time变化率：每毫秒增加0.00005秒，每秒增加0.05
				 * 完整循环时间：360度 / (360度/秒 * 0.05) = 20秒
				 */
				const h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
				
				/**
				 * 更新材质颜色
				 * 参数：
				 * h: 随时间循环的色相（0.0红 -> 0.17黄 -> 0.33绿 -> 0.5青 -> 0.67蓝 -> 0.83紫 -> 1.0红）
				 * s: 饱和度固定为0.5（中等饱和度，颜色不会太鲜艳也不会太灰暗）
				 * l: 亮度固定为0.5（中等亮度，颜色不会太亮也不会太暗）
				 */
				material.color.setHSL( h, 0.5, 0.5 );

				// ========== 执行渲染 ==========
				
				/**
				 * renderer.render() 是Three.js的核心渲染函数
				 * 它执行以下操作：
				 * 1. 更新场景中所有对象的矩阵
				 * 2. 根据相机视锥体进行裁剪
				 * 3. 对可见物体排序（处理透明物体）
				 * 4. 将3D场景渲染到2D画布上
				 * 
				 * 参数：
				 * scene: 要渲染的3D场景
				 * camera: 用于观察场景的相机
				 */
				renderer.render( scene, camera );
			}

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