<!-- Three.js 精灵粒子系统演示 - 代码功能与技术点分析
🎯 核心功能概述
1. 双场景混合渲染系统
3D粒子场景：创建了一个由200个动态精灵粒子组成的旋转球体

2D HUD覆盖层：在屏幕四角和中心显示固定的2D精灵图标

混合渲染：实现在3D场景上叠加2D界面的效果

2. 动态粒子动画系统
粒子分布：200个精灵均匀分布在半径为500的球面上

智能材质分配：

上半球粒子：使用sprite2.png，具有随机HSL颜色

下半球粒子：使用sprite1.png，保持原始颜色

多重动画效果：

个体动画：每个粒子独立旋转、脉动缩放、透明度变化

整体动画：整个粒子球体沿三个轴向缓慢旋转

雾效影响：距离越远粒子越模糊，增强深度感

3. 响应式用户界面
自动适配：窗口大小变化时自动调整相机和界面元素

双相机系统：

透视相机（3D场景）自动更新宽高比

正交相机（2D界面）重新计算边界

HUD精灵重新定位到屏幕四角

🔧 主要技术点详解
1. 双相机渲染技术
javascript
// 透视相机 - 用于3D场景
const camera = new THREE.PerspectiveCamera(60, width/height, 1, 2100);

// 正交相机 - 用于2D HUD
const cameraOrtho = new THREE.OrthographicCamera(
    -width/2, width/2, 
    height/2, -height/2, 
    1, 10
);
技术要点：

透视相机：模拟人眼视角，产生近大远小的3D效果

正交相机：无透视变形，保持2D元素尺寸恒定

渲染顺序控制：先渲染3D场景，清除深度缓冲，再渲染2D界面

2. 精灵(Sprite)技术
javascript
// 创建精灵
const sprite = new THREE.Sprite(material);
sprite.center.set(0.5, 0.5); // 设置锚点为中心
技术要点：

始终面向相机：精灵始终正对相机，无论相机如何移动

2D平面：虽然是3D对象，但本质是2D平面

锚点控制：通过center属性控制纹理对齐方式

3. 材质与纹理处理
javascript
// 动态材质修改
material.color.setHSL(0.5 * Math.random(), 0.75, 0.5);
material.map.offset.set(-0.5, -0.5);
material.map.repeat.set(2, 2);
技术要点：

HSL颜色空间：使用色相、饱和度、亮度控制颜色

纹理变换：通过offset和repeat实现纹理缩放和平移

颜色空间管理：正确设置sRGB确保颜色显示一致

4. 动画系统设计
javascript
// 脉动缩放效果
const scale = Math.sin(time + sprite.position.x * 0.01) * 0.3 + 1.0;

// 旋转动画
sprite.material.rotation += 0.1 * (i / l);

// 透明度动画
material.opacity = Math.sin(time + sprite.position.x * 0.01) * 0.4 + 0.6;
技术要点：

正弦波动画：使用Math.sin()产生平滑周期性动画

基于时间的动画：所有动画都与time变量关联

差异化效果：每个粒子根据位置有不同动画速度

5. 性能优化技术
javascript
// 1. 使用Group进行批量操作
const group = new THREE.Group();

// 2. 禁用自动清除，手动控制渲染流程
renderer.autoClear = false;

// 3. 纹理异步加载
textureLoader.load('textures/sprite0.png', createHUDSprites);
优化策略：

对象分组：将200个粒子放入Group，方便统一管理

渲染流程优化：避免不必要的缓冲清除

资源异步加载：不阻塞主线程

6. 响应式布局实现
javascript
// 窗口大小变化处理
function onWindowResize() {
    // 更新相机参数
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    
    // 更新正交相机边界
    cameraOrtho.left = -width / 2;
    cameraOrtho.right = width / 2;
    
    // 更新HUD精灵位置
    updateHUDSprites();
}
响应式设计：

动态相机调整：两种相机都响应窗口变化

HUD重新定位：四角精灵始终保持正确位置

渲染器尺寸更新：确保画布与窗口匹配

7. 模块化代码结构
javascript
// ES6模块导入
import * as THREE from 'three';

// 功能分离
init();      // 初始化
animate();   // 动画循环
createHUDSprites(); // HUD创建
updateHUDSprites(); // HUD更新
代码组织：

模块化设计：使用ES6模块，代码结构清晰

函数职责单一：每个函数完成特定功能

事件驱动：通过事件监听实现交互

