<!-- Three.js GPU路径追踪器 - 代码功能和技术点分析
🎯 核心功能概述
这是一个基于 Three.js 的GPU路径追踪渲染器演示程序，专门用于渲染高质量的乐高X翼战机模型。它实现了物理准确的全局光照渲染，能够生成接近真实世界光照效果的高质量图像。

主要功能模块：
1. 渐进式路径追踪渲染
使用GPU加速的蒙特卡洛路径追踪算法

支持渐进式渲染，图像质量随时间提高

实时显示采样数统计

支持暂停/继续渲染过程

2. 交互式3D查看器
轨道控制器支持鼠标拖拽、缩放、旋转

实时相机参数同步到路径追踪器

自适应窗口大小调整

3. 动态参数控制
实时调整材质属性（粗糙度、金属度）

切换色调映射算法

调整渲染分辨率

控制渲染分块策略

4. 资源加载与管理
异步并行加载LDraw乐高模型和HDR环境贴图

显示加载进度条

智能错误处理和恢复机制

5. 输出功能
支持截图下载为PNG格式

可选择透明背景用于图像合成

🔧 主要技术点详解
1. Three.js 3D渲染框架
场景图管理：使用Three.js的场景对象组织3D元素

相机系统：透视相机（PerspectiveCamera）模拟人眼视角

渲染管线：WebGL 2.0渲染器配合后期处理效果

几何体系统：支持复杂的网格几何体

2. GPU路径追踪算法
蒙特卡洛积分：随机采样估算光照积分

光线追踪：从相机发射光线，追踪与场景的交点

材质BRDF：基于物理的渲染材质模型

全局光照：间接光照和阴影计算

色调映射：ACES Filmic色调映射处理高动态范围

3. 性能优化技术
BVH加速结构：层次包围盒加速光线求交计算

分块渲染：将屏幕分割为多个瓦片并行渲染

渐进式采样：逐步累积采样，避免长时间等待

分辨率缩放：可调整渲染分辨率平衡质量与性能

4. 材质系统
物理材质：使用MeshPhysicalMaterial实现真实材质效果

透明材质处理：将半透明材质转换为透射材质

金属-粗糙度工作流：基于物理的材质参数化

环境贴图照明：使用HDR贴图提供环境光照

5. 模型处理技术
LDraw格式支持：专用乐高模型格式加载器

坐标系转换：LDraw（Y-up）到Three.js（Z-up）的坐标转换

几何体合并：优化渲染性能，减少绘制调用

材质优化：调整原始材质参数以适应路径追踪

6. 现代Web技术
ES6模块系统：使用import/export管理依赖

Import Maps：浏览器原生模块路径映射

异步编程：Promise和async/await处理异步加载

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

7. 交互界面技术
lil-gui：轻量级参数控制面板

事件驱动架构：响应式UI状态更新

实时反馈：渲染参数即时生效

用户友好的控制：滑块、开关、按钮等多种控件

📊 技术架构层次
底层：WebGL和Three.js核心
text
WebGL API ← Three.js渲染器 ← 场景/相机/几何体/材质
中层：路径追踪引擎
text
光线追踪核心 ← BVH加速 ← 材质着色器 ← 采样累积
高层：应用逻辑和UI
text
模型加载 ← 参数控制 ← 交互操作 ← 渲染输出
🚀 关键技术实现细节
1. 渐进式渲染机制
javascript
// 每帧渲染一个样本，逐步积累
pathTracer.renderSample();
// 采样数随时间增加，图像质量提高
samplesEl.innerText = `采样数: ${ Math.floor( pathTracer.samples ) }`;
2. 并行资源加载
javascript
// 同时加载模型和环境贴图
await Promise.all([ envMapPromise, ldrawPromise ]);
// 加载完成后再进行后续设置
3. 智能相机定位
javascript
// 基于模型边界框自动计算最佳相机位置
const bbox = new THREE.Box3().setFromObject( model );
const center = bbox.getCenter();
const radius = bbox.getSize().maxComponent() * 0.4;
4. 径向渐变纹理生成
javascript
// 生成从中心向边缘渐变的透明度纹理
let a = 1.0 - Math.sqrt(xCent**2 + yCent**2);  // 径向距离
a = a ** 1.5;  // 增加对比度
a = a * 1.5;   // 提高亮度
5. 透明材质物理化转换
javascript
// 将半透明材质转换为物理透射材质
newMaterial.transmission = 1.0;  // 完全透射
newMaterial.ior = 1.4;           // 玻璃折射率
newMaterial.thickness = 1.0;     // 材质厚度
🎨 渲染效果特性
1. 逼真的光照效果
柔和阴影：路径追踪产生的自然阴影

