<!-- Three.js 熔岩着色器效果代码功能详解
一、总体功能概述
这是一个基于Three.js的WebGL着色器演示，实现了一个动态熔岩效果。主要功能包括：

熔岩流动模拟：通过着色器程序模拟熔岩的动态流动、发光和颜色混合效果

3D交互展示：在圆环体（甜甜圈形状）上展示熔岩材质

视觉增强：包含雾效、泛光效果等后处理，提升视觉效果

响应式设计：自适应窗口大小变化

二、核心技术点详解
1. 着色器系统（GLSL Shaders）
顶点着色器（Vertex Shader）
glsl
// 主要功能：
// - 顶点位置变换（模型→视图→裁剪空间）
// - 纹理坐标计算和传递
// - 支持UV缩放控制纹理重复
片元着色器（Fragment Shader）
glsl
// 核心熔岩效果实现：
// - 纹理扰动：使用噪声纹理和时间变量创建流动效果
// - 颜色混合：多层纹理混合和颜色通道溢出算法
// - 雾效计算：基于深度的指数雾
2. 纹理处理技术
双纹理系统
texture1（云纹理）：作为噪声源，用于创建随机流动扰动

texture2（熔岩纹理）：基础颜色纹理，提供熔岩图案

纹理坐标扰动：通过时间变量和噪声值动态改变UV坐标

纹理坐标计算公式
glsl
T1 = vUv + vec2(1.5, -1.5) * time * 0.02 + noise.xy * 2.0
T2 = vUv + vec2(-0.5, 2.0) * time * 0.01 + noise.yz * 0.2
3. 熔岩效果算法
颜色混合核心算法
glsl
// 关键计算公式：
vec4 temp = color * (vec4(p, p, p, p) * 2.0) + (color * color - 0.1);
颜色通道溢出处理
glsl
// 当颜色值超过1.0时，将溢出部分混合到其他通道
if(temp.r > 1.0) { temp.bg += clamp(temp.r - 2.0, 0.0, 100.0); }
if(temp.g > 1.0) { temp.rb += temp.g - 1.0; }
if(temp.b > 1.0) { temp.rg += temp.b - 1.0; }
效果：创建熔岩特有的颜色混合和发光外观

4. 雾效实现
指数雾算法
glsl
float fogFactor = exp2(-fogDensity² * depth² * LOG2);
gl_FragColor = mix(原始颜色, 雾颜色, fogFactor);
作用：增强场景深度感，使远处物体融入背景

5. 后处理效果
效果合成器流程
text
1. RenderPass: 场景渲染到离屏纹理
2. BloomPass: 泛光效果（明亮区域发光）
3. OutputPass: 最终输出到屏幕
泛光效果作用
增强熔岩的发光感

模拟光晕扩散

提升整体视觉效果

6. Three.js核心组件应用
几何体：圆环体（Torus）
半径：0.65

管半径：0.3

分段数：30×30（平衡性能与视觉效果）

着色器材质配置
javascript
new THREE.ShaderMaterial({
  uniforms: {},      // 传递变量
  vertexShader: "",  // 顶点着色器
  fragmentShader: "" // 片元着色器
})
7. 动画系统
时间管理
THREE.Clock()：精确时间跟踪

getDelta()：获取帧间时间差

时间驱动：所有动画基于时间变量，确保不同帧率下效果一致

动态更新
着色器时间变量：uniforms['time'].value += 0.2 * delta

网格旋转：mesh.rotation.y += 0.0125 * delta

渲染循环：renderer.setAnimationLoop(animate)

8. 性能优化技术
自适应渲染
设备像素比适配：renderer.setPixelRatio(window.devicePixelRatio)

响应式布局：窗口大小变化时自动调整渲染尺寸

高效动画循环：使用requestAnimationFrame

纹理优化
重复纹理：THREE.RepeatWrapping减少纹理内存

sRGB颜色空间：正确显示颜色

三、技术亮点总结
1. 实时动态效果
熔岩流动完全由GPU实时计算

无需预渲染或视频播放

纯代码生成，文件体积小

2. 视觉真实感
颜色通道溢出模拟真实光晕

多层纹理混合增强细节

物理合理的雾效计算