🚀 关键技术亮点
1. 渲染流程控制
javascript
renderer.clear();              // 清除颜色缓冲区
renderer.render(scene, camera); // 渲染3D场景
renderer.clearDepth();         // 清除深度缓冲区（关键！）
renderer.render(sceneOrtho, cameraOrtho); // 渲染2D HUD
这是实现2D覆盖3D的关键：清除深度缓冲区让后续渲染的内容总是在前面。

2. 粒子分布算法
javascript
// 球面均匀分布
sprite.position.set(x, y, z);
sprite.position.normalize();        // 归一化到单位球面
sprite.position.multiplyScalar(radius); // 扩展到指定半径
3. 动画差异化处理
javascript
// 每个粒子有不同旋转速度
sprite.material.rotation += 0.1 * (i / l);
// i/l 产生0-1之间的渐变，实现差异化动画
📊 视觉效果层级
底层：黑色背景 + 雾效

中层：200个动态粒子组成的旋转球体

上层：5个固定在屏幕边缘的HUD精灵

动画层：

粒子脉动缩放（正弦波）

粒子旋转（差异化速度）

粒子透明度变化（下半球粒子）

整体三维旋转

🔍 技术应用场景
游戏开发：粒子特效、UI界面

数据可视化：动态数据点展示

产品演示：3D产品展示 + 2D信息标注

艺术创作：抽象视觉效果生成