环境光遮蔽：角落处的自然暗化效果

全局反射：准确的环境反射和折射

焦散效果：光线通过透明物体的聚焦效应

2. 材质表现
金属表面：逼真的金属反射和光泽

透明材质：真实的折射和色散效果

粗糙表面：微表面散射的漫反射

复杂BRDF：基于物理的材质反射模型

3. 后期处理
色调映射：将HDR颜色映射到显示器范围

抗锯齿：通过超采样减少锯齿

渐进降噪：随着采样增加，噪声逐渐减少

⚡ 性能优化策略
1. 渲染优化
分块并行：多线程GPU瓦片渲染

自适应采样：根据收敛情况调整采样密度

早期终止：对暗部区域减少采样

2. 内存优化
几何体合并：减少GPU绘制调用

纹理复用：共享材质和纹理资源

渐进加载：分批处理大型模型

3. 计算优化
BVH预处理：构建高效的空间索引结构

重要性采样：偏向重要光源方向采样

俄罗斯轮盘：概率性终止光线追踪

🔗 技术依赖关系
核心库：
three.js：3D渲染基础框架

three-gpu-pathtracer：GPU路径追踪实现

three-mesh-bvh：层次包围盒加速

辅助工具：
LDrawLoader：乐高模型格式支持

UltraHDRLoader：HDR图像加载

OrbitControls：交互式相机控制

lil-gui：参数控制界面

📈 应用场景和价值
教育价值：
计算机图形学教学：路径追踪算法可视化

物理渲染演示：真实材质和光照效果展示

WebGL高级应用：现代Web 3D技术示例

实用价值：
产品可视化：高质量的在线产品展示

建筑设计预览：真实光照模拟

游戏开发：离线渲染参考图像

影视预演：快速概念可视化

技术研究：
渲染算法比较：与传统光栅化对比

性能优化研究：GPU计算优化策略

Web技术探索：浏览器端高级图形计算

🎯 技术亮点总结
全GPU加速：充分利用现代GPU并行计算能力

物理准确性：基于物理的光照和材质模型

渐进式交互：边渲染边交互的用户体验

高质量输出：接近离线渲染器的图像质量

Web原生：完全在浏览器中运行，无需插件

