<!-- 代码功能概述
这是一个使用Three.js WebGPU版本实现的背景区域特效（Backdrop Area）演示程序，展示了如何在WebGPU环境下使用TSL（Three.js着色器语言）创建高级屏幕空间特效。核心效果是通过透明的立方体盒子，在其内部区域显示屏幕背景的四种不同特效变体。

主要技术点详解
1. WebGPU渲染器
下一代图形API：替代WebGL，提供更好的性能、更现代的功能和更低的CPU开销

优势：

更接近底层的硬件控制

多线程支持

改进的着色器语言（WGSL）

计算着色器支持

2. TSL（Three.js着色器语言）
声明式着色器编程：使用节点图方式构建着色器，无需编写GLSL/WGSL代码

核心功能：

节点连接：将数学运算、纹理采样、几何计算等作为节点连接

实时编译：自动将节点图编译为WGSL代码

类型安全：强类型的着色器节点系统

3. 屏幕空间特效技术
3.1 深度距离场
javascript
const depthDistance = viewportLinearDepth.distance(linearDepth());
原理：比较场景深度（viewportLinearDepth）与当前渲染对象深度（linearDepth()）

作用：创建距离场，值越大表示离背景越远，值越小表示离背景越近

应用：用于边缘检测、景深效果、深度感知模糊

3.2 视口共享纹理
javascript
viewportSharedTexture()
功能：访问屏幕空间渲染结果作为纹理

用途：实现屏幕空间后处理效果

示例应用：

模糊背景：hashBlur(viewportSharedTexture(), ...)

像素化效果：viewportSharedTexture(screenUV.mul(100).floor().div(100))

3.3 哈希模糊算法
javascript
import { hashBlur } from 'three/addons/tsl/display/hashBlur.js';
特点：高效的屏幕空间模糊算法

优势：相比传统高斯模糊，性能更好，效果相似

参数：

输入纹理：屏幕空间纹理

模糊强度：基于深度距离场的动态值

4. 四种特效材质实现
4.1 模糊材质（默认）
javascript
// 创建距离场透明度
const depthAlphaNode = depthDistance.oneMinus().smoothstep(.90, 2).mul(10).saturate();

// 创建深度模糊效果
const depthBlurred = hashBlur(viewportSharedTexture(), 
  depthDistance.smoothstep(0, .6).mul(40).clamp().mul(.1));

// 组合效果
blurredBlur.backdropNode = depthBlurred.add(
  depthAlphaNode.mix(color(0x003399).mul(.3), 0)
);
效果：基于深度的景深模糊，边缘有蓝色色调

技术：深度感知模糊 + 颜色混合

4.2 深度材质
javascript
depthMaterial.backdropNode = depthAlphaNode;
效果：直接显示深度信息作为视觉效果

用途：调试深度缓冲区，可视化距离信息

4.3 棋盘格材质
javascript
checkerMaterial.backdropAlphaNode = checker(uv().mul(3).mul(modelScale.xy));
效果：基于UV坐标的棋盘格图案，随模型缩放

技术：UV空间图案生成 + 模型缩放适应

4.4 像素化材质
javascript
pixelMaterial.backdropNode = viewportSharedTexture(
  screenUV.mul(100).floor().div(100)
);
效果：复古像素艺术效果

技术：UV坐标离散化（像素化）纹理采样

5. 动态背景系统
javascript
scene.backgroundNode = hue(
  screenUV.y.mix(color(0x66bbff), color(0x4466ff)),
  time.mul(0.1)
);
效果：垂直渐变背景 + 动态色调变化

节点链：

屏幕Y坐标混合两种蓝色

随时间变化的色调调整

创建动态天空效果

6. 三维场景组件
6.1 3D模型加载
javascript
const loader = new GLTFLoader();
loader.load('models/gltf/Michelle.glb', function(gltf) {
  // 加载GLTF模型
  // 创建动画混合器
  // 播放动画
});
格式：GLTF/GLB（现代3D格式）

