<!-- 代码功能和技术点详细说明
一、主要功能概述
1. 核心功能：交互式景深效果
景深模拟：模拟摄影机焦点效果，焦点区域清晰，远离焦点区域模糊

交互控制：用户点击场景任意位置，焦点自动平滑移动至该点

实时调节：通过GUI界面动态调整景深参数（模糊大小、清晰范围等）

3D场景展示：展示一个完整的浴室场景模型，包含动画和光照

2. 用户体验特性
直观交互：鼠标点击切换焦点，轨道控制旋转场景

视觉反馈：焦点移动时有平滑动画过渡

参数调试：实时调整效果参数，立即看到变化

跨平台：支持桌面和移动设备

二、技术架构详解
1. 渲染引擎层
WebGPU渲染器
javascript
// 使用新一代图形API
renderer = new THREE.WebGPURenderer();
技术优势：

相比WebGL有更好的性能和多线程支持

更低的CPU开销，更高的绘制调用效率

支持现代GPU特性如计算着色器

渲染管线配置
javascript
renderer.setPixelRatio(window.devicePixelRatio);  // 高DPI支持
renderer.toneMapping = THREE.NeutralToneMapping;  // HDR色调映射
renderer.setAnimationLoop(animate);              // 请求动画帧
2. 场景与资源管理
3D模型加载
javascript
// GLTF + Draco压缩组合
loader.setDRACOLoader(dracoLoader);
const gltf = await loader.loadAsync('models/gltf/bath_day.glb');
GLTF格式：标准的3D传输格式，支持几何、材质、动画

Draco压缩：Google的几何压缩算法，减少70-90%文件大小

动画系统：内置骨骼动画支持

环境光照
javascript
// HDR环境贴图
const envMap = await hdrLoader.loadAsync('textures/spruit_sunrise_2k.hdr.jpg');
scene.environment = envMap;
HDR照明：高动态范围图像提供真实光照

物理渲染：基于物理的材质和光照计算

反射效果：环境贴图用于物体表面反射

3. 后处理管道架构
节点图(Node Graph)设计
text
原始渲染 → [颜色纹理] → 盒式模糊 → 景深混合 → FXAA → 屏幕输出
         ↘ [深度纹理] ↗
关键技术实现
a. 盒式模糊算法

javascript
const scenePassBlurred = boxBlur(scenePassColor, {
    size: blurSize,      // 卷积核大小
    separation: blurSpread // 采样间隔
});
原理：对每个像素，取其周围像素颜色的平均值

优化：可分离的卷积核（先水平后垂直），复杂度O(n)而不是O(n²)

参数：

size: 决定模糊强度（核的大小）

separation: 决定模糊的分散程度

b. 景深混合算法

javascript
const blur = smoothstep(minDistance, maxDistance, depthDifference);
const dofPass = mix(scenePassColor, scenePassBlurred, blur);
深度比较：计算每个像素与焦点平面的深度差

平滑过渡：使用smoothstep函数在清晰和模糊之间平滑过渡

混合控制：根据深度差线性混合原始图像和模糊图像

c. 抗锯齿处理

javascript
const fxaaPass = fxaa(outputPass);
FXAA算法：快速近似抗锯齿，后处理技术

优势：性能开销小，对动态场景效果好

时机：在景深效果后应用，避免模糊算法放大锯齿

4. 交互系统
射线检测机制
javascript
raycaster.setFromCamera(pointerCoords, camera);
const intersects = raycaster.intersectObject(model);
坐标转换：屏幕坐标 → NDC坐标 → 世界射线

碰撞检测：计算射线与模型三角面的交点

结果排序：返回按距离排序的交点列表

补间动画系统
javascript
new TWEEN.Tween(focusPoint)
    .to(intersects[0].point, 500)
    .easing(TWEEN.Easing.Cubic.InOut)
    .start();
缓动函数：三次缓入缓出，提供自然的加速减速效果

时间控制：500毫秒完成动画，帧率无关

状态管理：自动处理动画开始、更新、结束

5. 坐标空间转换系统
多空间坐标系
text
模型空间 → 世界空间 → 观察空间 → 裁剪空间 → 屏幕空间
焦点位置转换
javascript
// 世界空间 → 观察空间
focusPointView.value.copy(focusPoint)
    .applyMatrix4(camera.matrixWorldInverse);
矩阵运算：使用相机逆矩阵进行空间转换

实时更新：每帧更新，响应相机移动

