<!-- Three.js WebGPU 模糊反射效果演示 - 功能和技术详解
🎯 核心功能概述
这是一个基于WebGPU技术的高性能3D渲染示例，实现了实时物理模糊反射效果。主要模拟了带有粗糙度的表面反射特性，结合动态视觉效果和交互控制，展示现代Web图形编程的强大能力。

📁 主要功能模块
1. 物理精确的模糊反射系统
反射捕捉：使用反射器(Reflector)捕捉场景图像

模糊处理：应用哈希模糊算法模拟表面粗糙度

参数控制：实时调节粗糙度、模糊半径、分辨率

深度集成：结合深度信息避免无效反射

2. 动态视觉效果
彩色圆环：地板上的动态扩散圆环效果

色调变化：随时间变化的背景色调

透明度衰减：基于距离的雾效透明度

动画模型：加载并播放GLTF角色动画

3. 交互控制系统
视角控制：鼠标拖拽旋转、平移、缩放

参数调节：实时滑块调节反射参数

自动旋转：可选的自旋转视角

响应式布局：自适应窗口大小变化

4. 调试与开发工具
Inspector面板：内置Three.js调试工具

性能监控：WebGPU性能统计

UV测试：纹理坐标可视化网格

实时预览：所有更改立即反映

⚙️ 核心技术架构
1. WebGPU渲染管线
text
Three.js -> WebGPU API -> GPU硬件加速
现代图形API：替代WebGL的新标准

多线程渲染：更好的CPU/GPU并行处理

计算着色器：支持更复杂的GPU计算

2. Three.js Shader Language (TSL)
javascript
// 示例：声明式着色器编程
const effect = Fn(([pos, radius]) => {
    const dist = length(pos);
    return color.rgb.mul(pow(radius.div(abs(dist)), width));
});
声明式语法：在JavaScript中编写着色器

类型安全：编译时类型检查

节点系统：可视化着色器构建

3. 哈希模糊算法 (Hash Blur)
text
原始反射 -> 多次采样 -> 加权平均 -> 模糊结果
屏幕空间效果：无需额外的几何体

性能优化：40次迭代的平衡模糊

预乘Alpha：避免边缘黑边问题

4. 基于物理的渲染 (PBR)
粗糙度映射：控制表面微观细节

能量守恒：反射强度与漫反射平衡

菲涅尔效应：掠射角反射增强

5. 实时反射技术
javascript
const reflection = reflector({
    resolutionScale: 0.5,  // 性能优化
    depth: true,           // 深度测试
    bounces: false         // 单次反射
});
反射捕捉器：动态生成反射纹理

分辨率控制：可调节的质量/性能平衡

深度集成：避免非表面反射

🔧 关键技术实现细节
1. 反射模糊着色器流程
text
1. 采样反射纹理 + 深度纹理
2. 应用深度遮罩（只保留有效区域）
3. 哈希模糊处理（40次迭代）
4. 根据粗糙度混合原始/模糊反射
5. 叠加动态圆环效果
6. 应用距离雾化透明度
2. 性能优化策略
分辨率缩放：反射纹理使用一半分辨率

迭代控制：可调节的模糊质量

提前深度测试：避免无效像素处理

GPU优化：WebGPU原生性能优势

3. 动画系统集成
GLTF动画：骨骼动画和变形动画支持

动画混合器：多动画轨道混合

时间同步：deltaTime帧率无关动画

4. 交互系统架构
text
用户输入 -> OrbitControls -> 相机矩阵更新 -> 渲染循环
GUI调节 -> Uniform变量更新 -> 着色器重编译 -> 实时反馈
🎨 视觉效果特色
1. 多层混合效果
基础层：动态彩色圆环（ShaderToy算法）

反射层：模糊的物理反射

环境层：色调变化的背景

雾化层：距离透明度衰减

2. 参数响应系统
javascript
// 粗糙度影响
roughness: 0.0 → 1.0 = 清晰 → 完全模糊

// 模糊半径影响
radius: 0.0 → 1.0 = 无模糊 → 强模糊

