<!-- 代码功能描述和主要技术点
一、项目概述
这是一个基于 Three.js 的 WebGL 3D 可视化应用，主要展示了虚幻引擎风格（Unreal）的辉光（Bloom）后处理特效。应用加载了一个太空离子推进器的3D模型，并应用了高质量的光晕效果，用户可以通过交互界面实时调整各种效果参数。

二、核心功能
1. 3D场景展示
加载并显示一个名为"Primary Ion Drive"（主要离子推进器）的太空科技模型

模型带有内置的动画效果（如引擎部件的旋转或移动）

场景设置了适当的相机角度和光照，营造太空氛围

2. 后处理特效系统
Unreal Bloom（虚幻辉光）：核心特效，模拟高亮区域的光晕扩散效果

色调映射：使用ACESFilmic电影级色调映射，提升视觉质量

多通道渲染管线：实现高质量的后处理效果链

3. 用户交互系统
鼠标控制：拖拽旋转视角、滚轮缩放

实时参数调整：通过GUI面板调整辉光效果参数

响应式设计：自动适应不同屏幕尺寸

4. 性能监控
实时显示帧率（FPS）和渲染性能

帮助开发者优化应用性能

三、主要技术点详解
1. Three.js 核心架构
javascript
// 核心组件
- THREE.Scene: 3D场景容器
- THREE.PerspectiveCamera: 透视相机
- THREE.WebGLRenderer: WebGL渲染器
- THREE.Clock: 时间管理器
2. 后处理技术栈
EffectComposer（效果合成器）
javascript
// 后处理链的中央控制器
composer = new EffectComposer(renderer);
composer.addPass(renderScene);  // 渲染原始场景
composer.addPass(bloomPass);    // 应用Bloom效果
composer.addPass(outputPass);   // 输出到屏幕
RenderPass（渲染通道）
将3D场景渲染到离屏纹理（render target）

为后续处理提供输入

UnrealBloomPass（虚幻辉光通道）
javascript
// 主要参数
threshold: 0,   // 亮度阈值 - 控制哪些区域产生辉光
strength: 1,    // 强度 - 辉光的亮度
radius: 0.5     // 半径 - 辉光扩散范围
工作原理：

提取场景中亮度超过阈值的区域

对这些区域进行高斯模糊（模拟光晕扩散）

将模糊结果叠加回原始图像

控制光晕的颜色强度和范围

OutputPass（输出通道）
将最终处理结果正确输出到屏幕

处理颜色空间转换和最终显示

3. GLTF模型加载与动画
javascript
// 异步加载模型
const gltf = await loader.loadAsync('models/gltf/PrimaryIonDrive.glb');

// 动画系统
mixer = new THREE.AnimationMixer(model);
const clip = gltf.animations[0];
mixer.clipAction(clip.optimize()).play();
技术特点：

使用GLTF 2.0标准格式（3D界的JPEG）

异步加载避免阻塞主线程

THREE.AnimationMixer管理复杂的动画时间线

4. 光照系统
javascript
// 环境光 + 点光源组合
new THREE.AmbientLight(0xcccccc);  // 基础照明
new THREE.PointLight(0xffffff, 100); // 主光源
光照策略：

环境光：提供均匀的基础照明，防止纯黑阴影

点光源：随相机移动，确保视角内模型总是良好照亮

5. 相机控制系统
javascript
// OrbitControls轨道控制器
controls.maxPolarAngle = Math.PI * 0.5;  // 限制垂直旋转
controls.minDistance = 3;                // 防止相机穿模
controls.maxDistance = 8;                // 防止拉得太远
6. GUI参数控制系统
javascript
// lil-gui轻量级控制面板
const gui = new GUI();
gui.add(params, 'threshold', 0.0, 1.0)
   .onChange(value => bloomPass.threshold = Number(value));
参数调节逻辑：

阈值(threshold)：控制辉光产生的亮度门槛

强度(strength)：控制辉光的明暗程度

半径(radius)：控制辉光扩散的模糊范围