着色器传递：通过uniform变量传递到GPU

三、核心技术点
1. TSL(Three.js Shader Language)
javascript
import { mix, pass, smoothstep, uniform } from 'three/tsl';
声明式编程：描述数据流而非具体实现

节点图：可视化着色器逻辑

实时编译：运行时GLSL代码生成

调试支持：可连接Inspector调试

2. 深度缓冲技术
javascript
const scenePassViewZ = scenePass.getViewZNode();
精度管理：使用浮点深度缓冲提高精度

线性化：将非线性深度值转换为线性距离

重用：一次渲染，多次使用深度信息

3. Uniform变量系统
javascript
const blurSize = uniform(2);
const focusPointView = uniform(vec3());
CPU-GPU通信：JavaScript变量与着色器变量绑定

动态更新：值改变时自动同步到GPU

类型安全：严格的类型检查和转换

4. 模块化后处理框架
javascript
postProcessing = new THREE.PostProcessing(renderer);
postProcessing.outputNode = fxaaPass;
管道式设计：效果可组合、可复用

自动管理：渲染目标、纹理、缓冲区的自动管理

性能优化：智能合并渲染通道

四、性能优化策略
1. 渲染优化
视锥剔除：自动剔除视野外的物体

细节层次：模型包含适当的细节级别

批处理：合并相似材质的绘制调用

2. 内存优化
纹理压缩：HDR贴图使用压缩格式

几何压缩：Draco算法减少顶点数据

缓冲复用：深度和颜色缓冲在多通道间共享

3. 计算优化
近似算法：使用盒式模糊而非高斯模糊（性能更好）

可调质量：参数允许质量/性能权衡

增量更新：只有变化的部分重新计算

五、扩展性和维护性
1. 代码结构
模块化导入：ES6模块化组织

关注点分离：初始化、渲染、交互逻辑分离

配置外部化：参数集中在GUI控制

2. 可扩展点
效果组合：可轻松添加其他后处理效果（Bloom、SSAO等）

输入扩展：支持更多交互方式（手势、键盘等）

平台适配：WebGPU回退到WebGL的机制

3. 调试支持
Inspector集成：内置调试工具

参数可视化：所有效果参数可实时调整