功能：支持动画、材质、网格等完整3D场景

6.2 动画系统
javascript
const mixer = new THREE.AnimationMixer(object);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
mixer.update(delta);
时间驱动：使用THREE.Clock获取时间增量

动画混合：支持多个动画片段的混合

7. 交互与调试系统
7.1 轨道控制器
javascript
const controls = new OrbitControls(camera, renderer.domElement);
功能：鼠标拖拽旋转、缩放、平移

阻尼效果：平滑的交互体验

7.2 调试检查器
javascript
import { Inspector } from 'three/addons/inspector/Inspector.js';
renderer.inspector = new Inspector();
实时调试：查看场景图、材质、渲染状态

参数调整：实时修改场景参数

7.3 GUI控制系统
javascript
const gui = renderer.inspector.createParameters('场景设置');
gui.add(box.scale, 'x', 0.1, 2, 0.01).name('盒子宽度');
gui.add(options, 'material', ['blurred', 'depth', 'checker', 'pixel'])
   .onChange(name => box.material = materials[name]);
实时控制：调整盒子大小

材质切换：四种特效即时切换

8. 性能优化技术
8.1 透明度与深度处理
javascript
transparent: true,
depthWrite: false,
renderOrder: 1
渲染顺序控制：确保透明物体正确渲染

深度写入禁用：避免透明物体的深度冲突

8.2 色调映射
javascript
renderer.toneMapping = THREE.NeutralToneMapping;
renderer.toneMappingExposure = .9;
中性色调映射：自然的颜色转换

曝光控制：调整场景亮度

9. 响应式设计
javascript
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应：自动适配窗口大小变化

投影矩阵更新：保持正确的透视关系

技术栈总结
技术	版本/类型	作用
Three.js	WebGPU版本	3D渲染引擎
WebGPU	现代图形API	底层图形渲染
TSL	Three.js着色器语言	声明式着色器编程
GLTF	3D模型格式	加载动画模型
OrbitControls	交互控件	3D场景导航
Inspector	调试工具	实时场景调试
哈希模糊	后处理算法	屏幕空间模糊
应用场景
游戏开发：景深效果、特殊能力视觉效果

数据可视化：3D图表中的焦点区域突出

虚拟现实：透视效果、界面元素

创意编码：艺术性视觉效果展示

教育演示：图形学概念可视化

创新亮点
无需后处理通道：特效直接集成在材质中，性能更好

深度感知效果：基于场景深度的智能模糊

实时切换：四种特效即时切换，无卡顿

完全声明式：使用TSL节点，无需编写底层着色器代码