曝光(exposure)：控制整体画面亮度，使用指数映射(Math.pow(value, 4.0))

7. 性能优化技术
javascript
// 关键优化点
renderer.setPixelRatio(window.devicePixelRatio);  // 适应高DPI屏幕
clip.optimize();                                  // 动画优化
Stats.js性能监控;                                 // 实时性能反馈
四、技术架构图
text
┌─────────────────────────────────────────────────┐
│               用户交互层                         │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐        │
│  │ 鼠标控制 │  │ GUI面板 │  │ 窗口调整 │        │
│  └─────────┘  └─────────┘  └─────────┘        │
└───────────────────┬─────────────────────────────┘
                    │
┌───────────────────▼─────────────────────────────┐
│              Three.js核心层                      │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐        │
│  │   场景   │  │   相机   │  │  渲染器  │        │
│  └─────────┘  └─────────┘  └─────────┘        │
└───────────────────┬─────────────────────────────┘
                    │
┌───────────────────▼─────────────────────────────┐
│             后处理效果层                         │
│                                                 │
│  RenderPass → UnrealBloomPass → OutputPass     │
│    (渲染场景)     (辉光特效)     (输出到屏幕)     │
│                                                 │
└───────────────────┬─────────────────────────────┘
                    │
┌───────────────────▼─────────────────────────────┐
│               WebGL渲染层                        │
│            (最终像素输出到Canvas)                │
└─────────────────────────────────────────────────┘
五、关键算法和原理
1. Bloom算法流程
text
原始场景渲染 → 提取高亮区域 → 多次下采样 → 高斯模糊
    ↑                                            ↓
最终合成 ← 上采样叠加 ← 模糊结果处理 ← 模糊处理
2. 色调映射算法
ACES Filmic：电影行业标准色调映射曲线

将HDR（高动态范围）颜色转换为LDR（低动态范围）显示

保留更多亮部和暗部细节，避免过曝和欠曝

3. 动画插值计算
使用THREE.Clock.getDelta()获取帧间隔时间

确保动画在不同刷新率显示器上速度一致

基于时间的动画而非基于帧的动画

六、应用场景和价值
适合场景：
游戏开发：为Web游戏添加高质量视觉效果

产品展示：3D产品模型的炫酷展示

数据可视化：科技感强的数据呈现

艺术创作：数字艺术和交互艺术

教育培训：3D模型的教学演示

技术价值：
学习价值：完整的三维Web应用开发范例

参考价值：展示了Three.js高级特效的实现方式

性能参考：演示了WebGL性能优化的最佳实践

交互设计：展示了专业级的用户交互设计

七、扩展可能性
添加更多后处理效果：

景深效果（Depth of Field）

屏幕空间环境光遮蔽（SSAO）

色彩分级（Color Grading）

增强交互性：

点击模型部件显示详细信息

动画控制面板（暂停、调速、反转）

多视角预设

性能优化：

LOD（层次细节）系统

视锥体裁剪（Frustum Culling）

WebGL 2.0特性利用 -->


