<!-- Three.js SAO环境光遮蔽示例 - 功能与技术详解
🎯 整体功能概述
这是一个基于Three.js和WebGL的交互式3D图形演示，主要展示可缩放环境光遮蔽（Scalable Ambient Occlusion, SAO） 技术。该技术通过后期处理模拟物体表面接触处因环境光线遮挡而产生的柔和阴影，显著增强3D场景的深度感和真实感。

📋 核心功能模块
1. 3D场景构建
场景组成：包含120个随机分布、旋转和缩放的彩色球体

相机系统：透视相机（65°视野），模拟人眼视角

照明系统：3个彩色点光源 + 1个环境光的综合照明方案

动画效果：球体组以不同速度在X轴和Y轴持续旋转

2. SAO后期处理流程
text
实时渲染流程：
场景3D数据 → RenderPass（渲染到纹理） → SAOPass（计算AO） → OutputPass（输出到屏幕）
3. 交互控制面板
输出模式切换：可在"最终效果"、"纯SAO图"、"法线图"之间切换

参数实时调整：13个SAO相关参数可通过GUI面板实时调节

性能监控：显示实时帧率(FPS)和渲染时间(MS)

4. 响应式设计
自动适应浏览器窗口大小变化

保持正确的宽高比，防止图像变形

🔧 关键技术点详解
1. SAO（可缩放环境光遮蔽）技术
技术原理：
屏幕空间计算：基于深度缓冲区和法线缓冲区在2D屏幕空间计算，无需完整3D场景信息

多尺度采样：在不同分辨率层级采样，平衡性能和质量

深度感知模糊：考虑深度差异，避免深度不连续处的错误模糊

SAO核心参数：
采样半径：控制每个像素的采样范围

偏置值：调整阴影的深浅程度

强度与缩放：控制整体阴影效果

模糊参数：高斯模糊平滑阴影边缘

2. 实例化渲染优化
实现方式：
javascript
const mesh = new THREE.InstancedMesh(geometry, material, 120);
几何体共享：120个球体共享同一个球体几何体

变换矩阵数组：每个实例通过变换矩阵定义位置、旋转、缩放

颜色属性数组：每个实例有独立的颜色属性

性能优势：
减少绘制调用：从120次绘制调用减少到1次

降低GPU负载：减少状态切换和顶点数据上传

内存效率：只存储差异数据（变换矩阵和颜色）

3. 后期处理管线架构
EffectComposer 工作流程：
RenderPass：将3D场景渲染到离屏帧缓冲（FBO）

SAOPass：在屏幕空间计算环境光遮蔽

输入：深度纹理、法线纹理

处理：半球采样、遮蔽计算、多尺度混合

输出：AO纹理

OutputPass：将最终结果合成到屏幕

4. 物理光照模型
三点照明法：
主光源（淡青色）：左下角，提供主要照明和阴影

辅助光源（淡粉色）：左上角，填充阴影区域

背光源（淡蓝色）：右下角，勾勒物体轮廓

环境光（白色）：全局均匀照明，避免纯黑阴影

PBR材质：
MeshStandardMaterial：基于物理的渲染材质

粗糙度：0.5，适中的表面散射

金属度：0，非金属材质表现

5. 性能监控与优化
Stats.js 监控指标：
FPS：帧率，反映动画流畅度（目标60FPS）

MS：每帧渲染时间，衡量性能开销

MB：内存使用情况（如启用）

自适应渲染：
javascript
renderer.setPixelRatio(window.devicePixelRatio);
根据设备像素比自动调整渲染分辨率

在高DPI设备上提供更清晰的图像

6. GUI参数控制系统
参数分类：
质量参数：采样半径、最小分辨率

效果参数：强度、偏置、缩放

后处理参数：模糊半径、标准差、深度截止

功能开关：启用/禁用SAO、模糊

7. 动画系统
时间驱动动画：
javascript
group.rotation.x = timer * 0.0002;
performance.now()：高精度时间戳，确保平滑动画

帧率无关：基于时间而非帧数，在不同刷新率下保持恒定速度

双轴旋转：X轴和Y轴不同速度，创造更自然的运动

🚀 技术亮点
1. 实时交互性
所有参数可实时调整，立即看到效果变化

无需重新编译或刷新页面

2. 教育价值
直观展示SAO每个参数的影响

多视图模式帮助理解技术原理

3. 生产就绪的架构
模块化代码结构