开源可扩展：基于开源库，易于修改和扩展 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js GPU路径追踪器 - 乐高X翼战机渲染演示 -->
		<title>Three.js GPU路径追踪器 - 乐高X翼战机渲染演示</title>
		<!-- 字符编码设置为UTF-8，支持多国语言字符 -->
		<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样式表文件main.css -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 内联样式定义，优先级高于外部样式表 -->
		<style>
			/* 主体样式：设置文字颜色为深灰色，背景为白色 */
			body {
				color: #444;
				background-color: white;
			}

			/* 链接样式：设置链接颜色为橙色，增加视觉吸引力 */
			a {
				color: #fb8c00;
			}

			/* 
			棋盘格背景样式类：
			使用CSS线性渐变创建棋盘格图案
				1. 45度角的灰色渐变（从#ddd到透明）
				2. -45度角的灰色渐变（从#ddd到透明）
				3. 45度角的透明到灰色渐变
				4. -45度角的透明到灰色渐变
			这四种渐变组合形成棋盘格效果
			*/
			.checkerboard {
				background-image:
					linear-gradient(45deg, #ddd 25%, transparent 25%),
					linear-gradient(-45deg, #ddd 25%, transparent 25%),
					linear-gradient(45deg, transparent 75%, #ddd 75%),
					linear-gradient(-45度, transparent 75%, #ddd 75%);
				background-size: 20px 20px;  /* 每个棋盘格大小为20x20像素 */
				background-position: 0 0, 0 10px, 10px -10px, -10px 0px;  /* 精确定位四个渐变层 */
			}

			/* 
			GUI渲染信息样式：
			使用CSS自定义属性（变量）设置行高和内边距
			确保GUI中显示采样数的元素与其它控件高度一致
			*/
			.lil-gui .gui-render {
				line-height: var(--widget-height);
				padding: var(--padding);
			}
		</style>
	</head>

	<body>
		<!-- 
			信息显示区域：
			显示项目信息和相关链接，帮助用户了解当前演示
			noopener noreferrer：安全策略，防止目标页面访问window.opener属性
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> GPU路径追踪演示 - 
			<a href="https://github.com/gkjohnson/three-gpu-pathtracer" target="_blank" rel="noopener noreferrer">three-gpu-pathtracer库</a><br/>
			基于Three.js的高保真路径追踪渲染器，加载并渲染乐高X翼战机模型<br/>
			查看 <a href="https://github.com/gkjohnson/three-gpu-pathtracer" target="_blank" rel="noopener noreferrer">主项目仓库</a> 获取更多信息和示例
		</div>

		<!-- 
			模块导入映射表 (Import Maps)：
			定义JavaScript模块的导入路径映射，允许使用简化的模块名称
			这是现代浏览器支持的特性，用于管理模块依赖关系
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"three/examples/": "./",
					"three-gpu-pathtracer": "https://unpkg.com/three-gpu-pathtracer@0.0.22/build/index.module.js",
					"three-mesh-bvh": "https://unpkg.com/three-mesh-bvh@0.7.4/build/index.module.js"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module" 表示这是一个ES6模块，支持import/export语法
			模块中的代码在单独的作用域中执行，不会污染全局命名空间
		-->
		<script type="module">

			// 导入Three.js核心库的所有内容，THREE作为命名空间
			import * as THREE from 'three';

			// 导入轻量级GUI库lil-gui，用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入Three.js的各种插件和工具
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';  // 轨道控制器，用于相机交互
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';  // HDR图像加载器，支持超高动态范围图像
			import { LDrawLoader } from 'three/addons/loaders/LDrawLoader.js';  // LDraw格式加载器，用于加载乐高模型
			import { LDrawUtils } from 'three/addons/utils/LDrawUtils.js';  // LDraw工具函数
			import { LDrawConditionalLineMaterial } from 'three/addons/materials/LDrawConditionalLineMaterial.js';  // LDraw条件线材质

			// 导入GPU路径追踪器相关模块
			import { WebGLPathTracer, BlurredEnvMapGenerator, GradientEquirectTexture } from 'three-gpu-pathtracer';

			// ==================== 全局变量声明 ====================
			// 这些变量在整个应用中使用，用于管理状态和引用重要对象
			
			// DOM元素引用
			let progressBarDiv;  // 加载进度条div元素
			let samplesEl;       // 显示渲染采样数的元素
			
			// Three.js核心对象
			let camera;   // 透视相机，定义观察视角
			let scene;    // 场景对象，包含所有3D元素
			let renderer; // WebGL渲染器，负责渲染场景到画布
			let controls; // 轨道控制器，处理用户交互
			let gui;      // GUI控制器实例
			
			// 应用特定对象
			let pathTracer;    // GPU路径追踪器实例
			let floor;         // 地板网格对象
			let gradientMap;   // 渐变环境贴图纹理

			// ==================== 配置参数对象 ====================
			// 这些参数可以通过GUI界面动态调整，控制渲染和行为
			const params = {
				enable: true,  // 布尔值：是否启用路径追踪渲染（开启/关闭路径追踪）
				toneMapping: true,  // 布尔值：是否启用色调映射（将HDR颜色映射到LDR显示器）
				pause: false,  // 布尔值：是否暂停渲染（停止积累更多采样）
				tiles: 3,  // 整数：渲染平铺数（将屏幕分割为3x3的块进行并行渲染）
				transparentBackground: false,  // 布尔值：是否使用透明背景（用于图像合成）
				resolutionScale: 1,  // 浮点数：分辨率缩放因子（1.0为全分辨率，0.5为半分辨率）
				download: () => {  // 函数：下载当前渲染结果为PNG图像
					// 创建临时下载链接
					const link = document.createElement( 'a' );
					link.download = 'pathtraced-render.png';  // 设置下载文件名
					// 将canvas转换为DataURL（base64编码的PNG图像）
					link.href = renderer.domElement.toDataURL().replace( 'image/png', 'image/octet-stream' );
					link.click();  // 模拟点击触发下载
				},
				roughness: 0.15,  // 浮点数：地板材质粗糙度（0.0为镜面反射，1.0为完全漫反射）
				metalness: 0.9,  // 浮点数：地板材质金属度（0.0为非金属，1.0为金属）
			};

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

			/**
			 * 主初始化函数
			 * 负责设置整个应用的基础架构：
			 * 1. 创建相机、场景、渲染器
			 * 2. 初始化路径追踪器
			 * 3. 设置事件监听器
			 * 4. 创建GUI界面
			 * 5. 加载3D模型
			 */
			function init() {
				// ========== 1. 创建透视相机 ==========
				// 参数：视野角度45度, 宽高比, 近裁剪面1单位, 远裁剪面10000单位
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
				// 设置相机初始位置：x=150, y=200, z=250
				camera.position.set( 150, 200, 250 );

				// ========== 2. 初始化WebGL渲染器 ==========
				renderer = new THREE.WebGLRenderer( { 
					antialias: true,       // 启用抗锯齿，平滑边缘
					alpha: true,           // 启用透明度通道，支持透明背景
					preserveDrawingBuffer: true  // 保留绘图缓冲区，允许toDataURL()截图
				} );
				// 设置设备像素比，适配高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置色调映射算法为ACES Filmic（电影级色调映射）
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ========== 3. 创建渐变环境贴图 ==========
				// 用于场景背景和默认环境照明
				gradientMap = new GradientEquirectTexture();
				gradientMap.topColor.set( 0xeeeeee );  // 顶部颜色：浅灰色
				gradientMap.bottomColor.set( 0xeaeaea );  // 底部颜色：稍浅的灰色
				gradientMap.update();  // 更新纹理数据

				// ========== 4. 初始化GPU路径追踪器 ==========
				pathTracer = new WebGLPathTracer( renderer );
				pathTracer.filterGlossyFactor = 1;  // 光泽过滤因子：控制光泽反射的质量
				pathTracer.minSamples = 3;  // 最小采样数：每个像素至少渲染3次
				pathTracer.renderScale = params.resolutionScale;  // 渲染分辨率缩放
				pathTracer.tiles.set( params.tiles, params.tiles );  // 设置渲染分块为3x3

				// ========== 5. 创建场景 ==========
				scene = new THREE.Scene();
				scene.background = gradientMap;  // 设置场景背景为渐变贴图

				// ========== 6. 创建轨道控制器 ==========
				// 将相机和渲染器画布关联，支持鼠标/触摸交互
				controls = new OrbitControls( camera, renderer.domElement );
				// 监听相机变化事件，当用户交互时更新路径追踪器的相机参数
				controls.addEventListener( 'change', () => {
					pathTracer.updateCamera();
				} );

				// ========== 7. 设置窗口大小变化监听器 ==========
				window.addEventListener( 'resize', onWindowResize );
				// 初始调用一次，确保渲染器尺寸正确
				onWindowResize();

				// ========== 8. 创建加载进度条元素 ==========
				progressBarDiv = document.createElement( 'div' );
				progressBarDiv.innerText = '加载中...';
				// 样式设置：大字体、灰色、居中显示
				progressBarDiv.style.fontSize = '3em';
				progressBarDiv.style.color = '#888';
				progressBarDiv.style.display = 'block';
				progressBarDiv.style.position = 'absolute';
				progressBarDiv.style.top = '50%';
				progressBarDiv.style.width = '100%';
				progressBarDiv.style.textAlign = 'center';

				// ========== 9. 创建GUI控制面板 ==========
				createGUI();

				// ========== 10. 开始加载3D模型 ==========
				loadModel();
			}

			/**
			 * 异步加载3D模型和环境贴图
			 * 使用Promise.all并行加载多个资源，提高加载效率
			 * 加载完成后设置场景并开始渲染
			 */
			async function loadModel() {
				// 更新进度条文本
				progressBarDiv.innerText = '加载中...';

				// 声明变量存储加载的资源
				let model = null;      // LDraw乐高模型
				let environment = null; // HDR环境贴图

				// 初始化进度条
				updateProgressBar( 0 );
				showProgressBar();

				// ========== 并行加载任务1：加载LDraw乐高模型 ==========
				const ldrawPromise =
					new LDrawLoader()  // 创建LDraw加载器实例
						.setConditionalLineMaterial( LDrawConditionalLineMaterial )  // 设置条件线材质
						.setPath( 'models/ldraw/officialLibrary/' )  // 设置模型文件基础路径
						.loadAsync( 'models/7140-1-X-wingFighter.mpd_Packed.mpd', onProgress )  // 异步加载模型文件
						.then( function ( legoGroup ) {
							// 模型加载成功回调函数
							
							// 转换坐标系：LDraw使用Y轴向上，Three.js使用Z轴向上
							legoGroup = LDrawUtils.mergeObject( legoGroup );  // 合并几何体优化性能
							legoGroup.rotation.x = Math.PI;  // 绕X轴旋转180度
							legoGroup.updateMatrixWorld();  // 更新世界矩阵
							model = legoGroup;  // 存储到变量

							// 遍历模型的所有子对象
							legoGroup.traverse( c => {
								// 隐藏线框：在路径追踪中不需要显示线框
								if ( c.isLineSegments ) {
									c.visible = false;
								}

								// 优化材质设置
								if ( c.material ) {
									// 减少粗糙度，使表面更光滑
									c.material.roughness *= 0.25;

									// 处理透明材质：替换为物理材质实现真实折射
									if ( c.material.opacity < 1.0 ) {
										const oldMaterial = c.material;
										// 创建新的物理材质
										const newMaterial = new THREE.MeshPhysicalMaterial();

										// 设置材质属性
										newMaterial.opacity = 1.0;  // 完全不透明（使用transmission控制透明度）
										newMaterial.transmission = 1.0;  // 完全透射（像玻璃一样）
										newMaterial.thickness = 1.0;  // 材质厚度
										newMaterial.ior = 1.4;  // 折射率（类似玻璃）
										newMaterial.roughness = oldMaterial.roughness;  // 保持原有粗糙度
										newMaterial.metalness = 0.0;  // 非金属材质

										// 颜色处理：确保颜色不过于暗淡
										const hsl = {};  // HSL颜色空间对象
										oldMaterial.color.getHSL( hsl );  // 获取原有颜色的HSL值
										hsl.l = Math.max( hsl.l, 0.35 );  // 限制亮度最小值
										newMaterial.color.setHSL( hsl.h, hsl.s, hsl.l );  // 设置新颜色

										// 替换材质
										c.material = newMaterial;
									}
								}
							} );
						} )
						.catch( onError );  // 错误处理

				// ========== 并行加载任务2：加载HDR环境贴图 ==========
				const envMapPromise =
					new UltraHDRLoader()  // 创建HDR加载器
						.setPath( 'textures/equirectangular/' )  // 设置纹理路径
						.loadAsync( 'royal_esplanade_2k.hdr.jpg' )  // 加载HDR环境贴图
						.then( tex => {
							// 创建模糊环境贴图生成器
							const envMapGenerator = new BlurredEnvMapGenerator( renderer );
							// 生成模糊环境贴图（参数0表示最小模糊）
							const blurredEnvMap = envMapGenerator.generate( tex, 0 );
							environment = blurredEnvMap;  // 存储环境贴图
						} )
						.catch( onError );  // 错误处理

				// ========== 等待所有资源加载完成 ==========
				// Promise.all等待所有异步任务完成
				await Promise.all( [ envMapPromise, ldrawPromise ] );

				// ========== 加载完成后的设置 ==========
				hideProgressBar();  // 隐藏进度条
				document.body.classList.add( 'checkerboard' );  // 添加棋盘格背景

				// 设置场景环境贴图
				scene.environment = environment;

				// 计算模型边界框，用于调整相机位置
				const bbox = new THREE.Box3().setFromObject( model );
				const size = bbox.getSize( new THREE.Vector3() );
				const radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.4;  // 计算模型半径

				// 设置控制器初始位置
				controls.target0.copy( bbox.getCenter( new THREE.Vector3() ) );  // 目标点为模型中心
				controls.position0.set( 2.3, 1, 2 ).multiplyScalar( radius ).add( controls.target0 );  // 相机位置
				controls.reset();  // 重置控制器状态

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

				// ========== 创建地板 ==========
				floor = new THREE.Mesh(
					new THREE.PlaneGeometry(),  // 平面几何体
					new THREE.MeshStandardMaterial( {
						side: THREE.DoubleSide,  // 双面渲染
						roughness: params.roughness,  // 使用参数中的粗糙度
						metalness: params.metalness,   // 使用参数中的金属度
						map: generateRadialFloorTexture( 1024 ),  // 使用生成的径向渐变纹理
						transparent: true,  // 启用透明度
					} ),
				);
				floor.scale.setScalar( 2500 );  // 放大地板
				floor.rotation.x = - Math.PI / 2;  // 旋转到水平面（绕X轴旋转-90度）
				floor.position.y = bbox.min.y;  // 放置到模型底部
				scene.add( floor );

				// ========== 开始BVH构建 ==========
				// BVH（层次包围盒）用于加速光线追踪
				progressBarDiv.innerText = '生成BVH加速结构...';
				updateProgressBar( 0 );

				// 设置路径追踪器的场景和相机
				pathTracer.setScene( scene, camera );

				// 开始渲染循环（使用requestAnimationFrame）
				renderer.setAnimationLoop( animate );
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，调整渲染器和相机参数
			 */
			function onWindowResize() {
				// 获取当前窗口尺寸和设备像素比
				const w = window.innerWidth;
				const h = window.innerHeight;
				const dpr = window.devicePixelRatio;

				// 更新渲染器尺寸和像素比
				renderer.setSize( w, h );
				renderer.setPixelRatio( dpr );

				// 更新相机宽高比
				const aspect = w / h;
				camera.aspect = aspect;
				camera.updateProjectionMatrix();  // 必须调用以应用更改

				// 更新路径追踪器的相机参数
				pathTracer.updateCamera();
			}

			/**
			 * 创建GUI控制面板
			 * 使用lil-gui库创建交互式参数控制界面
			 */
			function createGUI() {
				// 如果已存在GUI实例，先销毁
				if ( gui ) {
					gui.destroy();
				}

				// 创建新的GUI实例
				gui = new GUI();
				
				// ========== 添加控制选项 ==========
				
				// 路径追踪开关
				gui.add( params, 'enable' )
					.name( '启用路径追踪' )
					.onChange( value => {
						// 值改变时自动处理，在animate函数中使用
					});
				
				// 暂停渲染开关
				gui.add( params, 'pause' )
					.name( '暂停渲染' );
				
				// 色调映射开关
				gui.add( params, 'toneMapping' )
					.name( '色调映射' );
				
				// 透明背景开关
				gui.add( params, 'transparentBackground' )
					.name( '透明背景' )
					.onChange( v => {
						// 切换场景背景
						scene.background = v ? null : gradientMap;
						// 更新路径追踪器的环境设置
						pathTracer.updateEnvironment();
					} );
				
				// 分辨率缩放滑块
				gui.add( params, 'resolutionScale', 0.1, 1.0, 0.1 )
					.name( '分辨率缩放' )
					.onChange( v => {
						// 更新路径追踪器的渲染比例
						pathTracer.renderScale = v;
						// 重置渲染（清空累积的采样）
						pathTracer.reset();
					} );
				
				// 渲染分块数滑块
				gui.add( params, 'tiles', 1, 6, 1 )
					.name( '渲染分块数' )
					.onChange( v => {
						// 设置渲染分块（v x v网格）
						pathTracer.tiles.set( v, v );
					} );
				
				// 地板粗糙度滑块
				gui.add( params, 'roughness', 0, 1 )
					.name( '地板粗糙度' )
					.onChange( v => {
						// 更新地板材质粗糙度
						floor.material.roughness = v;
						// 通知路径追踪器材质已更新
						pathTracer.updateMaterials();
					} );
				
				// 地板金属度滑块
				gui.add( params, 'metalness', 0, 1 )
					.name( '地板金属度' )
					.onChange( v => {
						// 更新地板材质金属度
						floor.material.metalness = v;
						pathTracer.updateMaterials();
					} );
				
				// 下载图片按钮
				gui.add( params, 'download' )
					.name( '下载图片' );

				// ========== 创建渲染信息面板 ==========
				const renderFolder = gui.addFolder( '渲染信息' );
				
				// 创建显示采样数的元素
				samplesEl = document.createElement( 'div' );
				samplesEl.classList.add( 'gui-render' );
				samplesEl.innerText = '采样数: 0';
				
				// 将元素添加到GUI中
				renderFolder.$children.appendChild( samplesEl );
				renderFolder.open();  // 默认展开文件夹
			}

			// ==================== 工具函数 ====================

			/**
			 * 动画循环函数（每帧调用）
			 * 这是Three.js渲染的核心循环，使用requestAnimationFrame调用
			 * 负责更新场景状态和渲染
			 */
			function animate() {
				// 根据参数设置色调映射
				renderer.toneMapping = params.toneMapping ? 
					THREE.ACESFilmicToneMapping :  // 启用：使用ACES Filmic色调映射
					THREE.NoToneMapping;           // 禁用：不使用色调映射

				// 获取当前采样数（向下取整）
				const samples = Math.floor( pathTracer.samples );
				samplesEl.innerText = `采样数: ${ samples }`;

				// 设置路径追踪器状态
				pathTracer.enablePathTracing = params.enable;  // 启用/禁用路径追踪
				pathTracer.pausePathTracing = params.pause;    // 暂停/继续渲染
				
				// 渲染一个采样（渐进式渲染，每帧累积更多采样）
				pathTracer.renderSample();

				// 再次更新采样数显示（渲染后可能变化）
				samplesEl.innerText = `采样数: ${ Math.floor( pathTracer.samples ) }`;
			}

			/**
			 * 资源加载进度回调函数
			 * 当使用XHR加载资源时，定期调用此函数报告进度
			 * @param {ProgressEvent} xhr - XMLHttpRequest进度事件对象
			 */
			function onProgress( xhr ) {
				// 检查是否可计算进度（Content-Length已知）
				if ( xhr.lengthComputable ) {
					// 计算并更新进度条（0.0到1.0）
					updateProgressBar( xhr.loaded / xhr.total );
					// 在控制台输出进度信息
					console.log( Math.round( xhr.loaded / xhr.total * 100 ) + '% 已下载' );
				}
			}

			/**
			 * 错误处理函数
			 * 当资源加载失败时调用
			 * @param {Error} error - 错误对象，包含错误信息
			 */
			function onError( error ) {
				const message = '加载模型时出错';
				// 更新进度条显示错误信息
				progressBarDiv.innerText = message;
				// 在控制台输出错误信息
				console.log( message );
				console.error( error );
			}

			/**
			 * 显示进度条函数
			 * 将进度条元素添加到页面DOM中
			 */
			function showProgressBar() {
				document.body.appendChild( progressBarDiv );
			}

			/**
			 * 隐藏进度条函数
			 * 从页面DOM中移除进度条元素
			 */
			function hideProgressBar() {
				document.body.removeChild( progressBarDiv );
			}

			/**
			 * 更新进度条显示
			 * @param {number} fraction - 进度比例，范围0.0到1.0
			 */
			function updateProgressBar( fraction ) {
				// 将小数转换为百分比并显示
				progressBarDiv.innerText = '加载中... ' + Math.round( fraction * 100 ) + '%';
			}

			/**
			 * 生成径向渐变地板纹理
			 * 创建从中心向边缘渐变的圆形透明度纹理
			 * @param {number} dim - 纹理尺寸（正方形纹理的边长）
			 * @returns {THREE.DataTexture} - 生成的Three.js数据纹理
			 */
			function generateRadialFloorTexture( dim ) {
				// 创建Uint8Array存储纹理数据（RGBA每个通道1字节）
				// 尺寸：dim x dim 像素，每个像素4个通道（R,G,B,A）
				const data = new Uint8Array( dim * dim * 4 );

				// 遍历每个像素
				for ( let x = 0; x < dim; x ++ ) {
					for ( let y = 0; y < dim; y ++ ) {
						// 将像素坐标归一化到[0, 1]范围
						const xNorm = x / ( dim - 1 );
						const yNorm = y / ( dim - 1 );

						// 将归一化坐标中心化到[-1, 1]范围
						const xCent = 2.0 * ( xNorm - 0.5 );
						const yCent = 2.0 * ( yNorm - 0.5 );
						
						// 计算径向距离，并转换为透明度值
						// 距离中心越远，透明度越高（值越小）
						let a = Math.max( Math.min( 1.0 - Math.sqrt( xCent ** 2 + yCent ** 2 ), 1.0 ), 0.0 );
						a = a ** 1.5;  // 应用幂函数增加对比度（1.5次方）
						a = a * 1.5;   // 增加亮度因子
						a = Math.min( a, 1.0 );  // 限制最大值不超过1.0

						// 计算数据数组中的索引
						const i = y * dim + x;
						// 设置RGBA值
						data[ i * 4 + 0 ] = 255;  // 红色通道：全白
						data[ i * 4 + 1 ] = 255;  // 绿色通道：全白
						data[ i * 4 + 2 ] = 255;  // 蓝色通道：全白
						data[ i * 4 + 3 ] = a * 255;  // 透明度通道：根据计算的值
					}
				}

				// 创建Three.js数据纹理
				const tex = new THREE.DataTexture( data, dim, dim );
				tex.format = THREE.RGBAFormat;  // 纹理格式：RGBA
				tex.type = THREE.UnsignedByteType;  // 数据类型：无符号字节（0-255）
				tex.minFilter = THREE.LinearFilter;  // 缩小时使用线性过滤
				tex.magFilter = THREE.LinearFilter;  // 放大时使用线性过滤
				tex.wrapS = THREE.RepeatWrapping;  // S方向（水平）重复
				tex.wrapT = THREE.RepeatWrapping;  // T方向（垂直）重复
				tex.needsUpdate = true;  // 标记纹理需要更新到GPU
				return tex;
			}

		</script>

		<!-- 
			LDraw.org版权声明部分
			根据CC BY 2.0许可要求，使用LDraw零件库时需要显示此声明
			固定在页面左下角，使用半透明背景
		-->
		<div style="display: block; position: absolute; bottom: 8px; left: 8px; width: 160px; padding: 10px; background-color: #F3F7F8;">
			<center>
				<!-- LDraw.org Logo链接 -->
				<a href="http://www.ldraw.org"><img style="width: 145px" src="models/ldraw/ldraw_org_logo/Stamp145.png"></a>
				<br />
				<!-- 版权声明文字链接 -->
				<a href="http://www.ldraw.org/">本软件使用LDraw零件库</a>
			</center>
		</div>

	</body>
</html>