<!DOCTYPE html>
<!-- HTML文档类型声明，告诉浏览器使用HTML5标准解析 -->
<html lang="zh-CN">  <!-- 设置语言为中文，有助于SEO和辅助技术 -->
	<head>
		<!-- 头部开始：包含元数据和资源引用 -->
		
		<!-- 页面标题：显示在浏览器标签页上的标题 -->
		<title>Three.js WebGL - 后处理 - 虚幻引擎风格辉光特效</title>
		
		<!-- 字符编码声明：确保中文字符正确显示 -->
		<meta charset="utf-8">
		
		<!-- 视口设置：响应式设计的关键，控制移动端显示 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户缩放（某些3D应用需要固定比例）
			minimum-scale=1.0: 最小缩放比例为1倍
			maximum-scale=1.0: 最大缩放比例为1倍
		-->
		
		<!-- 外部CSS样式表链接 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 内联CSS样式：优先级高于外部样式表 -->
		<style>
		/* CSS注释：这些样式只针对id为info的元素内的所有直接子元素 */
		#info > * {
			max-width: 650px;    /* 最大宽度限制为650像素 */
			margin-left: auto;   /* 左外边距自动，与右外边距配合实现水平居中 */
			margin-right: auto;  /* 右外边距自动，与左外边距配合实现水平居中 */
			/* 
				margin-left: auto 和 margin-right: auto 的组合效果：
				当元素有固定宽度时（此处由max-width限制），浏览器会自动分配左右外边距，
				使元素在父容器中水平居中显示
			*/
		}
		</style>
	</head>
	<!-- 头部结束 -->
	
	<body>
		<!-- 页面主体开始 -->

		<!-- 
			Three.js渲染容器：所有3D内容都将在这个div中渲染
			id="container"：用于在JavaScript中引用此DOM元素
			注意：Three.js会将canvas元素插入到这个div中
		-->
		<div id="container"></div>

		<!-- 
			信息展示区域：显示项目信息、版权声明等
			id="info"：用于CSS样式和可能的JavaScript引用
		-->
		<div id="info">
			<!-- 
				使用中文替换原有内容：
				- 保持原有链接功能，但显示中文文本
				- rel="noopener"：安全考虑，防止新页面通过window.opener访问原页面
				- target="_blank"：在新标签页打开链接
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 
			虚幻引擎风格辉光特效，由 <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> 
			和 <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a> 开发
			<br/>  <!-- 换行标签 -->
			<!-- 模型信息和版权声明 -->
			模型来源：<a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">主要离子推进器</a>，
			作者：<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>，
			采用知识共享署名许可协议（CC Attribution）
		</div>

		<!-- 
			导入映射表（Import Map）：现代浏览器支持的功能
			作用：定义JavaScript模块的导入别名，简化import语句
			type="importmap"：指定此script标签包含导入映射
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：包含Three.js应用的所有逻辑
			type="module"：表示这是一个ES6模块，支持import/export语法
			模块作用域：模块内的变量默认不是全局的，不会污染全局命名空间
		-->
		<script type="module">

			// ===================================================
			// 模块导入部分
			// ===================================================
			
			// 导入Three.js核心库的所有导出，并命名为THREE
			// * 表示导入所有导出，as THREE 表示将它们放在THREE对象中
			import * as THREE from 'three';

			// 导入性能监控模块：显示帧率（FPS）等性能指标
			// 这是一个默认导出（default export），所以直接命名为Stats
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轻量级GUI库：用于创建参数控制面板
			// 这是一个命名导出（named export），所以用花括号
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入轨道控制器：允许用户用鼠标拖拽旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GLTF加载器：用于加载.glb/.gltf格式的3D模型
			// GLTF是Khronos Group的标准3D传输格式
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入后处理相关模块
			// EffectComposer：后处理效果合成器，管理多个后处理通道
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			// RenderPass：渲染通道，将3D场景渲染到纹理供后续处理
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			// UnrealBloomPass：虚幻引擎风格的辉光（Bloom）效果
			// Bloom：模拟高亮区域的光晕效果，增强视觉冲击力
			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
			// OutputPass：输出通道，将最终处理结果输出到屏幕
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

			// ===================================================
			// 全局变量声明
			// ===================================================
			
			// 相机对象：定义观察3D场景的视角
			let camera;
			
			// 性能监控器对象：显示帧率等性能信息
			let stats;
			
			// 后处理合成器：管理后处理效果链
			let composer;
			
			// WebGL渲染器：将3D场景渲染到canvas元素
			let renderer;
			
			// 动画混合器：管理和播放3D模型的动画
			let mixer;
			
			// 时钟对象：用于计算帧间隔时间，实现平滑动画
			let clock;

			// Bloom效果参数配置对象
			// 这些参数将通过GUI面板暴露给用户调整
			const params = {
				threshold: 0,   // 亮度阈值：0-1，像素亮度超过此值才会产生辉光
				strength: 1,    // 辉光强度：0-3，值越大辉光越亮
				radius: 0.5,    // 辉光半径：0-1，控制辉光扩散的范围
				exposure: 1     // 曝光度：0.1-2，控制整体画面亮度
			};

			// ===================================================
			// 主初始化函数调用
			// ===================================================
			init(); // 程序入口点

			// ===================================================
			// 异步初始化函数
			// async关键字：表示此函数内部可以使用await进行异步操作
			// ===================================================
			async function init() {
				// 异步初始化允许在加载资源（如3D模型）时不被阻塞

				// --------------------------------------------------
				// 1. DOM元素获取和基础设置
				// --------------------------------------------------
				
				// 获取页面中id为"container"的div元素
				// Three.js将把canvas元素插入到这里
				const container = document.getElementById( 'container' );

				// 创建Three.js时钟对象
				// 用于计算时间差，确保动画在不同刷新率的显示器上保持一致速度
				clock = new THREE.Clock();

				// --------------------------------------------------
				// 2. 创建3D场景
				// --------------------------------------------------
				
				// 创建场景对象：所有3D对象（模型、灯光、相机等）的容器
				const scene = new THREE.Scene();
				// 场景就像一个舞台，所有演员（3D对象）都在这个舞台上表演

				// --------------------------------------------------
				// 3. 创建和设置相机
				// --------------------------------------------------
				
				// 创建透视相机（Perspective Camera）：模拟人眼视角
				// 参数说明：
				// 参数1: 40 - 视野角度（Field of View, FOV），单位是度
				//        角度越大，看到的范围越广（类似广角镜头）
				// 参数2: window.innerWidth / window.innerHeight - 宽高比
				//        通常设置为窗口的宽高比，防止图像拉伸
				// 参数3: 1 - 近裁剪平面（Near Clipping Plane）
				//        距离相机多近的物体开始被渲染
				// 参数4: 100 - 远裁剪平面（Far Clipping Plane）
				//        距离相机多远的物体停止被渲染
				camera = new THREE.PerspectiveCamera( 
					40, 
					window.innerWidth / window.innerHeight,
					1,
					100
				);
				
				// 设置相机初始位置：x, y, z坐标
				// 右手坐标系：x向右，y向上，z向屏幕外（负值朝向屏幕内）
				camera.position.set( -5, 2.5, -3.5 );
				
				// 将相机添加到场景中（虽然相机本身不渲染，但它是场景的一部分）
				scene.add( camera );

				// --------------------------------------------------
				// 4. 添加光照
				// --------------------------------------------------
				
				// 添加环境光：均匀照亮所有物体，没有方向，只有颜色
				// 参数：光照颜色（十六进制RGB颜色）
				scene.add( new THREE.AmbientLight( 0xcccccc ) );
				// 0xcccccc: 浅灰色，提供基础照明，防止物体完全黑暗

				// 创建点光源：从一个点向所有方向发射光线，模拟灯泡
				// 参数1: 0xffffff - 白色光
				// 参数2: 100 - 光照强度
				const pointLight = new THREE.PointLight( 0xffffff, 100 );
				
				// 将点光源添加到相机上，使光源随相机移动
				// 这样可以确保相机视角下模型总是被照亮
				camera.add( pointLight );

				// --------------------------------------------------
				// 5. 加载3D模型
				// --------------------------------------------------
				
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				
				// 异步加载模型文件
				// await: 等待模型加载完成，再执行后续代码
				// loadAsync: 返回Promise的加载方法
				const gltf = await loader.loadAsync( 'models/gltf/PrimaryIonDrive.glb' );
				// PrimaryIonDrive.glb: 一个太空离子推进器的3D模型
				// GLB是GLTF的二进制格式，包含模型、材质、动画等所有数据

				// 从加载结果中获取场景对象
				// gltf.scene: 包含模型、材质、网格等的完整3D场景
				const model = gltf.scene;
				
				// 将模型添加到主场景中
				scene.add( model );

				// --------------------------------------------------
				// 6. 设置模型动画
				// --------------------------------------------------
				
				// 创建动画混合器：用于控制和管理模型动画
				// 参数：动画目标（这里是要播放动画的模型）
				mixer = new THREE.AnimationMixer( model );
				
				// 获取模型中的第一个动画片段
				// gltf.animations: 数组，包含模型中的所有动画
				const clip = gltf.animations[ 0 ];
				
				// 创建动画动作并播放
				// clip.optimize(): 优化动画片段，提高性能
				// mixer.clipAction(): 为动画片段创建控制动作
				// .play(): 开始播放动画
				mixer.clipAction( clip.optimize() ).play();

				// ===================================================
				// 7. 渲染器和后处理设置
				// ===================================================

				// 创建WebGL渲染器
				// 参数：配置对象
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 开启抗锯齿，使边缘更平滑
				} );
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina屏）上，像素比可能为2或更高
				// 设置像素比可以确保清晰度，但会增加性能开销
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数（替代传统的requestAnimationFrame）
				// 浏览器会在每次重绘前调用animate函数
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射（Tone Mapping）
				// 色调映射：将HDR（高动态范围）颜色转换为屏幕显示的LDR（低动态范围）
				// ACESFilmicToneMapping：电影行业标准，提供更自然的颜色过渡
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 将渲染器的canvas元素添加到页面容器中
				// renderer.domElement: WebGLRenderer创建的canvas元素
				container.appendChild( renderer.domElement );

				// --------------------------------------------------
				// 8. 后处理效果链设置
				// --------------------------------------------------

				// 创建渲染通道：将3D场景渲染到纹理（render target）
				// 参数1: 要渲染的场景
				// 参数2: 使用的相机
				const renderScene = new RenderPass( scene, camera );

				// 创建UnrealBloom辉光效果通道
				// 参数说明：
				// 参数1: new THREE.Vector2(window.innerWidth, window.innerHeight) - 分辨率
				// 参数2: 1.5 - 辉光强度（strength）初始值
				// 参数3: 0.4 - 辉光半径（radius）初始值
				// 参数4: 0.85 - 亮度阈值（threshold）初始值
				const bloomPass = new UnrealBloomPass(
					new THREE.Vector2( window.innerWidth, window.innerHeight ),
					1.5,
					0.4,
					0.85
				);
				
				// 设置Bloom通道的初始参数（从params对象读取）
				bloomPass.threshold = params.threshold;
				bloomPass.strength = params.strength;
				bloomPass.radius = params.radius;

				// 创建输出通道：将最终处理结果输出到屏幕
				// 在后处理链的最后，通常需要OutputPass来正确显示结果
				const outputPass = new OutputPass();

				// 创建效果合成器：管理和执行后处理链
				// 参数：渲染器实例
				composer = new EffectComposer( renderer );
				
				// 按顺序添加处理通道（通道的执行顺序很重要！）
				composer.addPass( renderScene );  // 第1步：渲染原始场景到纹理
				composer.addPass( bloomPass );    // 第2步：对纹理应用Bloom效果
				composer.addPass( outputPass );   // 第3步：输出最终结果到屏幕

				// --------------------------------------------------
				// 9. 工具和控件设置
				// --------------------------------------------------

				// 创建性能监控器（Stats.js）
				// 显示FPS（帧率）、MS（每帧渲染时间）等
				stats = new Stats();
				
				// 将性能监控器的DOM元素添加到页面
				container.appendChild( stats.dom );

				// 创建轨道控制器
				// 参数1: 要控制的相机
				// 参数2: 事件监听的DOM元素（通常是渲染器的canvas）
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 限制相机垂直旋转角度
				// Math.PI * 0.5 = 90度，防止相机翻转到模型下方
				controls.maxPolarAngle = Math.PI * 0.5;
				
				// 限制相机缩放距离
				controls.minDistance = 3;  // 最近距离：防止穿模
				controls.maxDistance = 8;  // 最远距离：防止拉得太远

				// --------------------------------------------------
				// 10. GUI控制面板设置
				// --------------------------------------------------

				// 创建GUI实例
				const gui = new GUI();
				// GUI会自动在页面右上角创建一个可折叠的控制面板

				// 创建Bloom参数控制文件夹
				// 文件夹可以将相关参数分组，使界面更整洁
				const bloomFolder = gui.addFolder( '辉光效果参数' );
				
				// 添加阈值控制滑块
				// 参数说明：
				// 参数1: params - 参数对象
				// 参数2: 'threshold' - 要控制的属性名
				// 参数3: 0.0 - 最小值
				// 参数4: 1.0 - 最大值
				bloomFolder.add( params, 'threshold', 0.0, 1.0 )
					// onChange: 值变化时的回调函数
					.onChange( function ( value ) {
						// 将Bloom通道的阈值设置为当前滑块值
						bloomPass.threshold = Number( value );
						// Number()确保值是数字类型
					} );

				// 添加强度控制滑块
				bloomFolder.add( params, 'strength', 0.0, 3.0 )
					.onChange( function ( value ) {
						bloomPass.strength = Number( value );
					} );

				// 添加半径控制滑块
				// .step(0.01): 设置滑块步长为0.01，实现更精细的控制
				gui.add( params, 'radius', 0.0, 1.0 )
					.step( 0.01 )
					.onChange( function ( value ) {
						bloomPass.radius = Number( value );
					} );

				// 创建色调映射控制文件夹
				const toneMappingFolder = gui.addFolder( '色调映射参数' );

				// 添加曝光度控制滑块
				toneMappingFolder.add( params, 'exposure', 0.1, 2 )
					.onChange( function ( value ) {
						// 使用指数函数调整曝光值
						// Math.pow(value, 4.0): 使滑块控制更符合人眼感知
						// 非线性映射：滑块的小变化在低值区域产生大变化，在高值区域产生小变化
						renderer.toneMappingExposure = Math.pow( value, 4.0 );
					} );

				// --------------------------------------------------
				// 11. 事件监听器设置
				// --------------------------------------------------
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

				// 初始化完成！
				// 此时所有资源已加载，场景已设置，可以开始渲染循环
			}

			// ===================================================
			// 窗口大小变化处理函数
			// ===================================================
			function onWindowResize() {
				// 当浏览器窗口大小改变时，需要更新渲染尺寸和相机参数

				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机宽高比
				// 如果不更新，图像会被拉伸或压缩
				camera.aspect = width / height;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 使canvas尺寸与窗口尺寸一致
				renderer.setSize( width, height );
				
				// 更新后处理合成器大小
				// 后处理链中的各个通道也需要知道新的渲染尺寸
				composer.setSize( width, height );
			}

			// ===================================================
			// 动画循环函数（每帧调用）
			// ===================================================
			function animate() {
				// 这是Three.js应用的核心循环函数
				// 浏览器会以显示器的刷新率（通常是60Hz）调用此函数

				// 获取自上一帧以来的时间增量（delta time）
				// 单位：秒
				// 使用时间增量可以确保动画速度在不同帧率下保持一致
				const delta = clock.getDelta();

				// 更新动画混合器
				// 参数：时间增量，告诉混合器播放多少时间的动画
				mixer.update( delta );

				// 更新性能监控器
				// 统计和显示当前帧率等信息
				stats.update();

				// 使用后处理合成器进行渲染
				// 注意：这里不是使用renderer.render()，而是使用composer.render()
				// composer.render()会自动执行整个后处理链：
				// 1. 渲染场景到纹理
				// 2. 应用Bloom效果
				// 3. 输出到屏幕
				composer.render();
				
				// 为什么不使用renderer.render(scene, camera)？
				// 因为我们要应用后处理效果，需要先将场景渲染到纹理，
				// 然后对纹理进行处理，最后才显示到屏幕。
			}

		</script>
		<!-- 主JavaScript模块结束 -->

	</body>
	<!-- 页面主体结束 -->
</html>
<!-- HTML文档结束 -->