// 分辨率影响
resolution: 0.25 → 1.0 = 性能优先 → 质量优先
3. 实时动态反馈
所有参数调节立即可视化

平滑的动画过渡

实时光照变化

交互式视角控制

🚀 技术栈总结
层级	技术	用途
渲染后端	WebGPU	现代GPU渲染API
图形框架	Three.js r165+	3D场景管理
着色语言	TSL	GPU着色器编程
模型格式	GLTF 2.0	3D模型和动画
模糊算法	Hash Blur	屏幕空间模糊
交互控制	OrbitControls	相机交互
调试工具	Three.js Inspector	开发调试
构建系统	ES6 Modules	模块化开发
📈 性能特点
优势
GPU高效利用：WebGPU提供更好的硬件访问

实时性能：60FPS的复杂渲染效果

内存优化：智能纹理管理和释放

可伸缩性：参数可调节质量/性能平衡 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			Title标签：显示在浏览器标签页的标题
			这里修改为中文标题，描述示例的核心功能
		-->
		<title>Three.js WebGPU - 模糊反射效果演示</title>
		
		<!-- 
			字符编码设置：
			utf-8 是最常用的国际编码标准，支持中文字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(Viewport)设置：
			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">
		
		<!-- 
			外部样式表链接：
			rel="stylesheet" 指定链接关系为样式表
			href="example.css" 指向外部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>
				本示例展示了如何使用哈希模糊算法实现具有模糊效果的反射。
				技术特点：
				1. 使用WebGPU进行高性能渲染
				2. 基于物理的模糊反射（PBR）
				3. 实时动态圆环效果
				4. 可调节的粗糙度和模糊参数
				5. 支持动画模型的反射
			</small>
			
		</div>

		<!-- 
			模块导入映射配置 (Import Map)：
			这是现代JavaScript模块系统的配置，告诉浏览器在哪里查找模块
			类似于传统开发中的包管理器路径配置
		-->
		<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>

		<!-- 
			主脚本模块：
			type="module" 表示这是ES6模块，支持import/export语法
			模块中的代码在严格模式下运行，有自己的作用域
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入Three.js核心模块，使用WebGPU渲染后端
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）函数
			// TSL是一种在JavaScript中编写着色器的声明式语言
			import { 
				Fn,         // 创建着色器函数
				vec4,       // 创建四维向量（RGBA颜色）
				fract,      // 取小数部分函数，用于创建重复图案
				sample,     // 纹理采样函数
				abs,        // 绝对值函数
				uniform,    // 创建uniform变量（可在外部调节的参数）
				pow,        // 幂函数
				color,      // 颜色构造函数
				max,        // 最大值函数
				length,     // 向量长度计算
				rangeFogFactor, // 范围雾效因子计算
				sub,        // 减法运算
				reflector,  // 反射器节点，用于捕捉反射
				normalWorld, // 世界空间法向量
				hue,        // 色调调整函数
				time,       // 时间变量（自动更新）
				mix,        // 线性混合函数
				positionWorld // 世界空间位置
			} from 'three/tsl';
			
			// 导入哈希模糊效果模块
			// 这是一种高效的屏幕空间模糊算法
			import { hashBlur } from 'three/addons/tsl/display/hashBlur.js';
			
			// 导入GLTF加载器，用于加载3D模型
			// GLTF是现代的3D模型格式，支持动画、材质等
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入轨道控制器，提供鼠标/触摸交互
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入调试器，用于实时调节参数和调试
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ==================== 全局变量声明 ====================
			// 注意：这些变量在整个模块中可见，用于存储主要对象引用
			let camera,      // 相机对象，定义观察视角
				scene,       // 场景对象，包含所有3D对象
				renderer;    // 渲染器对象，负责绘制场景
			
			let model,       // 加载的3D模型
				mixer,       // 动画混合器，用于控制模型动画
				clock;       // 时钟对象，用于计算时间差（delta time）
			
			let controls;    // 轨道控制器实例
			let gui;         // GUI（图形用户界面）实例，用于参数调节

			// ==================== 初始化函数调用 ====================
			// 立即调用初始化函数
			// async关键字表示函数内部可能包含异步操作
			init();

			// ==================== 初始化函数定义 ====================
			async function init() {
				// 此函数负责创建和设置场景中的所有对象

				// ---------- 1. 创建相机 ----------
				// 透视相机模拟人眼视角，具有近大远小的效果
				// 参数：视野角度50°, 宽高比, 近裁剪面0.25, 远裁剪面30
				camera = new THREE.PerspectiveCamera( 
					50, 
					window.innerWidth / window.innerHeight, 
					0.25, 
					30 
				);
				// 设置相机位置 (x, y, z)
				camera.position.set( -2.5, 2, 2.5 );
				// 设置相机看向的点 (x, y, z)
				camera.lookAt( 0, .4, 0 );

				// ---------- 2. 创建场景 ----------
				scene = new THREE.Scene();
				// 设置场景背景节点（使用TSL着色器代码）
				// 效果：根据表面法向量混合颜色，添加色调和随时间变化
				// normalWorld.y.mix(0, color(0x0066ff)) - 根据法向量的y分量混合颜色
				// .mul(.1) - 降低亮度
				// hue(..., time) - 随时间变化色调
				scene.backgroundNode = hue( 
					normalWorld.y.mix( 0, color( 0x0066ff ) ).mul( .1 ), 
					time 
				);

				// ---------- 3. 创建光源 ----------
				// 半球光：模拟环境光照（天空光+地面反射光）
				// 参数：天空颜色(白色), 地面颜色(蓝色), 强度10
				const waterAmbientLight = new THREE.HemisphereLight( 
					0xffffff, 
					0x0066ff, 
					10 
				);
				scene.add( waterAmbientLight );

				// ---------- 4. 创建时钟 ----------
				// 用于计算帧间时间差，确保动画在不同帧率下保持一致速度
				clock = new THREE.Clock();

				// ---------- 5. 加载动画模型 ----------
				// 创建GLTF加载器实例
				const gltfLoader = new GLTFLoader();
				// 加载模型文件（异步操作）
				gltfLoader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
					// 加载完成后的回调函数
					
					model = gltf.scene; // 获取场景对象
					
					// 启用第一个子物体的阴影投射
					// children[0] 获取第一个子对象
					// children[0] 再次获取该对象的第一个子对象
					model.children[ 0 ].children[ 0 ].castShadow = true;

					// 创建动画混合器
					// 动画混合器是Three.js的动画系统核心，用于混合多个动画
					mixer = new THREE.AnimationMixer( model );

					// 创建并播放第一个动画剪辑
					const action = mixer.clipAction( gltf.animations[ 0 ] );
					action.play(); // 开始播放动画

					// 将模型添加到场景
					scene.add( model );
				} );

				// ---------- 6. 加载纹理 ----------
				// 创建纹理加载器
				const textureLoader = new THREE.TextureLoader();

				// 加载UV测试纹理（用于调试材质坐标）
				const uvMap = textureLoader.load( 'textures/uv_grid_directx.jpg' );
				uvMap.colorSpace = THREE.SRGBColorSpace; // 设置颜色空间为sRGB，更接近人眼感知

				// ---------- 7. 创建UV测试材质 ----------
				// MeshStandardNodeMaterial：基于物理的节点材质
				const uvMaterial = new THREE.MeshStandardNodeMaterial( {
					map: uvMap,        // 设置漫反射纹理
					side: THREE.DoubleSide // 双面渲染，正反面都可见
				} );

				// 创建UV测试平面
				const uvMesh = new THREE.Mesh( 
					new THREE.PlaneGeometry( 2, 2 ), // 2x2的平面几何体
					uvMaterial 
				);
				uvMesh.position.set( 0, 1, -3 ); // 设置位置
				scene.add( uvMesh );

				// ---------- 8. 创建动态圆环效果 ----------
				// 定义TSL着色器函数：绘制圆环
				// Fn() 将JavaScript函数转换为TSL着色器函数
				const drawCircle = Fn( ( [ 
					pos,    // 位置坐标
					radius, // 圆环半径
					width,  // 圆环宽度
					power,  // 强度/功率
					color,  // 颜色
					timer = time.mul( .5 ) // 计时器，默认基于时间变化
				] ) => {
					// 此函数实现圆环绘制算法
					// 参考：https://www.shadertoy.com/view/3tdSRn
					
					// 计算到原点的距离
					const dist1 = length( pos );
					
					// 创建重复的波纹效果：
					// 1. dist1.mul(5.0) - 放大距离，增加波纹密度
					// 2. .sub(fract(timer)) - 减去时间的小数部分，实现动画
					// 3. fract(...) - 取小数部分，创建无限重复的图案
					dist1.assign( fract( dist1.mul( 5.0 ).sub( fract( timer ) ) ) );
					
					// 计算与圆环中心的距离
					const dist2 = dist1.sub( radius );
					
					// 计算强度：使用幂函数创建光滑的衰减
					const intensity = pow( radius.div( abs( dist2 ) ), width );
					
					// 计算最终颜色：
					// 1. color.rgb.mul(intensity) - 颜色乘以强度
					// 2. .mul(power) - 乘以功率系数
					// 3. .mul(max(sub(0.8, abs(dist2)), 0.0)) - 边缘衰减
					const col = color.rgb.mul( intensity )
						.mul( power )
						.mul( max( sub( 0.8, abs( dist2 ) ), 0.0 ) );

					return col; // 返回颜色
				} );

				// 创建圆环的Y轴淡出效果
				// positionWorld.y.mul(.7) - 获取Y坐标并乘以0.7
				// .oneMinus() - 计算1-x，实现反向
				// .max(0) - 确保值不小于0
				const circleFadeY = positionWorld.y.mul( .7 )
					.oneMinus()
					.max( 0 );

				// 创建基于距离的颜色混合
				// positionWorld.xz.distance(0) - 计算XZ平面到原点的距离
				// .div(10).clamp() - 除以10并限制在0-1范围
				// mix(color1, color2, factor) - 根据因子混合两种颜色
				const animatedColor = mix( 
					color( 0x74ccf4 ), // 淡蓝色
					color( 0x7f00c5 ), // 紫色
					positionWorld.xz.distance( 0 ).div( 10 ).clamp() 
				);

				// 应用圆环效果并添加色调变化
				const animatedCircle = hue( 
					drawCircle( 
						positionWorld.xz.mul( .1 ), // 位置（缩放0.1倍）
						0.5,  // 半径
						0.8,  // 宽度
						.01,  // 功率
						animatedColor // 颜色
					).mul( circleFadeY ), // 乘以Y轴淡出
					time // 随时间变化色调
				);

				// 创建点光源并应用圆环效果
				const floorLight = new THREE.PointLight( 0xffffff ); // 白色点光源
				floorLight.colorNode = animatedCircle.mul( 50 ); // 设置颜色节点（增强亮度）
				scene.add( floorLight );

				// ---------- 9. 创建反射效果 ----------
				// 创建可调节的参数（uniform变量）
				const roughness = uniform( .9 ); // 粗糙度：控制反射模糊程度
				const radius = uniform( 0.2 );   // 半径：控制模糊采样半径

				// 创建反射器：
				// 反射器是一种特殊的相机，用于捕捉场景的反射图像
				const reflection = reflector( { 
					resolutionScale: .5, // 分辨率缩放：0.5表示使用一半分辨率（性能优化）
					depth: true,         // 启用深度纹理（用于深度测试）
					bounces: false       // 禁用多次反射（性能考虑）
				} );
				
				// 获取反射器的深度节点（用于深度测试）
				const reflectionDepth = reflection.getDepthNode();
				
				// 旋转反射目标（使其朝上，适合地面反射）
				reflection.target.rotateX( -Math.PI / 2 ); // 旋转-90度
				
				// 将反射目标添加到场景
				scene.add( reflection.target );

				// 创建地板材质
				const floorMaterial = new THREE.MeshStandardNodeMaterial();
				floorMaterial.transparent = true; // 启用透明度
				
				// 设置材质颜色节点（核心的反射模糊着色器）
				floorMaterial.colorNode = Fn( () => {
					// 这是一个复杂的着色器，实现反射模糊效果
					
					// ---------- 9.1 参数范围调整 ----------
					// 将0-1的参数映射到实际使用的范围
					const radiusRange = mix( 0.01, 0.1, radius );     // 模糊半径：0.01到0.1
					const roughnessRange = mix( 0.3, 0.03, roughness ); // 粗糙度：0.03到0.3
					
					// ---------- 9.2 采样反射 ----------
					// 使用sample函数采样反射纹理
					const maskReflection = sample( ( uv ) => {
						// 采样反射颜色
						const sample = reflection.sample( uv );
						
						// 采样深度值
						const mask = reflectionDepth.sample( uv );
						
						// 返回带alpha的颜色
						// sample.rgb - 反射颜色
						// sample.a.mul(mask.r) - Alpha通道乘以深度值
						// 这样可以确保只有有效的反射区域被显示
						return vec4( 
							sample.rgb, 
							sample.a.mul( mask.r ) 
						);
					}, reflection.uvNode ); // 使用反射器的UV坐标
					
					// ---------- 9.3 应用哈希模糊 ----------
					// hashBlur是一种高效的屏幕空间模糊算法
					const reflectionBlurred = hashBlur( 
						maskReflection, // 输入纹理
						radiusRange,    // 模糊半径
						{
							repeats: 40,              // 迭代次数（影响模糊质量）
							premultipliedAlpha: true  // 预乘Alpha（避免边缘黑边）
						}
					);
					
					// ---------- 9.4 反射合成 ----------
					// 创建反射遮罩：基于Alpha和深度
					const reflectionMask = reflectionBlurred.a
						.mul( reflectionDepth )
						.remapClamp( 0, roughnessRange ); // 重新映射到粗糙度范围
					
					const reflectionIntensity = .1; // 反射强度系数
					
					// 计算反射混合因子：遮罩乘以粗糙度
					const reflectionMixFactor = reflectionMask
						.mul( roughness.mul( 2 ).min( 1 ) );
					
					// 混合原始反射和模糊反射
					const reflectionFinal = mix( 
						reflection.rgb,          // 原始反射
						reflectionBlurred.rgb,   // 模糊反射
						reflectionMixFactor      // 混合因子
					).mul( reflectionIntensity ); // 乘以强度
					
					// ---------- 9.5 混合圆环效果 ----------
					// 将反射效果与动态圆环效果相加
					const output = animatedCircle.add( reflectionFinal );
					
					// ---------- 9.6 计算透明度 ----------
					// 创建距离衰减效果（类似雾效）
					// rangeFogFactor(7, 25) - 在7到25单位距离内计算雾效因子
					// .oneMinus() - 反转，使远处更透明
					const opacity = rangeFogFactor( 7, 25 )
						.oneMinus();
					
					// ---------- 9.7 最终输出 ----------
					// 返回包含颜色和透明度的四维向量
					return vec4( output, opacity );
				} )(); // 立即执行函数

				// 创建地板网格
				const floor = new THREE.Mesh( 
					new THREE.BoxGeometry( 50, .001, 50 ), // 50x50的薄盒子
					floorMaterial 
				);
				floor.position.set( 0, 0, 0 );
				scene.add( floor );

				// ---------- 10. 创建渲染器 ----------
				// WebGPURenderer：使用WebGPU API的渲染器（现代GPU渲染）
				renderer = new THREE.WebGPURenderer( { 
					antialias: true // 启用抗锯齿
				} );
				
				// 设置设备像素比（适配高DPI屏幕）
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环函数（每帧调用）
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射
				// 色调映射将HDR颜色映射到LDR显示范围
				renderer.toneMapping = THREE.NeutralToneMapping; // 中性色调映射
				renderer.toneMappingExposure = 1.3; // 曝光值
				
				// 创建调试器（Inspector）
				renderer.inspector = new Inspector();
				
				// 将渲染器的Canvas元素添加到页面
				document.body.appendChild( renderer.domElement );

				// ---------- 11. 创建GUI控制面板 ----------
				// 创建参数调节面板
				gui = renderer.inspector.createParameters( '设置' );
				
				// 添加粗糙度滑块
				gui.add( roughness, 'value', 0, 1 )
					.name( '粗糙度' )
					.onChange( function( value ) {
						// 值变化时的回调（如果需要）
						console.log( '粗糙度设置为:', value );
					});
				
				// 添加模糊半径滑块
				gui.add( radius, 'value', 0, 1 )
					.name( '模糊半径' );
				
				// 添加分辨率缩放滑块
				gui.add( reflection.reflector, 'resolutionScale', .25, 1 )
					.name( '分辨率比例' )
					.step( 0.05 ); // 设置步长

				// ---------- 12. 创建轨道控制器 ----------
				// 轨道控制器提供鼠标/触摸交互
				controls = new OrbitControls( 
					camera,            // 控制的相机
					renderer.domElement // 交互的元素
				);
				
				// 控制器配置
				controls.minDistance = 1;      // 最小缩放距离
				controls.maxDistance = 10;     // 最大缩放距离
				controls.maxPolarAngle = Math.PI / 2; // 最大俯仰角度（90度）
				
				// 自动旋转（当前被注释掉）
				//controls.autoRotate = true;
				//controls.autoRotateSpeed = - .1; // 旋转速度（负值表示反向）
				
				// 设置控制目标点
				controls.target.set( 0, .5, 0 );
				
				// 更新控制器
				controls.update();

				// ---------- 13. 事件监听器 ----------
				// 监听窗口大小变化事件
				window.addEventListener( 'resize', onWindowResize );
				
				// 可选：添加键盘控制
				window.addEventListener( 'keydown', function( event ) {
					switch( event.key ) {
						case 'r': // R键重置控制器
						case 'R':
							controls.reset();
							break;
						case ' ': // 空格键切换自动旋转
							controls.autoRotate = !controls.autoRotate;
							break;
					}
				});

				// ---------- 14. 初始化完成 ----------
				// 可选：在控制台输出初始化信息
				console.log( 'Three.js模糊反射示例已初始化完成' );
				console.log( 'WebGPU渲染器:', renderer );
				console.log( '可用参数:', {
					粗糙度: roughness.value,
					模糊半径: radius.value,
					分辨率比例: reflection.reflector.resolutionScale
				});
			}

			// ==================== 窗口大小变化处理函数 ====================
			function onWindowResize() {
				// 当浏览器窗口大小变化时调用
				
				// 更新相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵（必须调用）
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 可选：更新性能统计
				if ( renderer.info ) {
					renderer.info.reset(); // 重置性能统计
				}
			}

			// ==================== 动画循环函数 ====================
			function animate() {
				// 每一帧调用的函数（通常60次/秒）
				
				// 1. 更新控制器
				// 处理用户输入（鼠标、触摸）
				controls.update();
				
				// 2. 获取时间增量
				// deltaTime：上一帧到当前帧的时间差（秒）
				// 使用deltaTime可以确保动画速度与帧率无关
				const delta = clock.getDelta();
				
				// 3. 更新模型动画
				if ( model && mixer ) {
					// 更新动画混合器
					mixer.update( delta );
				}
				
				// 4. 更新其他动画（如果有）
				// 例如：更新动态效果的时间
				
				// 5. 渲染场景
				// 这是最耗性能的操作：将3D场景绘制到2D画布
				renderer.render( scene, camera );
				
				// 可选：更新性能显示
				if ( renderer.info ) {
					// 可以在这里获取帧率、绘制调用次数等信息
					const info = renderer.info;
					// console.log('绘制调用:', info.render.calls);
				}
			}

			// ==================== 模块结束 ====================
			// 注意：模块中的代码不会污染全局作用域
			// 只有通过export导出的内容才能被其他模块访问
		</script>
		
		<!-- 
			页面结束
			注意：所有JavaScript代码都应该放在</body>之前
			这样可以确保DOM完全加载后再执行脚本
		-->
	</body>
</html>