性能监控：可扩展性能计数器 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：three.js WebGPU版本 - 后处理景深效果 - 基础示例
			这个示例展示了使用three.js的WebGPU渲染器实现景深(Depth of Field)效果
		-->
		<title>three.js WebGPU - 后处理景深效果 - 基础示例</title>
		
		<!-- 
			字符编码设置：UTF-8确保中文字符正确显示
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置：针对移动设备优化
			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">
		
		<!-- 
			引入外部CSS样式表
			example.css应该包含页面布局、字体、颜色等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：显示项目标题、描述和版权信息
			id="info"：用于CSS样式和JavaScript选择器
		-->
		<div id="info">
			<!-- 
				three.js官方logo链接
				class="logo-link"：样式类名，可能包含背景图片
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全属性，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装器 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：点击跳转到three.js官网
					three.js是一个基于WebGL的3D图形库
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 子标题：当前示例功能描述 -->
				<span>景深基础效果</span>
			</div>

			<!-- 
				详细描述区域
				<small>标签表示小字号文本
			-->
			<small>
				<!-- 
					第一行：功能介绍
					使用简单的盒式模糊实现高性能景深效果。点击场景中的位置进行聚焦。
					景深(Depth of Field)是摄影术语，指相机对焦点前后清晰的范围。
				-->
				使用简单的盒式模糊实现高性能景深效果。点击场景中的位置进行聚焦。<br />
				
				<!-- 
					第二行：3D模型版权信息
					模型名称"Bath day"（沐浴日）的链接
				-->
				<a href="https://skfb.ly/opNFG" target="_blank" rel="noopener">沐浴日</a> 
				<!-- 创作者信息 -->
				由 <a href="https://sketchfab.com/stanst" target="_blank" rel="noopener">Stan.St</a> 
				<!-- 授权协议 -->
				创作，采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">知识共享署名4.0国际许可协议</a>授权。<br />
			</small>
		</div>

		<!-- 
			导入映射(Import Maps)
			这是一个现代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>

		<!-- 
			主JavaScript模块
			type="module"：表示这是一个ES6模块
			模块具有自己的作用域，支持import/export语法
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			
			// 导入three.js核心模块的WebGPU版本
			// * as THREE：将所有导出内容放入THREE命名空间
			import * as THREE from 'three/webgpu';
			
			// 导入TSL(Three.js Shader Language)函数
			// mix：线性混合两个值（常用于颜色混合）
			// pass：创建一个渲染通道
			// renderOutput：创建输出节点
			// smoothstep：平滑插值函数（在指定范围内生成平滑的过渡值）
			// uniform：创建着色器中的uniform变量（可在CPU端修改）
			// vec3：创建三维向量
			import { mix, pass, renderOutput, smoothstep, uniform, vec3 } from 'three/tsl';
			
			// 导入后处理效果
			// boxBlur：盒式模糊效果，通过平均周围像素颜色实现模糊
			import { boxBlur } from 'three/addons/tsl/display/boxBlur.js';
			// fxaa：快速近似抗锯齿，减少图形边缘的锯齿状像素
			import { fxaa } from 'three/addons/tsl/display/FXAANode.js';

			// 导入控制器
			// OrbitControls：轨道控制器，允许用鼠标拖拽旋转、缩放场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入加载器
			// GLTFLoader：GLTF格式3D模型加载器（GLTF是3D模型的JPEG，高效且通用）
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			// UltraHDRLoader：高动态范围图像加载器，支持更广的亮度范围
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
			// DRACOLoader：Google的Draco压缩格式解码器，用于压缩的3D几何数据
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

			// 导入调试工具和动画库
			// Inspector：调试检查器，提供GUI界面调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			// TWEEN：补间动画库，用于创建平滑的动画过渡
			import TWEEN from 'three/addons/libs/tween.module.js';

			// ==================== 全局变量声明 ====================
			
			// 这些变量将在init()函数中初始化
			let camera;        // 相机对象：定义观察场景的视角
			let controls;      // 控制器：处理用户交互
			let scene;         // 场景对象：包含所有3D对象、灯光、相机
			let timer;         // 计时器：用于动画时间管理
			let renderer;      // 渲染器：负责将3D场景渲染到2D屏幕
			let model;         // 3D模型：加载的GLTF模型
			let mixer;         // 动画混合器：管理模型动画
			let raycaster;     // 射线投射器：用于鼠标点击检测
			let postProcessing;// 后处理对象：管理后期效果处理链

			// 常量声明（不会改变的变量）
			// 鼠标指针坐标：归一化设备坐标(NDC)，x和y范围都是[-1, 1]
			const pointerCoords = new THREE.Vector2();
			
			// 焦点位置（世界坐标）：初始聚焦点，用户点击后会改变这个位置
			// Vector3(1, 1.75, -0.4)：x=1（右），y=1.75（上），z=-0.4（向前）
			const focusPoint = new THREE.Vector3( 1, 1.75, - 0.4 );
			
			// TSL uniform变量：在着色器中使用的焦点位置（观察空间坐标）
			// uniform()：创建一个可在CPU端修改的着色器变量
			// vec3()：创建一个三维向量
			const focusPointView = uniform( vec3() );

			// 调用初始化函数
			// 注意：这里直接调用，没有等待，因为init是异步函数
			init();

			// ==================== 异步初始化函数 ====================
			
			// async关键字：这是一个异步函数，内部可以使用await
			// 异步函数允许等待异步操作完成而不阻塞主线程
			async function init() {

				// =========== 1. 创建相机 ===========
				// PerspectiveCamera：透视相机，模拟人眼视觉效果
				// 参数说明：
				//   60：视野角度(FOV)，单位度，较大的值产生鱼眼效果
				//   window.innerWidth / window.innerHeight：纵横比（宽度/高度）
				//   0.1：近裁剪平面，比这个距离近的物体不渲染
				//   100：远裁剪平面，比这个距离远的物体不渲染
				camera = new THREE.PerspectiveCamera( 
					60, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					100 
				);
				// 设置相机初始位置
				camera.position.set( -6, 5, 6 ); // x=-6（左），y=5（上），z=6（向后）

				// =========== 2. 创建轨道控制器 ===========
				controls = new OrbitControls( camera );
				// 设置控制器目标点（相机看向的点）
				controls.target.set( 0, 2, 0 );
				// 启用阻尼效果：惯性效果，使相机移动更平滑
				controls.enableDamping = true;
				// 更新控制器内部状态
				controls.update();

				// =========== 3. 创建场景 ===========
				scene = new THREE.Scene();
				// 设置场景背景色：浅蓝色（十六进制颜色0x90D5FF）
				scene.background = new THREE.Color( 0x90D5FF );

				// =========== 4. 创建射线投射器 ===========
				// 用于检测鼠标点击与3D对象的交点
				raycaster = new THREE.Raycaster();

				// =========== 5. 创建计时器 ===========
				// 用于管理动画时间，提供精确的时间增量(delta time)
				timer = new THREE.Timer();

				// =========== 6. 加载3D模型 ===========
				// 首先设置DRACO加载器（用于解压压缩的几何数据）
				const dracoLoader = new DRACOLoader();
				// 设置解码器路径：包含WebAssembly解码器文件的目录
				dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
			
				// 创建GLTF加载器
				const loader = new GLTFLoader();
				// 设置DRACO解码器
				loader.setDRACOLoader( dracoLoader );
				
				// 异步加载GLTF模型
				// await：等待异步加载完成，返回GLTF对象
				// 'models/gltf/bath_day.glb'：模型文件路径（GLB是GLTF的二进制格式）
				const gltf = await loader.loadAsync( 'models/gltf/bath_day.glb' );

				// 获取加载的场景（可能包含多个网格、灯光、相机）
				model = gltf.scene;
				// 将模型添加到主场景
				scene.add( model );

				// 创建动画混合器：管理模型的骨骼动画
				mixer = new THREE.AnimationMixer( model );
				// 获取第一个动画片段并创建动作
				const action = mixer.clipAction( gltf.animations[ 0 ] );
				// 播放动画
				action.play();

				// =========== 7. 加载HDR环境贴图 ===========
				// 创建UltraHDR加载器
				const hdrLoader = new UltraHDRLoader();
				// 异步加载HDR图像
				const envMap = await hdrLoader.loadAsync( 
					'textures/equirectangular/spruit_sunrise_2k.hdr.jpg' 
				);
				// 设置环境贴图映射方式：等距柱状投影（将2D图像包裹在球体上）
				envMap.mapping = THREE.EquirectangularReflectionMapping;
				// 旋转环境贴图：绕Y轴旋转90度（调整光照方向）
				scene.environmentRotation.y = Math.PI * 0.5;
				// 将HDR贴图设置为场景环境，用于全局光照和反射
				scene.environment = envMap;

				// =========== 8. 创建WebGPU渲染器 ===========
				renderer = new THREE.WebGPURenderer();
				// 设置设备像素比：适应高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数（每帧调用animate函数）
				renderer.setAnimationLoop( animate );
				// 初始化调试检查器（提供GUI界面）
				renderer.inspector = new Inspector();
				// 设置色调映射：中性色调映射，将HDR颜色值映射到显示器的LDR范围
				renderer.toneMapping = THREE.NeutralToneMapping;
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// =========== 9. 创建后处理管道 ===========
				// PostProcessing：three.js的后处理框架
				postProcessing = new THREE.PostProcessing( renderer );
				// 禁用输出颜色变换（保持原始颜色）
				postProcessing.outputColorTransform = false;

				// =========== 10. 配置景深效果参数 ===========
				// 使用TSL的uniform变量，这些值可以在着色器中访问并在CPU端修改
				
				// blurSize：模糊核大小，决定模糊的强度和质量
				// 值越大，模糊越强，但性能开销也越大
				const blurSize = uniform( 2 );
				
				// blurSpread：模糊扩散距离，决定模糊影响的范围
				// 值越大，模糊效果越分散
				const blurSpread = uniform( 4 );
				
				// minDistance：最小清晰距离
				// 所有距离焦点小于等于此值的物体都完全清晰
				const minDistance = uniform( 1 );
				
				// maxDistance：最大清晰距离
				// 所有距离焦点大于等于此值的物体都完全模糊
				const maxDistance = uniform( 3 );

				// =========== 11. 构建后处理节点图 ===========
				// 这是一个声明式的着色器图，描述数据流如何通过各个处理阶段
				
				// 创建场景渲染通道：将3D场景渲染到纹理
				// pass()函数创建一个渲染节点，接收场景和相机参数
				const scenePass = pass( scene, camera );
			
				// 从场景通道获取颜色纹理节点
				// toInspector('Color')：将节点暴露给调试检查器，便于调试查看
				const scenePassColor = scenePass.getTextureNode().toInspector( 'Color' );
				
				// 获取观察空间深度节点：每个像素的Z深度值（距离相机的距离）
				const scenePassViewZ = scenePass.getViewZNode();
				
				// 对场景颜色应用盒式模糊
				// boxBlur()：执行盒式模糊算法，平均周围像素颜色
				// 参数：
				//   scenePassColor：输入颜色纹理
				//   { size: blurSize, separation: blurSpread }：模糊参数
				const scenePassBlurred = boxBlur( 
					scenePassColor, 
					{ 
						size: blurSize,       // 模糊核大小
						separation: blurSpread // 模糊分离度
					} 
				);

				// =========== 12. 计算景深混合权重 ===========
				// 基于深度差异计算模糊权重
				// 这个算法来源于：https://lettier.github.io/3d-game-shaders-for-beginners/depth-of-field.html
				
				// smoothstep函数：在[min, max]范围内生成平滑的过渡值
				// 公式：smoothstep(min, max, x) = 
				//   0.0 如果 x ≤ min
				//   1.0 如果 x ≥ max
				//   平滑过渡 如果 min < x < max
				
				// scenePassViewZ.sub(focusPointView.z).abs()：
				//   计算当前像素深度与焦点深度的绝对差
				const blur = smoothstep( 
					minDistance,        // 最小值：完全清晰的边界
					maxDistance,        // 最大值：完全模糊的边界
					scenePassViewZ      // 当前像素的深度值
						.sub( focusPointView.z ) // 减去焦点深度
						.abs()                   // 取绝对值（距离）
				);
				
				// =========== 13. 混合清晰和模糊图像 ===========
				// mix()：线性混合两个输入
				// 根据blur权重（0到1之间）混合原始颜色和模糊颜色
				// 当blur=0时：完全使用原始颜色（清晰）
				// 当blur=1时：完全使用模糊颜色（模糊）
				// 当blur在0-1之间时：按比例混合
				const dofPass = mix( 
					scenePassColor,     // 输入A：原始清晰图像
					scenePassBlurred,   // 输入B：模糊图像
					blur                // 混合权重：基于深度差异计算
				);

				// =========== 14. 输出和抗锯齿处理 ===========
				// 创建输出节点：将处理结果准备为最终输出
				const outputPass = renderOutput( dofPass );
				
				// 应用FXAA抗锯齿：减少图形边缘的锯齿
				// FXAA（Fast Approximate Anti-Aliasing）：快速近似抗锯齿
				// 后处理抗锯齿，对最终图像进行平滑处理
				const fxaaPass = fxaa( outputPass );

				// 设置后处理管道的最终输出节点
				postProcessing.outputNode = fxaaPass;

				// =========== 15. 创建调试GUI界面 ===========
				// 通过检查器创建参数面板，允许实时调整参数
				const gui = renderer.inspector.createParameters( '设置' );
				
				// 添加minDistance参数滑块
				gui.add( minDistance, 'value', 0, 3 )
				   .name( '最小清晰距离' );  // GUI中显示的名称
				
				// 添加maxDistance参数滑块
				gui.add( maxDistance, 'value', 0, 5 )
				   .name( '最大清晰距离' );
				
				// 添加blurSize参数滑块（步长1，整数）
				gui.add( blurSize, 'value', 1, 3, 1 )
				   .name( '模糊核大小' );
				
				// 添加blurSpread参数滑块（步长1，整数）
				gui.add( blurSpread, 'value', 1, 7, 1 )
				   .name( '模糊扩散距离' );

				// =========== 16. 设置事件监听 ===========
				
				// 连接控制器到渲染器的DOM元素
				// 使控制器能够监听canvas上的鼠标/触摸事件
				controls.connect( renderer.domElement );

				// 添加鼠标按下事件监听器
				// 当用户在canvas上点击时，调用onPointerDown函数
				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );

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

				// 初始化完成，开始动画循环
				// animate函数将被渲染器的动画循环调用
			}

			// ==================== 鼠标点击事件处理函数 ====================
			// 当用户在canvas上按下鼠标时调用
			function onPointerDown( event ) {

				// 将鼠标屏幕坐标转换为归一化设备坐标(NDC)
				// 屏幕坐标：左上角(0,0)，右下角(window.innerWidth, window.innerHeight)
				// NDC坐标：x范围[-1,1]（左到右），y范围[-1,1]（下到上）
				pointerCoords.set(
					// x坐标转换：屏幕x → [-1, 1]
					( event.clientX / window.innerWidth ) * 2 - 1,
					// y坐标转换：屏幕y → [1, -1]（注意Y轴反转，因为屏幕坐标Y向下）
					- ( event.clientY / window.innerHeight ) * 2 + 1
				);

				// 从相机位置通过鼠标NDC坐标创建射线
				// 这条射线表示从相机通过鼠标点击位置的3D方向
				raycaster.setFromCamera( pointerCoords, camera );

				// 检测射线与模型的交点
				// intersectObject()：返回射线与对象的所有交点数组
				// 每个交点包含：point(交点坐标), distance(距离), face(相交的面)等信息
				const intersects = raycaster.intersectObject( model );

				// 如果有交点（用户点击到了模型）
				if ( intersects.length > 0 ) {

					// 清除所有正在进行的补间动画
					// 防止多个动画同时进行产生冲突
					TWEEN.removeAll();

					// 创建新的补间动画，平滑移动焦点位置
					// Tween：补间动画，在两个状态之间创建平滑过渡
					new TWEEN.Tween( focusPoint )  // 创建焦点位置的补间动画
						.to( intersects[ 0 ].point, 500 )  // 目标：第一个交点，持续时间500ms
						.easing( TWEEN.Easing.Cubic.InOut ) // 缓动函数：三次缓入缓出，平滑加速减速
						.start();  // 开始动画

					// 注意：focusPoint的改变会在animate()函数中同步到focusPointView
					// 然后传递到着色器，实现动态景深效果
				}
			
			}

			// ==================== 窗口大小调整处理函数 ====================
			// 当浏览器窗口大小改变时调用（用户调整窗口或设备旋转）
			function onWindowResize() {

				// 更新相机的纵横比
				// 纵横比 = 窗口宽度 / 窗口高度
				// 如果纵横比不正确，图像会变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 投影矩阵定义了3D坐标如何映射到2D屏幕
				// 当相机参数改变后必须调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器的大小
				// 确保渲染输出与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 注意：不需要手动更新后处理管道
				// three.js会自动处理渲染目标和视口的调整
			}

			// ==================== 动画循环函数 ====================
			// 每帧调用（通常每秒60次），驱动所有动画和渲染
			function animate() {

				// =========== 1. 更新补间动画 ===========
				// 更新所有活动的补间动画状态
				// 基于时间推进动画进度
				TWEEN.update();

				// =========== 2. 更新控制器 ===========
				// 处理用户输入（鼠标/触摸移动）
				// 更新相机位置和方向
				// 如果启用了阻尼，这里会应用惯性效果
				controls.update();

				// =========== 3. 更新计时器 ===========
				// 更新内部时间状态
				// 为动画混合器提供精确的时间增量(delta time)
				// delta time：上一帧到当前帧的时间差，用于时间无关的动画
				timer.update();

				// =========== 4. 更新动画混合器 ===========
				// 更新3D模型的动画状态
				// timer.getDelta()：获取时间增量，确保动画速度与帧率无关
				mixer.update( timer.getDelta() );

				// =========== 5. 更新焦点位置的观察空间坐标 ===========
				// 焦点位置需要从世界空间转换到观察空间才能用于着色器
				// 观察空间：以相机为原点的坐标系
				
				// 更新相机的世界矩阵
				// 确保相机的位置和方向是最新的
				camera.updateMatrixWorld();
				
				// 将焦点位置从世界空间转换到观察空间
				// 1. copy(focusPoint)：复制焦点位置
				// 2. applyMatrix4(camera.matrixWorldInverse)：应用相机的逆世界矩阵
				//    matrixWorldInverse：从世界空间到观察空间的变换矩阵
				focusPointView.value.copy( focusPoint ).applyMatrix4( camera.matrixWorldInverse );
				
				// 注意：focusPointView是uniform变量，它的改变会自动同步到GPU着色器
				// 这样着色器就可以使用最新的焦点位置进行景深计算

				// =========== 6. 执行后处理渲染 ===========
				// 渲染整个后处理管道
				// 内部流程：
				//   1. 渲染原始场景到纹理（scenePass）
				//   2. 应用盒式模糊（boxBlur）
				//   3. 基于深度混合清晰和模糊图像（景深效果）
				//   4. 应用抗锯齿（FXAA）
				//   5. 输出到屏幕
				postProcessing.render();

				// 动画循环结束，下一帧将再次调用此函数
				// 这是由renderer.setAnimationLoop(animate)设置的
			}

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