现代API：充分利用WebGPU的新特性 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示示例名称和使用的技术 -->
		<title>Three.js WebGPU 示例 - 背景区域特效</title>
		<!-- 字符编码设置：使用UTF-8以支持中文 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁用用户缩放 -->
		<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="example.css">
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- three.js 官方LOGO链接 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link" title="访问Three.js官网">
				<!-- 这里通常是Three.js的LOGO图片或图标 -->
			</a>

			<!-- 标题区域：显示项目名称和当前示例名称 -->
			<div class="title-wrapper">
				<!-- three.js 主链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 示例名称分隔符和当前示例名称 -->
				<span> - 背景区域特效示例</span>
			</div>

			<!-- 示例描述文字 -->
			<small>
				这是一个展示Three.js WebGPU版本背景区域特效的示例。<br>
				通过WebGPU渲染器和TSL着色器语言实现多种高级视觉效果。
			</small>
		</div>

		<!-- 导入映射配置：定义模块路径别名，便于模块化开发 -->
		<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>

		<!-- 主JavaScript模块：使用ES6模块语法 -->
		<script type="module">

			// ==================== 导入模块 ====================
			
			// 导入Three.js WebGPU版本的核心库
			// * as THREE: 将three.webgpu模块的所有导出内容命名为THREE对象
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入着色器节点函数
			// color: 颜色节点，用于创建和操作颜色值
			// positionWorld: 世界空间位置节点，获取模型在世界坐标系中的位置
			// linearDepth: 线性深度节点，计算从相机到片段的线性距离
			// viewportLinearDepth: 视口线性深度节点，获取整个场景的深度信息
			// viewportSharedTexture: 视口共享纹理节点，访问屏幕空间纹理
			// screenUV: 屏幕UV坐标节点，标准化屏幕坐标(0-1范围)
			// hue: 色调调整节点，修改颜色的色调值
			// time: 时间节点，提供当前时间值用于动画效果
			// checker: 棋盘格图案生成节点
			// uv: UV坐标节点，获取纹理坐标
			// modelScale: 模型缩放节点，获取模型的缩放比例
			import { color, positionWorld, linearDepth, viewportLinearDepth, viewportSharedTexture, screenUV, hue, time, checker, uv, modelScale } from 'three/tsl';
			
			// 导入哈希模糊效果函数：一种高效的屏幕空间模糊算法
			import { hashBlur } from 'three/addons/tsl/display/hashBlur.js';

			// 导入调试检查器：用于实时调试和查看场景参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			
			// 导入GLTF加载器：用于加载GLTF/GLB格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入轨道控制器：实现鼠标拖拽旋转、缩放等交互功能
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ==================== 全局变量声明 ====================
			
			// 核心Three.js对象
			let camera;     // 相机：定义观察者的视角和投影方式
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D画布上
			
			// 动画相关对象
			let mixer;      // 动画混合器：管理和混合多个动画片段
			let clock;      // 时钟：用于精确的时间计算和动画驱动

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

			/**
			 * 初始化函数 - Three.js应用程序的主要初始化入口点
			 * 
			 * 功能概述：
			 * 1. 创建相机、场景、渲染器等核心对象
			 * 2. 设置场景光照和环境
			 * 3. 加载3D模型并设置动画
			 * 4. 创建特效材质和几何体
			 * 5. 配置渲染器和交互控制
			 * 6. 创建用户界面控件
			 */
			function init() {

				// ========== 1. 相机设置 ==========
				
				// 创建透视相机（Perspective Camera）
				// 参数说明：
				// 50 - 视野角度（FOV），单位：度，影响视角的宽窄
				// window.innerWidth / window.innerHeight - 宽高比，根据窗口尺寸计算
				// 0.25 - 近裁剪面距离，相机能看到的最近距离
				// 25 - 远裁剪面距离，相机能看到的最远距离
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 25 );
				
				// 设置相机初始位置（x, y, z坐标）
				camera.position.set( 3, 2, 3 );

				// ========== 2. 场景设置 ==========
				
				// 创建主场景对象
				scene = new THREE.Scene();
				
				// 设置场景背景（使用TSL着色器节点动态生成）
				// 背景效果说明：
				// 1. screenUV.y.mix(color(0x66bbff), color(0x4466ff)): 
				//    根据屏幕Y坐标在浅蓝色(#66bbff)和深蓝色(#4466ff)之间混合
				// 2. time.mul(0.1): 时间乘以0.1，减慢色调变化速度
				// 3. hue(...): 对混合后的颜色应用色调变化，创建动态渐变背景
				scene.backgroundNode = hue( 
					screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) ), 
					time.mul( 0.1 ) 
				);
				
				// 设置相机观察点（看向场景中心偏上位置）
				camera.lookAt( 0, 1, 0 );

				// ========== 3. 时间系统设置 ==========
				
				// 创建Three.js时钟对象
				// 用于获取精确的时间增量，驱动动画和特效
				clock = new THREE.Clock();

				// ========== 4. 光照设置 ==========
				
				// 创建环境光（Ambient Light）
				// 环境光均匀照亮所有表面，没有方向性
				// 参数说明：
				// 0xffffff - 白色光
				// 2.5 - 光照强度，值越大越亮
				const ambient = new THREE.AmbientLight( 0xffffff, 2.5 );
				scene.add( ambient );
			
				// ========== 5. 3D模型加载 ==========
				
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				
				// 加载GLTF模型文件
				// 'models/gltf/Michelle.glb' - 模型文件路径
				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
					
					// 加载完成后的回调函数，参数gltf包含加载的模型数据

					// 获取模型场景对象（包含所有模型网格、材质等）
					const object = gltf.scene;
					
					// 创建动画混合器，用于控制模型动画
					// 参数：要应用动画的3D对象
					mixer = new THREE.AnimationMixer( object );

					// 获取模型中的第一个动画片段
					// gltf.animations[0] - 模型文件中的第一个动画
					const action = mixer.clipAction( gltf.animations[ 0 ] );
					
					// 播放动画
					action.play();

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

				} );

				// ========== 6. 特效材质创建 ==========
				
				// 6.1 深度距离场计算（核心特效基础）
				
				// 深度距离场：计算当前渲染片段与场景深度之间的差异
				// viewportLinearDepth: 获取当前像素点对应的场景深度值
				// linearDepth(): 计算当前模型表面的深度值
				// .distance(): 计算两个深度值之间的差异，创建距离场
				// 这个距离场值越小表示越接近背景，值越大表示越接近前景
				const depthDistance = viewportLinearDepth.distance( linearDepth() );

				// 6.2 创建深度透明度节点
				// 这个节点用于控制特效的透明度渐变
				// 节点链说明（从右到左）：
				// 1. depthDistance: 深度距离场值
				// 2. .oneMinus(): 取反（1 - 值），使边缘更透明
				// 3. .smoothstep(.90, 2): 平滑过渡函数，在0.90到2之间创建平滑过渡
				// 4. .mul(10): 乘以10增强效果强度
				// 5. .saturate(): 限制值在0-1范围内（饱和函数）
				const depthAlphaNode = depthDistance.oneMinus().smoothstep( .90, 2 ).mul( 10 ).saturate();
				
				// 6.3 创建模糊深度效果
				// 这个效果用于背景的模糊处理
				// 参数说明：
				// 1. viewportSharedTexture(): 获取屏幕空间的共享纹理
				// 2. depthDistance.smoothstep(0, .6).mul(40).clamp().mul(.1): 
				//    - smoothstep(0, .6): 创建0到0.6的平滑过渡
				//    - .mul(40): 乘以40增强模糊强度
				//    - .clamp(): 限制值在0-1范围内
				//    - .mul(.1): 乘以0.1减弱最终模糊强度
				const depthBlurred = hashBlur( 
					viewportSharedTexture(), 
					depthDistance.smoothstep( 0, .6 ).mul( 40 ).clamp().mul( .1 ) 
				);

				// 6.4 创建模糊背景材质
				// 这是主要的特效材质之一，实现背景模糊效果
				const blurredBlur = new THREE.MeshBasicNodeMaterial();
				// 设置背景节点：组合模糊效果和颜色混合
				// depthBlurred: 基础的模糊效果
				// depthAlphaNode.mix(color(0x003399).mul(.3), 0): 
				//    - 根据深度透明度在深蓝色和透明之间混合
				//    - color(0x003399).mul(.3): 深蓝色并降低亮度
				//    - .add(): 将模糊效果和颜色效果叠加
				blurredBlur.backdropNode = depthBlurred.add( 
					depthAlphaNode.mix( color( 0x003399 ).mul( .3 ), 0 ) 
				);
				blurredBlur.transparent = true;       // 启用透明度
				blurredBlur.side = THREE.DoubleSide;  // 双面渲染：内外表面都可见
				blurredBlur.depthWrite = false;       // 可选：禁用深度写入，防止深度冲突

				// 6.5 创建深度材质
				// 这个材质直接显示深度信息作为视觉效果
				const depthMaterial = new THREE.MeshBasicNodeMaterial();
				depthMaterial.backdropNode = depthAlphaNode;  // 使用深度透明度作为背景
				depthMaterial.transparent = true;
				depthMaterial.side = THREE.DoubleSide;
				depthMaterial.depthWrite = false;

				// 6.6 创建棋盘格材质
				// 实现基于模型UV的棋盘格背景效果
				const checkerMaterial = new THREE.MeshBasicNodeMaterial();
				// 背景使用轻微模糊的屏幕纹理
				checkerMaterial.backdropNode = hashBlur( viewportSharedTexture(), .05 );
				// 背景透明度使用棋盘格图案
				// checker(uv().mul(3).mul(modelScale.xy)):
				// 1. uv(): 获取模型的UV坐标
				// 2. .mul(3): 乘以3增加棋盘格密度
				// 3. .mul(modelScale.xy): 乘以模型缩放比例，使棋盘格随模型缩放
				checkerMaterial.backdropAlphaNode = checker( uv().mul( 3 ).mul( modelScale.xy ) );
				// 设置材质不透明度与背景透明度一致
				checkerMaterial.opacityNode = checkerMaterial.backdropAlphaNode;
				checkerMaterial.transparent = true;
				checkerMaterial.side = THREE.DoubleSide;
				checkerMaterial.depthWrite = false;

				// 6.7 创建像素化材质
				// 实现复古的像素化视觉效果
				const pixelMaterial = new THREE.MeshBasicNodeMaterial();
				// 背景使用像素化的屏幕纹理
				// screenUV.mul(100).floor().div(100):
				// 1. .mul(100): 将UV坐标放大100倍
				// 2. .floor(): 向下取整，创建像素块效果
				// 3. .div(100): 除以100恢复0-1范围
				pixelMaterial.backdropNode = viewportSharedTexture( 
					screenUV.mul( 100 ).floor().div( 100 ) 
				);
				pixelMaterial.transparent = true;
				pixelMaterial.depthWrite = false;

				// ========== 7. 几何体创建 ==========
				
				// 7.1 创建立方体（盒子）并应用模糊材质
				// 这个立方体是特效的主要展示对象
				const box = new THREE.Mesh( 
					new THREE.BoxGeometry( 2, 2, 2 ),  // 创建立方体几何，尺寸2x2x2
					blurredBlur                         // 应用模糊材质
				);
				box.position.set( 0, 1, 0 );  // 设置位置：场景中心，高度为1
				box.renderOrder = 1;          // 渲染顺序：确保盒子在背景之上渲染
				box.name = "特效盒子";        // 设置对象名称，便于调试识别
				scene.add( box );

				// 7.2 创建地板
				// 作为场景的基础平面，提供空间参考
				const floor = new THREE.Mesh( 
					new THREE.BoxGeometry( 5, .01, 5 ),  // 扁平盒子作为地板，厚度很薄
					new THREE.MeshBasicNodeMaterial( {
						color: 0xff6600,  // 橙色，提供视觉对比
						// 透明度节点：创建径向渐变透明度
						// positionWorld.xz.distance(0): 计算世界XZ平面到原点的距离
						// .oneMinus(): 取反，使中心透明边缘不透明
						// .clamp(): 限制在0-1范围内
						opacityNode: positionWorld.xz.distance( 0 ).oneMinus().clamp(),
						transparent: true,   // 启用透明度
						depthWrite: false    // 禁用深度写入，防止深度冲突
					} ) 
				);
				floor.position.set( 0, 0, 0 );  // 设置位置：场景底部
				floor.name = "渐变地板";        // 设置对象名称
				scene.add( floor );

				// ========== 8. 渲染器设置 ==========
				
				// 创建WebGPU渲染器实例
				// WebGPU是新一代图形API，相比WebGL有更好的性能和功能
				// 注释掉的{ antialias: true }参数可用于启用抗锯齿
				renderer = new THREE.WebGPURenderer( /*{ antialias: true }*/ );
				
				// 设置设备像素比
				// window.devicePixelRatio: 获取设备的物理像素与逻辑像素比例
				// 高DPI屏幕上提高此值可获得更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射（Tone Mapping）
				// 色调映射将HDR（高动态范围）颜色转换到LDR（低动态范围）显示设备
				renderer.toneMapping = THREE.NeutralToneMapping;  // 中性色调映射，保持颜色自然
				renderer.toneMappingExposure = .9;  // 曝光值，控制整体亮度
				
				// 添加调试检查器
				// Inspector提供实时查看和调整场景参数的功能
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ========== 9. 交互控制设置 ==========
				
				// 创建轨道控制器（Orbit Controls）
				// 提供鼠标拖拽旋转、缩放等交互功能
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 1, 0 );  // 设置控制目标点（旋转中心）
				controls.update();               // 初始化更新控制器状态
				
				// 控制器配置（可选的进阶设置）
				controls.enableDamping = true;      // 启用阻尼效果，使旋转更平滑
				controls.dampingFactor = 0.05;      // 阻尼系数
				controls.rotateSpeed = 0.5;         // 旋转速度
				controls.zoomSpeed = 0.5;           // 缩放速度
				controls.panSpeed = 0.5;            // 平移速度

				// ========== 10. 事件监听器 ==========
				
				// 监听窗口大小变化事件
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

				// ========== 11. 图形用户界面（GUI）创建 ==========
				
				// 11.1 材质映射表
				// 将材质名称与材质对象关联，便于GUI切换
				const materials = {
					'blurred': blurredBlur,     // 模糊特效材质
					'depth': depthMaterial,     // 深度特效材质
					'checker': checkerMaterial, // 棋盘格特效材质
					'pixel': pixelMaterial      // 像素化特效材质
				};

				// 11.2 当前选项配置
				// 存储GUI的当前选择状态
				const options = { 
					material: 'blurred'  // 默认选中模糊材质
				};
				
				// 初始设置盒子材质
				box.material = materials[ options.material ];

				// 11.3 创建GUI面板
				// 使用Three.js Inspector创建参数控制面板
				const gui = renderer.inspector.createParameters( '场景设置' );
				
				// 添加盒子X轴缩放控制滑块
				// 参数说明：
				// box.scale, 'x' - 控制的对象和属性
				// 0.1, 2 - 最小值、最大值
				// 0.01 - 滑块步进值
				gui.add( box.scale, 'x', 0.1, 2, 0.01 )
				   .name( '盒子宽度' )  // 显示名称
				   .onChange( function( value ) {
					   // 可选：缩放改变时的回调函数
					   console.log( '盒子X轴缩放:', value );
				   } );
				
				// 添加盒子Y轴缩放控制滑块
				gui.add( box.scale, 'y', 0.1, 2, 0.01 )
				   .name( '盒子高度' );
				
				// 添加盒子Z轴缩放控制滑块（可选）
				gui.add( box.scale, 'z', 0.1, 2, 0.01 )
				   .name( '盒子深度' );
				
				// 添加材质选择下拉菜单
				// Object.keys(materials): 获取材质名称数组 ['blurred', 'depth', 'checker', 'pixel']
				gui.add( options, 'material', Object.keys( materials ) )
				   .name( '特效材质' )
				   .onChange( function( name ) {
					   // 材质改变时的回调函数
					   console.log( '切换材质:', name );
					   // 更新盒子材质
					   box.material = materials[ name ];
					   
					   // 可选：根据材质调整其他参数
					   switch( name ) {
						   case 'blurred':
							   box.scale.set( 2, 2, 2 );  // 恢复默认大小
							   break;
						   case 'checker':
							   box.scale.set( 1.5, 1.5, 1.5 );  // 调整到更适合查看棋盘格的大小
							   break;
						   default:
							   box.scale.set( 2, 2, 2 );
					   }
				   } );
				
				// 可选：添加更多控制项
				// 添加背景颜色控制
				const bgColors = {
					'蓝色渐变': { color1: 0x66bbff, color2: 0x4466ff },
					'紫色渐变': { color1: 0xbb66ff, color2: 0x8844ff },
					'绿色渐变': { color1: 0x66ffbb, color2: 0x44ff88 }
				};
				
				let bgOption = '蓝色渐变';
				gui.add( { background: bgOption }, 'background', Object.keys( bgColors ) )
				   .name( '背景颜色' )
				   .onChange( function( name ) {
					   const colors = bgColors[ name ];
					   // 动态更新背景节点
					   scene.backgroundNode = hue( 
						   screenUV.y.mix( color( colors.color1 ), color( colors.color2 ) ), 
						   time.mul( 0.1 ) 
					   );
				   } );

				// 11.4 添加性能监视器（可选）
				// 如果需要监控帧率，可以添加stats.js
				// const stats = new Stats();
				// stats.showPanel(0); // 0: fps, 1: ms, 2: mb
				// document.body.appendChild(stats.dom);
				// 然后在animate函数中调用 stats.update();

				// ========== 12. 初始化完成提示 ==========
				
				console.log( 'Three.js WebGPU 背景区域特效示例已初始化完成！' );
				console.log( '可用操作：' );
				console.log( '1. 鼠标拖拽旋转视角' );
				console.log( '2. 右侧面板调整参数' );
				console.log( '3. 按H键显示/隐藏帮助' );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，确保场景正确适配新尺寸
			 */
			function onWindowResize() {

				// 更新相机宽高比
				// 保持相机的视野比例与窗口比例一致
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 当相机参数改变后必须调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保渲染输出与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 可选：更新后期处理或其他依赖窗口大小的效果
				// 如果有后期处理通道，这里可能需要更新它们的尺寸
				
				console.log( '窗口尺寸已更新:', window.innerWidth, 'x', window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用，用于更新动画和渲染场景
			 */
			function animate() {

				// 获取时间增量（delta time）
				// 表示上一帧到当前帧经过的时间（秒）
				// 使用时间增量可以使动画速度与帧率无关
				const delta = clock.getDelta();
				
				// 可选：计算帧率（FPS）
				// const fps = 1 / delta;

				// 更新动画混合器（如果存在）
				// 驱动3D模型的动画播放
				if ( mixer ) {
					mixer.update( delta );
					
					// 可选：获取动画播放进度
					// const time = mixer.time;
					// const duration = mixer._actions[0]._clip.duration;
					// const progress = time / duration;
				}

				// 可选：更新其他动画或特效
				// 例如：旋转盒子、移动物体等
				// box.rotation.y += delta * 0.5; // 每秒钟旋转180度

				// 渲染场景
				// 这是Three.js的核心渲染调用
				// 参数：场景对象、相机对象
				renderer.render( scene, camera );
				
				// 可选：如果需要后期处理，这里调用composer.render()
				
				// 可选：更新性能监视器
				// if (stats) stats.update();

				// 可选：记录帧时间用于性能分析
				// console.timeEnd('frame');

			}

			// ==================== 可选的辅助功能 ====================
			
			// 键盘快捷键支持（示例）
			window.addEventListener('keydown', function(event) {
				switch(event.key.toLowerCase()) {
					case 'h': // H键：显示/隐藏帮助
						const infoDiv = document.getElementById('info');
						infoDiv.style.display = infoDiv.style.display === 'none' ? 'block' : 'none';
						break;
					case ' ': // 空格键：暂停/恢复动画
						if (mixer) {
							mixer.timeScale = mixer.timeScale === 0 ? 1 : 0;
						}
						break;
					case 'r': // R键：重置相机视角
						camera.position.set(3, 2, 3);
						camera.lookAt(0, 1, 0);
						break;
				}
			});

			// 错误处理
			window.addEventListener('error', function(event) {
				console.error('发生错误:', event.error);
				// 可选：在页面上显示错误信息
				const errorDiv = document.createElement('div');
				errorDiv.style.cssText = 'position:fixed; top:0; left:0; right:0; background:red; color:white; padding:10px; z-index:10000;';
				errorDiv.textContent = '错误: ' + event.error.message;
				document.body.appendChild(errorDiv);
			});

		</script>
	</body>
</html>