完整的错误处理（虽然没有显式展示）

性能优化的渲染策略

4. 跨平台兼容性
基于WebGL，支持所有现代浏览器

响应式设计，适配桌面和移动设备

📊 性能考虑
优化措施：
实例化渲染：大幅减少绘制调用

多分辨率SAO：在较低分辨率计算，再上采样

智能采样：根据深度和法线调整采样密度

渐进渲染：复杂效果可逐帧累积

性能瓶颈：
采样半径过大：增加GPU计算负担

高分辨率输出：像素着色器复杂度增加

复杂几何体：影响初始渲染时间

🎨 视觉效果分析
SAO带来的视觉提升：
深度感知增强：物体接触处自然阴影

细节突出：几何细节更明显

空间感改善：物体在空间中的位置关系更清晰

艺术控制：可通过参数调整获得不同艺术风格

🔍 学习价值
这个示例是学习以下技术的优秀资源：

Three.js高级渲染技术

后期处理管线设计

WebGL性能优化

实时图形学算法

交互式3D应用开发

📈 应用场景
游戏开发：实时环境光遮蔽

产品可视化：增强3D模型真实感

建筑渲染：室内外场景光照模拟

教育演示：计算机图形学教学

艺术创作：数字艺术和动画制作 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：Three.js SAO环境光遮蔽示例
			Three.js - 基于WebGL的3D图形库
			WebGL - 浏览器中的3D图形API
			Post Processing - 后期处理，指在渲染完成后对图像进行的额外处理
			Scalable Ambient Occlusion (SAO) - 可缩放环境光遮蔽，一种高级阴影技术
		-->
		<title>Three.js WebGL - 后期处理 - 可缩放环境光遮蔽(SAO)示例</title>
		
		<!-- 
			字符编码设置：UTF-8支持中文字符
			charset - 字符集声明
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置：移动端适配
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（保持固定比例）
			minimum-scale=1.0 - 最小缩放比例为1.0（100%）
			maximum-scale=1.0 - 最大缩放比例为1.0（100%）
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			外部CSS样式表链接
			type="text/css" - 样式表类型为CSS
			rel="stylesheet" - 关系定义为样式表
			href="main.css" - 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			页面信息展示区域：显示项目信息和作者信息
			id="info" - 用于CSS样式和JavaScript操作的标识符
		-->
		<div id="info">
			<!-- 
				Three.js官网链接（在新窗口中打开）
				target="_blank" - 在新窗口/标签页中打开链接
				rel="noopener noreferrer" - 安全设置，防止新窗口访问原窗口的window.opener属性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> 
			- 可缩放环境光遮蔽(SAO)技术演示<br/>
			
			<!-- 技术贡献者信息 -->
			核心着色器由 <a href="http://clara.io">Ben Houston</a> 开发 / 
			后期处理通道由 <a href="http://ludobaka.github.io">Ludobaka</a> 实现<br/>
			
			<!-- 交互说明 -->
			<strong>操作指南：</strong><br/>
			1. 使用右侧控制面板调整SAO效果参数<br/>
			2. 鼠标可查看不同角度的场景<br/>
			3. 调整"output"选项查看不同渲染输出模式<br/>
			
			<!-- SAO技术说明 -->
			<strong>技术说明：</strong><br/>
			环境光遮蔽(AO)模拟物体表面接触处的柔和阴影<br/>
			SAO(可缩放AO)是一种高效的屏幕空间环境光遮蔽技术<br/>
			通过后期处理增强场景的立体感和真实感
		</div>

		<!-- 
			Import Maps（导入映射）：现代浏览器中的模块解析机制
			作用：定义模块标识符与实际URL之间的映射关系，简化导入路径
			type="importmap" - 指定脚本类型为导入映射
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：使用ES6模块语法
			type="module" - 指定脚本为ES6模块，支持import/export语法
			模块化加载，避免全局变量污染，支持异步加载
		-->
		<script type="module">
			// ==================== 模块导入区域 ====================
			// 导入Three.js核心库的所有功能，并命名为THREE
			// * 表示导入所有导出成员，THREE是命名空间
			import * as THREE from 'three';

			// 导入性能统计工具：显示FPS（帧率）、MS（渲染时间）等性能指标
			// 来自Three.js附加组件库的libs目录
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轻量级GUI控制库：用于创建参数控制面板
			// lil-gui是一个轻量级的图形用户界面库，便于调试和交互
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入后期处理相关模块
			// EffectComposer: 后期处理合成器，管理多个后期处理通道的执行顺序
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			
			// RenderPass: 渲染通道，将3D场景渲染到纹理(render target)中
			// 这是后期处理流程的第一步，为后续处理提供输入纹理
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			
			// SAOPass: SAO（可缩放环境光遮蔽）处理通道
			// 在屏幕空间计算环境光遮蔽，模拟物体接触处的阴影效果
			import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
			
			// OutputPass: 输出通道，将处理结果输出到屏幕
			// 通常是后期处理链的最后一个通道
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

			// ==================== 全局变量声明 ====================
			// container: DOM容器元素，用于组织页面内容
			// stats: 性能统计对象实例
			let container, stats;
			
			// Three.js核心三要素：
			// camera: 相机，决定观察场景的视角（透视、正交等）
			// scene: 场景，包含所有3D对象（网格、灯光、相机等）
			// renderer: 渲染器，负责将3D场景渲染到2D画布上
			let camera, scene, renderer;
			
			// 后期处理相关对象：
			// composer: 后期处理合成器，管理整个后期处理流程
			// renderPass: 场景渲染通道
			// saoPass: SAO效果处理通道
			let composer, renderPass, saoPass;
			
			// group: 组对象，用于组织和管理多个3D对象
			// 便于同时对多个对象进行变换操作（旋转、缩放、平移）
			let group;

			// ==================== 初始化函数调用 ====================
			// 页面加载完成后立即执行初始化函数
			// 这是整个程序的入口点
			init();

			// ==================== 函数定义区域 ====================
			
			/**
			 * 初始化函数 - 程序的初始化入口
			 * 功能：创建和设置所有Three.js对象、场景、灯光、后期处理效果和GUI
			 * 执行顺序：
			 * 1. 创建DOM容器
			 * 2. 设置渲染器
			 * 3. 创建相机
			 * 4. 创建场景和灯光
			 * 5. 创建3D物体
			 * 6. 设置后期处理
			 * 7. 创建GUI控制面板
			 * 8. 设置事件监听器
			 */
			function init() {
				// ---------- 1. 创建DOM容器 ----------
				// 创建div元素作为Three.js渲染器的主容器
				container = document.createElement('div');
				// 将容器添加到body元素中，使其显示在页面上
				document.body.appendChild(container);

				// ---------- 2. 获取窗口尺寸 ----------
				// window.innerWidth: 浏览器窗口的内部宽度（包含滚动条）
				// window.innerHeight: 浏览器窗口的内部高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// ---------- 3. 创建WebGL渲染器 ----------
				// WebGLRenderer是Three.js的主要渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比：确保在高DPI屏幕上清晰显示
				// window.devicePixelRatio: 物理像素与CSS像素的比值（Retina屏幕为2）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器的输出画布尺寸（单位：像素）
				renderer.setSize(width, height);
				
				// 设置动画循环回调函数，每帧自动调用animate函数
				// 替代传统的requestAnimationFrame，Three.js的推荐方式
				renderer.setAnimationLoop(animate);
				
				// 获取渲染器的DOM元素（canvas元素）并添加到body中
				// renderer.domElement: 渲染器对应的HTMLCanvasElement
				document.body.appendChild(renderer.domElement);

				// ---------- 4. 创建透视相机 ----------
				// PerspectiveCamera: 透视相机，模拟人眼视角，有近大远小的透视效果
				// 参数说明：
				// 65: 视野角度(FOV) - 垂直视角为65度
				// width/height: 宽高比 - 相机视口的宽高比例
				// 3: 近裁剪平面 - 距离相机3个单位以内的物体不渲染
				// 10: 远裁剪平面 - 距离相机10个单位以外的物体不渲染
				camera = new THREE.PerspectiveCamera(65, width / height, 3, 10);
				
				// 设置相机位置：沿Z轴正方向移动7个单位
				// Three.js坐标系：Y轴向上，X轴向右，Z轴从屏幕向外
				camera.position.z = 7;

				// ---------- 5. 创建场景 ----------
				// Scene: 场景对象，是所有3D对象的容器
				// 包含网格(meshes)、灯光(lights)、相机(cameras)等
				scene = new THREE.Scene();

				// ---------- 6. 创建物体组 ----------
				// Object3D: 所有3D对象的基类，可以组织成父子层次结构
				// 组对象可以将多个物体作为一个整体进行操作
				group = new THREE.Object3D();
				// 将组添加到场景中
				scene.add(group);

				// ---------- 7. 创建点光源1 ----------
				// PointLight: 点光源，从一点向所有方向均匀发射光线
				// 参数说明：
				// 0xefffef: 光源颜色 - 十六进制RGB颜色值（淡青色）
				// 500: 光源强度 - 光照强度值
				const light = new THREE.PointLight(0xefffef, 500);
				// 设置光源位置：X=-10, Y=-10, Z=10（左下方）
				light.position.set(-10, -10, 10);
				// 将光源添加到场景中
				scene.add(light);

				// ---------- 8. 创建点光源2 ----------
				// 第二个点光源，颜色为淡粉色
				const light2 = new THREE.PointLight(0xffefef, 500);
				light2.position.set(-10, 10, 10); // 左上方
				scene.add(light2);

				// ---------- 9. 创建点光源3 ----------
				// 第三个点光源，颜色为淡蓝色
				const light3 = new THREE.PointLight(0xefefff, 500);
				light3.position.set(10, -10, 10); // 右下方
				scene.add(light3);

				// ---------- 10. 创建环境光 ----------
				// AmbientLight: 环境光，均匀照射场景中的所有物体
				// 没有方向，用于模拟间接光照，避免纯黑色阴影
				// 参数说明：
				// 0xffffff: 白色光
				// 0.2: 较低的光照强度，作为补充光照
				const light4 = new THREE.AmbientLight(0xffffff, 0.2);
				scene.add(light4);

				// ---------- 11. 创建球体几何体 ----------
				// SphereGeometry: 球体几何体，定义物体的形状
				// 参数说明：
				// 3: 球体半径 - 3个单位
				// 48: 宽度分段数 - 经线分段数，影响球体水平方向的细节
				// 24: 高度分段数 - 纬线分段数，影响球体垂直方向的细节
				// 高分段数确保球体表面平滑，便于展示SAO效果
				const geometry = new THREE.SphereGeometry(3, 48, 24);
				
				// ---------- 12. 创建标准材质 ----------
				// MeshStandardMaterial: 基于物理渲染(PBR)的标准材质
				// 对光照反应更真实，支持金属度、粗糙度等物理属性
				const material = new THREE.MeshStandardMaterial();
				material.roughness = 0.5; // 粗糙度：0.0（完全光滑）到1.0（完全粗糙）
				material.metalness = 0;   // 金属度：0.0（非金属）到1.0（金属）

				// ---------- 13. 创建实例化网格 ----------
				// InstancedMesh: 实例化网格，高效渲染大量相同几何体的技术
				// 共享几何体和材质，通过变换矩阵区分每个实例
				// 参数说明：
				// geometry: 几何体（所有实例共享）
				// material: 材质（所有实例共享）
				// 120: 实例数量 - 创建120个球体实例
				const mesh = new THREE.InstancedMesh(geometry, material, 120);
				
				// 临时对象，用于计算每个实例的变换矩阵
				const dummy = new THREE.Object3D();
				
				// 颜色对象，用于设置每个实例的颜色
				const color = new THREE.Color();

				// ---------- 14. 生成120个随机球体实例 ----------
				// 循环创建120个具有随机位置、旋转、缩放和颜色的球体
				for (let i = 0; i < 120; i++) {
					// 设置随机位置：在-2到+2的范围内随机分布
					// Math.random(): 返回0到1之间的随机数
					dummy.position.x = Math.random() * 4 - 2; // X: -2 到 +2
					dummy.position.y = Math.random() * 4 - 2; // Y: -2 到 +2
					dummy.position.z = Math.random() * 4 - 2; // Z: -2 到 +2
					
					// 设置随机旋转：每个轴随机旋转0到360度（弧度制）
					// Math.random() * Math.PI * 2: 0到2π弧度（0-360度）
					dummy.rotation.x = Math.random() * Math.PI * 2;
					dummy.rotation.y = Math.random() * Math.PI * 2;
					dummy.rotation.z = Math.random() * Math.PI * 2;

					// 设置随机缩放：0.05到0.25之间的随机大小
					// Math.random() * 0.2: 0到0.2
					// + 0.05: 加上基础大小0.05，最终范围0.05-0.25
					const scale = Math.random() * 0.2 + 0.05;
					dummy.scale.set(scale, scale, scale); // 均匀缩放

					// 更新变换矩阵：根据位置、旋转、缩放计算变换矩阵
					dummy.updateMatrix();
					
					// 将变换矩阵设置到实例化网格的第i个实例
					// setMatrixAt: 设置指定索引实例的变换矩阵
					mesh.setMatrixAt(i, dummy.matrix);

					// 设置随机颜色：使用HSL色彩模式
					// HSL参数：色相(H)、饱和度(S)、亮度(L)
					// Math.random(): 随机色相（0-1对应0-360度）
					// 1.0: 最大饱和度（鲜艳的颜色）
					// 0.3: 较低的亮度（较暗的颜色）
					color.setHSL(Math.random(), 1.0, 0.3);
					
					// 将颜色设置到实例化网格的第i个实例
					mesh.setColorAt(i, color);
				}

				// 将实例化网格添加到组中
				group.add(mesh);

				// ---------- 15. 初始化性能统计器 ----------
				// Stats: 性能监测工具，显示FPS、渲染时间等
				stats = new Stats();
				// 将统计器的DOM元素添加到容器中
				container.appendChild(stats.dom);

				// ---------- 16. 创建后期处理效果合成器 ----------
				// EffectComposer: 管理后期处理通道的执行流程
				// 参数：渲染器实例，用于创建渲染目标(render targets)
				composer = new EffectComposer(renderer);
				
				// 创建渲染通道：将3D场景渲染到纹理
				// 参数：场景和相机，定义渲染的内容和视角
				renderPass = new RenderPass(scene, camera);
				
				// 将渲染通道添加到合成器中（第一个通道）
				composer.addPass(renderPass);
				
				// 创建SAO（可缩放环境光遮蔽）通道
				// 参数：场景和相机，用于深度和法线信息计算
				saoPass = new SAOPass(scene, camera);
				
				// 将SAO通道添加到合成器中（第二个通道）
				composer.addPass(saoPass);
				
				// 创建输出通道：将后期处理结果输出到屏幕
				// 通常作为最后一个通道
				const outputPass = new OutputPass();
				
				// 将输出通道添加到合成器中（第三个通道）
				composer.addPass(outputPass);

				// ---------- 17. 初始化GUI控制面板 ----------
				// GUI: 图形用户界面，用于调整参数
				const gui = new GUI();
				
				// 添加SAO输出模式控制
				// 参数说明：
				// saoPass.params.output: 绑定的参数对象和属性
				// 第二个参数：选项对象，键为显示文本，值为对应的枚举值
				gui.add(saoPass.params, 'output', {
					'默认模式': SAOPass.OUTPUT.Default,   // 默认：SAO效果应用于场景
					'仅SAO效果': SAOPass.OUTPUT.SAO,      // 仅显示SAO效果图（黑白）
					'法线视图': SAOPass.OUTPUT.Normal     // 显示法线图（RGB表示法线方向）
				}).onChange(function(value) {
					// 当值改变时的回调函数
					saoPass.params.output = value; // 更新SAO输出模式
				});
				
				// 添加SAO偏置参数控制
				// saoBias: 偏置值，调整阴影的深浅
				// 范围：-1到1，负值使阴影更浅，正值使阴影更深
				gui.add(saoPass.params, 'saoBias', -1, 1)
				   .name('偏置值')
				   .step(0.01); // 步进值0.01，精细调整
				
				// 添加SAO强度参数控制
				// saoIntensity: 强度，控制整体阴影强度
				// 范围：0到1，0为无阴影，1为最大阴影
				gui.add(saoPass.params, 'saoIntensity', 0, 1)
				   .name('强度')
				   .step(0.01);
				
				// 添加SAO缩放参数控制
				// saoScale: 缩放，控制阴影的尺寸
				// 范围：0到10，影响阴影的覆盖范围
				gui.add(saoPass.params, 'saoScale', 0, 10)
				   .name('缩放')
				   .step(0.1);
				
				// 添加SAO采样核半径参数控制
				// saoKernelRadius: 采样核半径，决定采样范围大小
				// 范围：1到100，值越大采样范围越广，效果越模糊但性能开销越大
				gui.add(saoPass.params, 'saoKernelRadius', 1, 100)
				   .name('采样半径')
				   .step(1);
				
				// 添加SAO最小分辨率参数控制
				// saoMinResolution: 最小分辨率，性能优化参数
				// 范围：0到1，值越小效果越精细但性能开销越大
				gui.add(saoPass.params, 'saoMinResolution', 0, 1)
				   .name('最小分辨率')
				   .step(0.01);
				
				// 添加SAO模糊开关
				// saoBlur: 布尔值，启用或禁用模糊处理
				// 模糊可以减少SAO的噪点，使阴影更平滑
				gui.add(saoPass.params, 'saoBlur')
				   .name('启用模糊');
				
				// 添加SAO模糊半径参数控制
				// saoBlurRadius: 模糊半径，控制模糊范围
				// 范围：0到200，值越大模糊效果越明显
				gui.add(saoPass.params, 'saoBlurRadius', 0, 200)
				   .name('模糊半径')
				   .step(1);
				
				// 添加SAO模糊标准差参数控制
				// saoBlurStdDev: 模糊标准差，控制模糊强度分布
				// 范围：0.5到150，高斯模糊的标准差参数
				gui.add(saoPass.params, 'saoBlurStdDev', 0.5, 150)
				   .name('模糊标准差')
				   .step(0.5);
				
				// 添加SAO模糊深度截止参数控制
				// saoBlurDepthCutoff: 深度截止值，防止深度不连续处的过度模糊
				// 范围：0.0到0.1，控制深度差异的敏感度
				gui.add(saoPass.params, 'saoBlurDepthCutoff', 0.0, 0.1)
				   .name('深度截止值')
				   .step(0.001);
				
				// 添加SAO效果启用/禁用开关
				// enabled: 布尔值，完全启用或禁用SAO效果
				gui.add(saoPass, 'enabled')
				   .name('启用SAO效果');

				// ---------- 18. 添加窗口大小变化监听器 ----------
				// 监听window对象的resize事件
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 窗口大小变化处理函数
			 * 功能：响应浏览器窗口大小变化，更新相机、渲染器和后期处理合成器的尺寸
			 * 触发时机：用户调整浏览器窗口大小、设备旋转、全屏切换等
			 */
			function onWindowResize() {
				// 获取新的窗口尺寸
				// 使用|| 1避免宽度或高度为0的情况（防止除以0的错误）
				const width = window.innerWidth || 1;
				const height = window.innerHeight || 1;

				// 更新相机宽高比
				// 相机宽高比必须与渲染窗口宽高比一致，避免图像拉伸变形
				camera.aspect = width / height;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部投影矩阵
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				// 设置渲染器输出画布的新尺寸
				renderer.setSize(width, height);
				
				// 更新后期处理合成器尺寸
				// 合成器内部的渲染目标(render targets)也需要调整尺寸
				composer.setSize(width, height);
			}

			/**
			 * 动画循环函数（由setAnimationLoop调用，每帧执行一次）
			 * 功能：每帧更新场景状态并渲染
			 * 执行顺序：
			 * 1. 开始性能统计
			 * 2. 调用渲染函数
			 * 3. 结束性能统计
			 * 
			 * 注意：这是游戏循环的核心，通常以60FPS（每16.7ms）的频率执行
			 */
			function animate() {
				// 开始性能统计测量
				// 记录当前帧的开始时间
				stats.begin();
				
				// 调用渲染函数，更新场景并绘制
				render();
				
				// 结束性能统计测量
				// 计算并更新统计数据显示
				stats.end();
			}

			/**
			 * 渲染函数 - 每帧执行的渲染逻辑
			 * 功能：
			 * 1. 更新场景中的动画状态（物体旋转）
			 * 2. 执行后期处理渲染流程
			 * 
			 * 注意：这里使用性能计数器获取时间，实现与设备刷新率无关的平滑动画
			 */
			function render() {
				// 获取当前时间戳（毫秒）
				// performance.now()：高精度时间戳，精度达到微秒级
				// 相比Date.now()更精确，适合动画和性能测量
				const timer = performance.now();
				
				// 更新组的旋转动画
				// 基于时间的动画：timer * 系数，确保在不同帧率下动画速度一致
				// 系数说明：
				// 0.0002：X轴旋转速度（每毫秒0.0002弧度）
				// 0.0001：Y轴旋转速度（每毫秒0.0001弧度）
				// 这些值控制旋转速度，可以调整以获得理想的动画效果
				group.rotation.x = timer * 0.0002;
				group.rotation.y = timer * 0.0001;

				// 使用后期处理合成器进行渲染
				// composer.render()：执行整个后期处理链
				// 内部流程：RenderPass → SAOPass → OutputPass
				composer.render();
			}
		</script>
	</body>
</html>