3. 跨平台性能
WebGL 1.0兼容性

自适应设备性能

响应式设计支持移动端

4. 代码结构清晰
着色器与JavaScript分离

模块化导入

清晰的渲染管线

四、应用场景
游戏开发：角色技能特效、环境特效

数据可视化：热力图、活动图表示

创意艺术：数字艺术展示

教育演示：WebGL和着色器教学

五、技术栈总结
技术组件	作用	关键特性
Three.js	3D渲染框架	WebGL封装、场景管理
GLSL	着色器语言	GPU并行计算
后处理	图像效果增强	泛光、合成
纹理系统	图像处理	噪声、颜色纹理
动画系统	时间管理	帧率无关动画 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题和元信息 -->
		<title>Three.js WebGL 着色器材质演示 - 熔岩效果</title>
		<meta charset="utf-8">
		<!-- 设置视口，禁止缩放，确保移动端适配 -->
		<!-- width=device-width: 使页面宽度等于设备宽度 -->
		<!-- user-scalable=no: 禁止用户缩放 -->
		<!-- minimum-scale=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渲染器输出的容器 -->
		<!-- WebGL渲染内容将显示在此div中 -->
		<div id="container"></div>
		<!-- 页面底部信息，显示技术来源 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 着色器材质演示。
			熔岩着色器由 <a href="http://irrlicht.sourceforge.net/phpBB2/viewtopic.php?t=21057" target="_blank" rel="noopener">TheGameMaker</a> 创作
		</div>

		<!-- 片元着色器（Fragment Shader）定义 -->
		<!-- 片元着色器负责计算每个像素的颜色 -->
		<!-- id属性用于JavaScript中获取此脚本内容 -->
		<!-- type="x-shader/x-fragment" 指定这是GLSL片元着色器代码 -->
		<script id="fragmentShader" type="x-shader/x-fragment">
			// ==================== UNIFORM变量声明 ====================
			// uniform变量是从JavaScript传递到着色器的全局变量，在单个绘制调用中保持不变
			
			uniform float time;          // 时间变量，用于创建动画效果。值随时间递增，使纹理移动
			
			uniform float fogDensity;    // 雾的密度参数。值越大，雾越浓，物体在远处越模糊
			
			uniform vec3 fogColor;       // 雾的颜色。使用三维向量表示RGB颜色值
			
			// sampler2D类型是GLSL中的纹理采样器，用于从2D纹理图像中读取像素颜色
			uniform sampler2D texture1;  // 第一个纹理：通常用作噪声或云纹理，创建熔岩的流动扰动效果
			uniform sampler2D texture2;  // 第二个纹理：熔岩颜色纹理，提供基础颜色和图案
			
			// ==================== VARYING变量声明 ====================
			// varying变量从顶点着色器传递到片元着色器，每个片元的值根据顶点值插值计算
			
			varying vec2 vUv;            // 纹理坐标，表示当前片元在纹理上的位置（范围0.0-1.0）
			// 从顶点着色器的uv属性传递而来，经过模型变换和插值

			// ==================== 主函数 ====================
			// gl_FragColor是GLSL内置变量，表示最终输出的片元颜色
			void main( void ) {
				// ==================== 坐标变换 ====================
				// 将UV坐标从[0,1]范围映射到[-1,1]范围
				// 这种转换有时用于某些类型的纹理坐标计算
				// 注意：此代码中position变量实际上未使用，可能是残留代码
				vec2 position = -1.0 + 2.0 * vUv;

				// ==================== 噪声纹理采样 ====================
				// 从第一个纹理（噪声/云纹理）获取当前UV坐标处的颜色值
				// texture2D()函数：第一个参数是纹理采样器，第二个参数是纹理坐标
				// 返回值是vec4类型(R,G,B,A)，包含RGBA四个颜色通道
				vec4 noise = texture2D( texture1, vUv );
				
				// ==================== 纹理坐标偏移计算 ====================
				// 创建两个随时间变化的纹理坐标偏移，用于模拟熔岩流动
				// T1: 以(1.5, -1.5)方向和速度移动，乘以0.02控制速度
				vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time * 0.02;
				// T2: 以(-0.5, 2.0)方向和速度移动，乘以0.01控制速度（比T1慢）
				vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01;

				// ==================== 噪声扰动 ====================
				// 使用噪声纹理的RGB通道进一步扰动纹理坐标，增加自然随机性
				// 这种技术称为"纹理坐标扰动"或"纹理扭曲"
				T1.x += noise.x * 2.0;  // 使用噪声的红色通道影响T1的x坐标
				T1.y += noise.y * 2.0;  // 使用噪声的绿色通道影响T1的y坐标
				T2.x -= noise.y * 0.2;  // 使用噪声的绿色通道影响T2的x坐标（反向）
				T2.y += noise.z * 0.2;  // 使用噪声的蓝色通道影响T2的y坐标

				// ==================== 扰动纹理采样 ====================
				// 从第一个纹理（噪声纹理）的扰动位置T1*2.0处采样alpha通道值
				// 乘以2.0使纹理坐标超出[0,1]范围，利用纹理的重复模式
				float p = texture2D( texture1, T1 * 2.0 ).a;
				// p值将用于混合颜色，控制熔岩的亮度和发光效果

				// ==================== 熔岩纹理采样 ====================
				// 从第二个纹理（熔岩纹理）的扰动位置T2*2.0处采样颜色
				vec4 color = texture2D( texture2, T2 * 2.0 );
				
				// ==================== 颜色计算 ====================
				// 核心熔岩效果计算：
				// 1. color * (vec4(p, p, p, p) * 2.0): 将熔岩颜色乘以alpha值的2倍
				//    - 这会使p值大的区域更亮
				// 2. (color * color - 0.1): 颜色自乘再减0.1，增强对比度和饱和度
				// 3. 两部分相加：创建高光和发光效果
				vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );

				// ==================== 颜色通道溢出处理 ====================
				// 这是熔岩效果的独特之处：模拟颜色通道溢出到其他通道
				// 当某个颜色通道值超过1.0时，将溢出的部分添加到其他通道
				
				// 如果红色通道超过1.0，将溢出部分添加到蓝色和绿色通道
				// clamp()函数确保增加值不会过大
				if( temp.r > 1.0 ) { 
					// .bg是GLSL的混合选择器，表示蓝色和绿色通道
					// temp.r - 2.0：计算超过1.0的量（假设temp.r可能超过2.0）
					temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); 
				}
				
				// 如果绿色通道超过1.0，将溢出部分添加到红色和蓝色通道
				if( temp.g > 1.0 ) { 
					// .rb是GLSL的混合选择器，表示红色和蓝色通道
					temp.rb += temp.g - 1.0; 
				}
				
				// 如果蓝色通道超过1.0，将溢出部分添加到红色和绿色通道
				if( temp.b > 1.0 ) { 
					// .rg是GLSL的混合选择器，表示红色和绿色通道
					temp.rg += temp.b - 1.0; 
				}
				
				// 这种溢出处理创建了熔岩特有的颜色混合和发光效果

				// ==================== 设置初始片段颜色 ====================
				// gl_FragColor是GLSL内置变量，表示最终输出的片元颜色
				gl_FragColor = temp;

				// ==================== 雾效计算 ====================
				// 计算基于距离的指数雾效，使远处物体逐渐融入背景
				
				// 1. 计算当前片段的深度（从相机到片段的距离）
				// gl_FragCoord.z: 当前片段在裁剪空间中的z坐标（深度值）
				// gl_FragCoord.w: 当前片段的齐次坐标w分量
				// 深度 = 裁剪空间z坐标 / 齐次坐标w分量 = 归一化的深度值
				float depth = gl_FragCoord.z / gl_FragCoord.w;
				
				// 2. 以2为底的对数常数，用于指数雾计算
				// exp2(x) = 2^x，这里使用LOG2优化计算
				const float LOG2 = 1.442695;  // 1/log(2)
				
				// 3. 计算雾因子（fogFactor）
				// 指数雾公式: fog = 1.0 - exp(-density * depth)
				// 这里使用exp2替代exp：exp2(-fogDensity² * depth² * LOG2)
				// fogDensity²: 密度平方使雾效更明显
				// depth²: 深度平方使远处雾效更强
				float fogFactor = exp2( -fogDensity * fogDensity * depth * depth * LOG2 );
				
				// 4. 反转雾因子：从0（无雾）到1（完全被雾覆盖）
				// clamp()确保值在[0.0, 1.0]范围内
				fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );

				// ==================== 颜色与雾混合 ====================
				// 使用mix()函数线性插值原始颜色和雾颜色
				// 参数1: 原始颜色 (gl_FragColor)
				// 参数2: 雾颜色 (vec4(fogColor, gl_FragColor.w))
				// 参数3: 混合因子 (fogFactor，0.0=完全原始颜色，1.0=完全雾颜色)
				// gl_FragColor.w: 保留原始颜色的alpha通道
				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
				
				// 最终gl_FragColor将被输出到屏幕帧缓冲区
			}
		</script>

		<!-- 顶点着色器（Vertex Shader）定义 -->
		<!-- 顶点着色器负责处理每个顶点的位置和属性 -->
		<!-- id属性用于JavaScript中获取此脚本内容 -->
		<!-- type="x-shader/x-vertex" 指定这是GLSL顶点着色器代码 -->
		<script id="vertexShader" type="x-shader/x-vertex">
			// ==================== UNIFORM变量声明 ====================
			// uniform变量是从JavaScript传递到着色器的全局变量
			
			uniform vec2 uvScale;  // UV缩放因子，用于控制纹理重复次数
			// 例如：uvScale = (3.0, 1.0) 表示纹理在U方向重复3次，V方向重复1次
			
			// ==================== VARYING变量声明 ====================
			// varying变量从顶点着色器传递到片元着色器
			
			varying vec2 vUv;     // 纹理坐标，传递给片元着色器使用
			
			// ==================== 主函数 ====================
			// gl_Position是GLSL内置变量，表示顶点的最终裁剪空间位置
			void main() {
				// ==================== UV坐标计算 ====================
				// 将缩放后的UV坐标传递给片元着色器
				// uv是Three.js自动传递的顶点纹理坐标属性
				// uvScale * uv: 应用缩放，控制纹理重复
				vUv = uvScale * uv;
				
				// ==================== 顶点位置变换 ====================
				// 1. 从模型空间转换到视图空间
				// modelViewMatrix: 模型视图矩阵，结合了模型变换和相机视图变换
				// position: 顶点的原始模型空间位置（Three.js自动传递）
				// vec4(position, 1.0): 将三维位置转换为齐次坐标（w=1.0）
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				
				// 2. 从视图空间转换到裁剪空间（最终屏幕位置）
				// projectionMatrix: 投影矩阵，将3D坐标映射到2D屏幕
				// gl_Position: 输出的裁剪空间坐标，用于后续的视口变换和光栅化
				gl_Position = projectionMatrix * mvPosition;
				
				// 注意：这个顶点着色器相对简单，只进行了基本的坐标变换
				// 没有计算法线、光照等高级效果
			}
		</script>

		<!-- 导入映射（Import Map） -->
		<!-- 现代JavaScript模块导入配置，告诉浏览器如何解析import语句 -->
		<!-- 允许使用简短的模块名称而不是完整的URL路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript代码 -->
		<!-- type="module" 表示这是ES6模块，支持import/export语法 -->
		<script type="module">
			// ==================== 模块导入 ====================
			// 导入Three.js核心库的所有功能
			// THREE对象包含Three.js的所有核心类和函数
			import * as THREE from 'three';

			// 导入后处理效果相关模块（Three.js的附加组件）
			// 后处理允许在渲染完成后对图像应用额外的效果
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';  // 效果合成器，管理后处理流程
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';          // 渲染通道，将场景渲染到纹理
			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';            // 泛光效果，模拟明亮区域发光
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';          // 输出通道，将结果输出到屏幕

			// ==================== 全局变量声明 ====================
			let camera;      // 相机对象，定义观察3D场景的视角
			let renderer;    // 渲染器对象，负责将3D场景绘制到2D画布
			let composer;    // 效果合成器，管理后处理流程
			let clock;       // 时钟对象，用于跟踪时间和控制动画

			let uniforms;    // 着色器uniforms对象，存储传递给着色器的变量
			let mesh;        // 网格对象，包含几何体和材质，是3D场景中的可见对象

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

			// ==================== 初始化函数 ====================
			// 设置Three.js场景、相机、渲染器、材质、网格等所有组件
			function init() {
				// 获取HTML容器元素，Three.js将在此元素内创建canvas
				const container = document.getElementById( 'container' );

				// ==================== 相机设置 ====================
				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 1. 35: 视野角度（FOV），单位度，控制可见范围大小
				// 2. window.innerWidth / window.innerHeight: 宽高比，根据窗口大小计算
				// 3. 1: 近裁剪面，距离相机多近的物体开始渲染
				// 4. 3000: 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
				
				// 设置相机位置：沿z轴向后移动4个单位
				// Three.js使用右手坐标系：x向右，y向上，z向外（指向屏幕外）
				camera.position.z = 4;

				// ==================== 场景创建 ====================
				// 创建场景对象，所有3D对象（网格、灯光、相机）的容器
				const scene = new THREE.Scene();

				// ==================== 时钟初始化 ====================
				// 创建时钟对象，用于跟踪时间流逝，控制动画和着色器时间变量
				clock = new THREE.Clock();

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

				// 加载云纹理（作为噪声纹理使用）
				// 这是一个黑白纹理，用于创建熔岩的随机流动效果
				const cloudTexture = textureLoader.load( 'textures/lava/cloud.png' );
				
				// 加载熔岩颜色纹理
				// 这是熔岩的基础颜色和图案
				const lavaTexture = textureLoader.load( 'textures/lava/lavatile.jpg' );

				// ==================== 纹理配置 ====================
				// 设置熔岩纹理的颜色空间为sRGB
				// sRGB颜色空间更符合人类视觉感知，确保颜色显示正确
				lavaTexture.colorSpace = THREE.SRGBColorSpace;

				// 设置纹理的包裹模式为重复（RepeatWrapping）
				// 当纹理坐标超出[0,1]范围时，纹理会重复平铺
				cloudTexture.wrapS = cloudTexture.wrapT = THREE.RepeatWrapping;  // S和T方向都重复
				lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;    // S和T方向都重复
				// 注意：Three.js中纹理坐标使用(S,T)而不是(U,V)，但概念相同

				// ==================== 着色器Uniforms定义 ====================
				// uniforms是传递给着色器的全局变量，在渲染过程中保持不变
				uniforms = {
					// 雾密度：控制雾的浓度，值越大雾越浓
					'fogDensity': { value: 0.45 },
					
					// 雾颜色：黑色，使物体融入黑色背景
					'fogColor': { value: new THREE.Vector3( 0, 0, 0 ) },
					
					// 时间：用于动画效果，随时间递增
					'time': { value: 1.0 },
					
					// UV缩放：控制纹理重复
					// (3.0, 1.0)表示纹理在U方向重复3次，V方向重复1次
					'uvScale': { value: new THREE.Vector2( 3.0, 1.0 ) },
					
					// 纹理1：云/噪声纹理
					'texture1': { value: cloudTexture },
					
					// 纹理2：熔岩颜色纹理
					'texture2': { value: lavaTexture }
				};

				// ==================== 几何体大小定义 ====================
				// 圆环体（甜甜圈形状）的大小参数
				const size = 0.65;  // 圆环体的主要半径

				// ==================== 着色器材质创建 ====================
				// 创建自定义着色器材质，使用我们定义的顶点和片元着色器
				const material = new THREE.ShaderMaterial( {
					// uniforms对象：传递给着色器的变量
					uniforms: uniforms,
					
					// 顶点着色器代码：从HTML script元素获取
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					
					// 片元着色器代码：从HTML script元素获取
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
					// 注意：ShaderMaterial还有许多其他可选参数，如side、transparent、blending等
				} );

				// ==================== 网格创建 ====================
				// 创建圆环体几何体并应用着色器材质
				// 参数说明（TorusGeometry）：
				// 1. size: 圆环半径（从中心到圆环管中心）
				// 2. 0.3: 圆环管的半径（管本身的粗细）
				// 3. 30: 径向分段数（圆环圆周方向的分段）
				// 4. 30: 管分段数（圆环管截面的分段）
				// 分段数越高，几何体越平滑，但性能开销越大
				mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), material );
				
				// 设置网格的初始旋转：绕x轴旋转0.3弧度（约17度）
				mesh.rotation.x = 0.3;
				
				// 将网格添加到场景中
				scene.add( mesh );

				// ==================== 渲染器创建与配置 ====================
				// 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				// window.devicePixelRatio: 物理像素与CSS像素的比率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// setAnimationLoop是requestAnimationFrame的Three.js封装
				// 浏览器会在每次重绘前调用animate函数
				renderer.setAnimationLoop( animate );
				
				// 禁用自动清除，这在后处理流程中是必要的
				// 后处理需要保留前一帧的内容用于某些效果
				renderer.autoClear = false;
				
				// 将渲染器的canvas元素添加到HTML容器中
				container.appendChild( renderer.domElement );

				// ==================== 后处理效果设置 ====================
				// 后处理是在场景渲染完成后对图像应用额外效果的技术
				
				// 1. 渲染通道：将场景渲染到纹理（离屏渲染）
				// 参数：场景和相机
				const renderModel = new RenderPass( scene, camera );
				
				// 2. 泛光效果：模拟明亮区域的光晕效果
				// 参数：1.25 - 泛光强度，值越大发光效果越强
				const effectBloom = new BloomPass( 1.25 );
				
				// 3. 输出通道：将处理后的图像输出到屏幕
				const outputPass = new OutputPass();

				// ==================== 效果合成器创建 ====================
				// 效果合成器管理后处理流程，按顺序应用各种效果
				composer = new EffectComposer( renderer );

				// 按顺序添加效果通道
				composer.addPass( renderModel );   // 第一步：渲染场景到纹理
				composer.addPass( effectBloom );   // 第二步：应用泛光效果
				composer.addPass( outputPass );    // 第三步：输出到屏幕
				// 注意：通道的执行顺序很重要，影响最终效果

				// ==================== 事件监听器 ====================
				// 监听窗口大小变化事件，确保渲染器随窗口大小调整
				window.addEventListener( 'resize', onWindowResize );
				// 注意：还应考虑添加错误处理、卸载清理等事件监听
			}

			// ==================== 窗口大小变化处理函数 ====================
			// 当浏览器窗口大小改变时调用此函数
			function onWindowResize() {
				// 1. 更新相机宽高比
				// 确保渲染比例正确，防止图像拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机投影矩阵
				// 必须调用此方法使新的宽高比生效
				camera.updateProjectionMatrix();

				// 3. 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 4. 更新效果合成器尺寸
				// 后处理效果也需要重新调整尺寸
				composer.setSize( window.innerWidth, window.innerHeight );
				// 注意：这里没有更新渲染器的像素比，因为设备像素比通常不会随窗口大小改变
			}

			// ==================== 动画循环函数 ====================
			// 每帧调用此函数，更新动画状态并重新渲染场景
			function animate() {
				// 1. 获取时间增量
				// clock.getDelta(): 获取自上次调用getDelta()以来经过的时间（秒）
				// 乘以5加速动画，使熔岩流动更快
				const delta = 5 * clock.getDelta();
				// 注意：getDelta()自动处理时间计算，比使用Date.now()更精确

				// 2. 更新着色器时间uniform
				// time值随时间递增，用于着色器中的动画效果
				// 乘以0.2控制动画速度
				uniforms[ 'time' ].value += 0.2 * delta;

				// 3. 更新网格旋转
				// 使圆环体持续旋转，增加视觉动感
				mesh.rotation.y += 0.0125 * delta;  // 绕y轴旋转
				mesh.rotation.x += 0.05 * delta;    // 绕x轴旋转
				// 注意：旋转速度通过delta相乘，确保在不同帧率下动画速度一致

				// 4. 渲染场景
				// 清除渲染器（由于autoClear=false，需要手动清除）
				renderer.clear();
				
				// 使用效果合成器渲染场景
				// 参数：0.01 - 可能是遗留参数或时间增量，实际可能不影响渲染
				composer.render( 0.01 );
				// 注意：EffectComposer的render方法通常不需要参数
				// 这个0.01可能是早期版本的遗留代码
				
				// 如果不需要后处理，可以直接使用：renderer.render(scene, camera)
			}
		</script>
	</body>
</html>