教育演示：物理现象模拟 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 -->
		<title>Three.js WebGL - 精灵粒子系统演示</title>
		<!-- 字符编码设置 -->
		<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样式表，用于页面样式控制 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 
			信息显示面板：
			显示在页面左上角，包含Three.js的链接
			noopener是安全属性，防止新页面访问window.opener
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js中文示例 - 精灵粒子系统</a>
		</div>

		<!-- 
			导入映射表(Import Map)：
			现代浏览器支持的模块导入映射机制
			允许我们为模块指定别名或路径
			这里是ES6模块系统的一部分
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript代码模块：
			type="module"表示这是一个ES6模块
			模块中的代码有自己的作用域，不会污染全局
		-->
		<script type="module">
			// 导入Three.js库的所有功能
			// * as THREE 表示将整个three模块导入并命名为THREE
			import * as THREE from 'three';

			// ==================== 全局变量声明 ====================
			// 这些变量将在整个模块中共享使用
			
			// 3D场景相关变量
			let camera;      // 透视相机：模拟人眼视角，有近大远小的效果
			let scene;       // 主3D场景：包含所有3D对象（粒子、灯光等）
			let renderer;    // WebGL渲染器：负责将3D场景渲染到2D屏幕上
			
			// HUD（平视显示器）相关变量
			let cameraOrtho; // 正交相机：无透视效果，用于2D界面渲染
			let sceneOrtho;  // HUD场景：专门用于显示2D界面元素
			
			// HUD精灵引用：分别对应屏幕的四个角落和中心位置
			// TL: Top Left（左上角），TR: Top Right（右上角）
			// BL: Bottom Left（左下角），BR: Bottom Right（右下角）
			// C: Center（中心）
			let spriteTL, spriteTR, spriteBL, spriteBR, spriteC;
			
			let mapC;   // 纹理贴图C的引用，保存这个引用以便后续比较使用
			let group;  // 精灵组：包含所有动态粒子的容器，方便整体控制

			// ==================== 初始化函数调用 ====================
			// 页面加载完成后立即执行初始化
			init();

			// ==================== 初始化函数定义 ====================
			/**
			 * 初始化函数：整个应用的入口点
			 * 负责创建所有必要的Three.js对象和设置场景
			 */
			function init() {
				// 获取当前浏览器窗口的尺寸
				const width = window.innerWidth;   // 窗口宽度（像素）
				const height = window.innerHeight; // 窗口高度（像素）

				// -------------------- 创建相机 --------------------
				// 1. 创建透视相机（用于3D场景）
				// 参数说明：
				// 60: 视野角度（Field of View），单位是度，60度是常见的自然视角
				// width/height: 宽高比，确保渲染比例正确
				// 1: 近裁剪面，距离相机1个单位以内的物体不显示
				// 2100: 远裁剪面，距离相机2100个单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(60, width / height, 1, 2100);
				// 将相机沿着Z轴向后移动1500个单位，这样我们可以看到整个场景
				camera.position.z = 1500;

				// 2. 创建正交相机（用于2D HUD显示）
				// 参数说明（与透视相机不同，使用left, right, top, bottom定义视景体）：
				// -width/2, width/2: 左右边界，将屏幕宽度等分
				// height/2, -height/2: 上下边界，注意bottom是负数（坐标系原因）
				// 1, 10: 近裁剪面和远裁剪面
				cameraOrtho = new THREE.OrthographicCamera(
					-width / 2, width / 2, 
					height / 2, -height / 2, 
					1, 10
				);
				// 正交相机位置，沿着Z轴向前移动10个单位
				cameraOrtho.position.z = 10;

				// -------------------- 创建场景 --------------------
				// 1. 创建主3D场景
				scene = new THREE.Scene();
				// 为场景添加雾效，增强深度感
				// 参数说明：
				// 0x000000: 雾的颜色（黑色）
				// 1500: 雾的起始距离，距离相机1500单位开始有雾
				// 2100: 雾的结束距离，距离相机2100单位完全被雾遮挡
				scene.fog = new THREE.Fog(0x000000, 1500, 2100);

				// 2. 创建HUD场景（用于2D界面显示）
				sceneOrtho = new THREE.Scene();

				// -------------------- 创建精灵粒子 --------------------
				// 设置粒子系统参数
				const amount = 200;   // 粒子数量：200个精灵
				const radius = 500;   // 分布半径：粒子分布在半径为500的球面上

				// 创建纹理加载器，用于加载图片纹理
				const textureLoader = new THREE.TextureLoader();

				// 异步加载纹理图片
				// 加载sprite0.png（HUD精灵纹理），加载完成后调用createHUDSprites函数
				textureLoader.load('textures/sprite0.png', createHUDSprites);
				// 加载sprite1.png（粒子纹理B）
				const mapB = textureLoader.load('textures/sprite1.png');
				// 加载sprite2.png（粒子纹理C），保存引用供后续使用
				mapC = textureLoader.load('textures/sprite2.png');

				// 设置纹理的颜色空间为sRGB
				// sRGB是标准的颜色空间，确保在不同设备上颜色显示一致
				mapB.colorSpace = THREE.SRGBColorSpace;
				mapC.colorSpace = THREE.SRGBColorSpace;

				// 创建组（Group）对象
				// Group是Three.js中的容器对象，可以包含多个子对象
				// 方便对一组对象进行统一操作（如旋转、移动等）
				group = new THREE.Group();

				// 创建两种精灵材质（SpriteMaterial）
				// SpriteMaterial是专门用于精灵的材质类型
				const materialC = new THREE.SpriteMaterial({ 
					map: mapC,       // 使用纹理C
					color: 0xffffff, // 基础颜色（白色）
					fog: true        // 启用雾效影响
				});
				const materialB = new THREE.SpriteMaterial({ 
					map: mapB,       // 使用纹理B
					color: 0xffffff, // 基础颜色（白色）
					fog: true        // 启用雾效影响
				});

				// 循环创建200个精灵粒子
				for (let a = 0; a < amount; a++) {
					// 生成随机方向向量（每个分量在-0.5到0.5之间）
					const x = Math.random() - 0.5;
					const y = Math.random() - 0.5;
					const z = Math.random() - 0.5;

					let material; // 材质变量声明

					// 根据z值决定使用哪种材质
					// 这种条件分配让粒子在球体上下半部分有不同的外观
					if (z < 0) {
						// 在下半球的粒子使用材质B（克隆一份，避免材质共享）
						material = materialB.clone();
					} else {
						// 在上半球的粒子使用材质C，并进行特殊处理
						material = materialC.clone();
						// 随机设置HSL颜色：
						// 0.5 * Math.random(): 色相（0-0.5之间，偏蓝色系）
						// 0.75: 饱和度（较高饱和度，颜色鲜艳）
						// 0.5: 亮度（中等亮度）
						material.color.setHSL(0.5 * Math.random(), 0.75, 0.5);
						// 调整纹理偏移：将纹理中心点移动到(0.5, 0.5)
						// 原本纹理坐标范围是[0,1]，偏移-0.5后变成[-0.5,0.5]
						material.map.offset.set(-0.5, -0.5);
						// 调整纹理重复：将纹理放大2倍
						// 相当于纹理坐标范围变成[-1,1]
						material.map.repeat.set(2, 2);
					}

					// 创建精灵（Sprite）对象
					// Sprite是始终面向相机的2D平面，常用于粒子效果
					const sprite = new THREE.Sprite(material);

					// 设置精灵的位置
					sprite.position.set(x, y, z);  // 设置初始位置
					sprite.position.normalize();   // 归一化：使向量长度为1
					sprite.position.multiplyScalar(radius); // 乘以半径：扩展到球面

					// 将精灵添加到组中
					group.add(sprite);
				}

				// 将包含所有精灵的组添加到主场景
				scene.add(group);

				// -------------------- 创建渲染器 --------------------
				// 创建WebGL渲染器实例
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：提高在高分辨率屏幕上的显示质量
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环函数：每帧自动调用animate函数
				renderer.setAnimationLoop(animate);
				// 关闭自动清除：允许我们在同一帧中渲染多个场景
				// 这是实现2D HUD覆盖在3D场景上的关键设置
				renderer.autoClear = false;

				// 将渲染器的canvas元素添加到body中
				// domElement是渲染器创建的<canvas>元素
				document.body.appendChild(renderer.domElement);

				// -------------------- 事件监听 --------------------
				// 监听窗口大小变化事件，窗口变化时调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
			}

			// ==================== HUD精灵创建函数 ====================
			/**
			 * 创建HUD（平视显示器）精灵
			 * HUD精灵是固定在屏幕上的2D元素，不受3D相机影响
			 * @param {THREE.Texture} texture - 加载完成的纹理对象
			 */
			function createHUDSprites(texture) {
				// 设置纹理颜色空间为sRGB
				texture.colorSpace = THREE.SRGBColorSpace;

				// 创建HUD精灵的材质（不启用雾效，因为是2D元素）
				const material = new THREE.SpriteMaterial({ map: texture });

				// 获取纹理图像的原始尺寸（单位：像素）
				const width = material.map.image.width;
				const height = material.map.image.height;

				// ---------- 创建左上角精灵 ----------
				spriteTL = new THREE.Sprite(material);
				// 设置精灵的锚点：center属性控制纹理的哪个点对应精灵的位置
				// (0.0, 1.0)表示纹理的左上角
				spriteTL.center.set(0.0, 1.0);
				// 设置精灵尺寸为纹理原始尺寸
				spriteTL.scale.set(width, height, 1);
				// 添加到HUD场景
				sceneOrtho.add(spriteTL);

				// ---------- 创建右上角精灵 ----------
				spriteTR = new THREE.Sprite(material);
				// (1.0, 1.0)表示纹理的右上角
				spriteTR.center.set(1.0, 1.0);
				spriteTR.scale.set(width, height, 1);
				sceneOrtho.add(spriteTR);

				// ---------- 创建左下角精灵 ----------
				spriteBL = new THREE.Sprite(material);
				// (0.0, 0.0)表示纹理的左下角
				spriteBL.center.set(0.0, 0.0);
				spriteBL.scale.set(width, height, 1);
				sceneOrtho.add(spriteBL);

				// ---------- 创建右下角精灵 ----------
				spriteBR = new THREE.Sprite(material);
				// (1.0, 0.0)表示纹理的右下角
				spriteBR.center.set(1.0, 0.0);
				spriteBR.scale.set(width, height, 1);
				sceneOrtho.add(spriteBR);

				// ---------- 创建中心精灵 ----------
				spriteC = new THREE.Sprite(material);
				// (0.5, 0.5)表示纹理的中心点
				spriteC.center.set(0.5, 0.5);
				spriteC.scale.set(width, height, 1);
				sceneOrtho.add(spriteC);

				// 初始化HUD精灵位置
				updateHUDSprites();
			}

			// ==================== HUD精灵位置更新函数 ====================
			/**
			 * 更新HUD精灵的位置
			 * 根据当前窗口尺寸重新计算并设置HUD精灵的位置
			 * 此函数在窗口大小变化时调用
			 */
			function updateHUDSprites() {
				// 计算屏幕半宽半高（用于定位四角精灵）
				const width = window.innerWidth / 2;
				const height = window.innerHeight / 2;

				// 设置各个HUD精灵的位置
				// 使用正交相机坐标系：原点(0,0)在屏幕中心
				// 向右为X轴正方向，向上为Y轴正方向
				
				// 左上角精灵：X负半轴，Y正半轴，Z=1（确保在最前面）
				spriteTL.position.set(-width, height, 1);
				
				// 右上角精灵：X正半轴，Y正半轴，Z=1
				spriteTR.position.set(width, height, 1);
				
				// 左下角精灵：X负半轴，Y负半轴，Z=1
				spriteBL.position.set(-width, -height, 1);
				
				// 右下角精灵：X正半轴，Y负半轴，Z=1
				spriteBR.position.set(width, -height, 1);
				
				// 中心精灵：屏幕中心，Z=1
				spriteC.position.set(0, 0, 1);
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * 窗口大小变化事件处理函数
			 * 当用户调整浏览器窗口大小时自动调用
			 */
			function onWindowResize() {
				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// ---------- 更新透视相机 ----------
				// 更新相机的宽高比
				camera.aspect = width / height;
				// 必须调用此函数使新的宽高比生效
				camera.updateProjectionMatrix();

				// ---------- 更新正交相机 ----------
				// 重新设置正交相机的边界（视景体）
				cameraOrtho.left = -width / 2;
				cameraOrtho.right = width / 2;
				cameraOrtho.top = height / 2;
				cameraOrtho.bottom = -height / 2;
				// 更新正交相机的投影矩阵
				cameraOrtho.updateProjectionMatrix();

				// ---------- 更新HUD精灵位置 ----------
				updateHUDSprites();

				// ---------- 更新渲染器尺寸 ----------
				// 重新设置渲染器的尺寸，确保渲染区域与窗口大小匹配
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ==================== 动画循环函数 ====================
			/**
			 * 动画循环函数
			 * 每帧自动调用（通常每秒60次）
			 * 负责更新场景状态和重新渲染
			 */
			function animate() {
				// 获取当前时间（单位：秒）
				// Date.now()返回毫秒数，除以1000得到秒
				const time = Date.now() / 1000;

				// ---------- 更新每个精灵的动画 ----------
				// 遍历组中的所有精灵粒子
				for (let i = 0, l = group.children.length; i < l; i++) {
					// 获取当前精灵
					const sprite = group.children[i];
					// 获取精灵的材质
					const material = sprite.material;
					
					// 计算脉动缩放效果：
					// Math.sin(time + sprite.position.x * 0.01)产生正弦波
					// *0.3将振幅限制在0.3范围内
					// +1.0将值偏移到0.7-1.3之间
					const scale = Math.sin(time + sprite.position.x * 0.01) * 0.3 + 1.0;

					// 获取纹理图像的原始尺寸（如果存在）
					// 这里进行多层安全检查，避免访问未定义的属性
					let imageWidth = 1;   // 默认宽度
					let imageHeight = 1;  // 默认高度
					if (material.map && 
						material.map.image && 
						material.map.image.width) {
						imageWidth = material.map.image.width;
						imageHeight = material.map.image.height;
					}

					// 更新精灵材质旋转
					// 每个精灵旋转速度不同：i/l的范围是0到1
					// 0.1 * (i/l)让不同精灵有不同旋转速度
					sprite.material.rotation += 0.1 * (i / l);
					
					// 应用缩放效果
					// 缩放基于原始纹理尺寸，确保图像比例正确
					sprite.scale.set(scale * imageWidth, scale * imageHeight, 1.0);

					// 对于使用纹理B的精灵（即不在上半球的精灵）
					// 应用透明度动画效果
					if (material.map !== mapC) {
						// 计算透明度：正弦波产生0.2-1.0之间的变化
						material.opacity = Math.sin(time + sprite.position.x * 0.01) * 0.4 + 0.6;
					}
				}

				// ---------- 更新组的整体旋转 ----------
				// 让整个粒子球体缓慢旋转
				// 绕X轴旋转：每2π秒（约6.28秒）旋转一周
				group.rotation.x = time * 0.5;
				// 绕Y轴旋转：每(2π/0.75)秒（约8.38秒）旋转一周
				group.rotation.y = time * 0.75;
				// 绕Z轴旋转：每2π秒旋转一周
				group.rotation.z = time * 1.0;

				// ---------- 渲染流程 ----------
				// 渲染过程分为三步，实现2D HUD覆盖在3D场景上的效果：
				
				// 1. 清除颜色缓冲区
				// 清除上一帧的颜色信息，准备绘制新帧
				renderer.clear();
				
				// 2. 渲染3D主场景
				// 使用透视相机渲染包含粒子球体的3D场景
				renderer.render(scene, camera);
				
				// 3. 清除深度缓冲区
				// 这是关键步骤：清除深度信息，让后续渲染的2D内容总是在最前面
				renderer.clearDepth();
				
				// 4. 渲染2D HUD场景
				// 使用正交相机渲染HUD精灵（屏幕四角和中心的图标）
				renderer.render(sceneOrtho, cameraOrtho);
			}
		</script>
	</body>
</html>