<!-- 代码功能与技术点详解
一、总体功能概述
这是一个使用Three.js实现的WebGL接触阴影效果演示程序。主要功能是模拟物体与地面之间自然的柔和接触阴影效果，通过离屏渲染、深度信息提取和模糊处理等技术，实现了高质量的实时阴影渲染。

主要功能特点：
实时渲染：60FPS流畅运行，支持动态场景

交互控制：鼠标控制相机视角，GUI调整参数

视觉效果：展示三种不同几何体的旋转动画和阴影效果

技术演示：展示Three.js高级渲染技术的实现

二、核心功能模块
1. 场景与物体
场景设置：白色背景，包含三个几何体（立方体、二十面体、环面纽结）

物体动画：所有物体持续旋转，展示动态阴影效果

相机控制：透视相机+轨道控制器，提供用户交互视角控制

2. 阴影系统
接触阴影：模拟物体与地面接触区域的柔和阴影

可调参数：阴影模糊度、暗度、透明度实时可调

高质量渲染：512×512像素的离屏渲染目标

3. 用户界面
GUI控制面板：实时调整阴影和地面参数

性能监视：显示FPS和渲染性能指标

调试工具：可选的相机辅助线显示

三、主要技术点详解
1. 深度缓冲渲染技术
javascript
// 深度材质配置
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.onBeforeCompile = function(shader) {
    // 自定义着色器：将深度转换为透明度
    shader.fragmentShader = shader.fragmentShader.replace(
        'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
        'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );'
    );
};
技术要点：

使用MeshDepthMaterial获取场景深度信息

重写片元着色器，将深度值转换为透明度

通过darkness系数控制阴影强度

距离相机越近的物体产生越不透明的阴影

2. 离屏渲染（Render Targets）
javascript
// 创建两个渲染目标
renderTarget = new THREE.WebGLRenderTarget(512, 512);
renderTargetBlur = new THREE.WebGLRenderTarget(512, 512);

// 渲染到离屏缓冲区
renderer.setRenderTarget(renderTarget);
renderer.render(scene, shadowCamera);
技术要点：

使用WebGLRenderTarget创建离屏渲染缓冲区

512×512像素分辨率平衡质量和性能

禁用Mipmaps生成（generateMipmaps: false）提升性能

双缓冲设计：一个用于存储深度，一个用于模糊处理

3. 分离高斯模糊算法
javascript
// 模糊处理流程
function blurShadow(amount) {
    // 水平模糊
    blurPlane.material = horizontalBlurMaterial;
    renderer.setRenderTarget(renderTargetBlur);
    renderer.render(blurPlane, shadowCamera);
    
    // 垂直模糊
    blurPlane.material = verticalBlurMaterial;
    renderer.setRenderTarget(renderTarget);
    renderer.render(blurPlane, shadowCamera);
}
技术要点：

分离卷积：将2D高斯模糊分解为水平+垂直两次1D卷积

性能优势：复杂度从O(n²)降到O(2n)

可调模糊强度：通过amount参数控制采样偏移量

二次模糊：消除分离模糊产生的伪影

4. 正交相机阴影投影
javascript
// 阴影相机设置
shadowCamera = new THREE.OrthographicCamera(
    -PLANE_WIDTH/2, PLANE_WIDTH/2,    // 左右边界
    PLANE_HEIGHT/2, -PLANE_HEIGHT/2,  // 上下边界
    0, CAMERA_HEIGHT                  // 近远平面
);
shadowCamera.rotation.x = Math.PI / 2; // 朝上
技术要点：

正交投影：无透视变形，适合深度测量

相机朝向：从地面向上看，捕捉物体底部

视锥体匹配：相机范围精确匹配地面平面

辅助调试：提供相机辅助线可视化

5. 材质覆盖渲染
javascript
// 临时使用深度材质渲染整个场景
scene.overrideMaterial = depthMaterial;
renderer.setRenderTarget(renderTarget);
renderer.render(scene, shadowCamera);
scene.overrideMaterial = null; // 恢复原始材质
技术要点：

overrideMaterial：强制所有物体使用指定材质

深度渲染时临时移除场景背景

设置透明清除颜色（setClearAlpha(0)）

渲染后恢复原始状态

6. 纹理坐标翻转处理
javascript
// WebGL纹理Y坐标翻转
plane.scale.y = -1;
技术要点：

WebGL纹理坐标系：Y轴向下（0在顶部）

通过缩放翻转平面来校正纹理显示

确保阴影方向正确

7. 渲染顺序控制
javascript
plane.renderOrder = 1; // 阴影平面最后渲染
技术要点：

控制多个透明平面的渲染顺序

确保阴影平面在地面颜色平面之上渲染

避免透明混合顺序问题

四、渲染管线流程
完整渲染流程：
text
主循环开始
    ↓
更新物体旋转
    ↓
深度渲染阶段（离屏）
    ├── 保存当前状态
    ├── 设置深度材质覆盖
    ├── 渲染到深度纹理
    └── 恢复原始状态
    ↓
模糊处理阶段
    ├── 水平模糊（深度纹理 → 中间纹理）
    └── 垂直模糊（中间纹理 → 深度纹理）
    ↓
主场景渲染（屏幕）
    ├── 恢复主渲染目标
    ├── 渲染场景（包含阴影平面）
    └── 更新性能统计
    ↓
循环结束
五、性能优化策略
1. 渲染优化
固定尺寸渲染目标：避免动态内存分配

禁用不需要的功能：深度测试、深度写入、Mipmaps

批量状态管理：最小化GPU状态切换

2. 算法优化
分离高斯模糊：大幅减少纹理采样次数

二次模糊：使用较小模糊半径消除伪影

正交相机：避免透视投影的额外计算

3. 内存优化
共享几何体：多个平面使用相同几何体实例

纹理复用：模糊处理重用中间纹理

及时清理：渲染后恢复原始状态

六、技术应用场景
1. 游戏开发
角色与地面的接触阴影

物体的环境光遮蔽

动态物体的高质量阴影

2. 数据可视化
3D图表的投影效果

科学模拟的可视化

建筑模型的阴影展示

3. 交互式应用
产品展示的阴影效果

虚拟现实场景

教育演示工具

4. 扩展可能性
多光源阴影：扩展支持多个阴影投射光源

动态分辨率：根据性能自动调整渲染目标大小

软阴影过渡：实现更自然的阴影边缘过渡

实时参数调整：基于场景复杂度自动优化参数

七、关键代码片段解析
1. 阴影生成核心逻辑
javascript
// 阴影生成的核心：深度值→透明度转换
// 在着色器中：(1.0 - 深度值) * 暗度系数
// 结果：物体越靠近地面，阴影越不透明
2. 模糊强度计算
javascript
// 模糊偏移量 = 模糊强度 / 纹理尺寸
horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
// 这表示每个像素采样左右各1/256纹理单位的像素
3. 渲染状态管理
javascript
// 保存→修改→渲染→恢复的模式
const initialBackground = scene.background; // 保存
scene.background = null;                    // 修改
renderer.render(scene, shadowCamera);      // 渲染
scene.background = initialBackground;       // 恢复
八、总结
这个Three.js接触阴影演示展示了现代WebGL图形编程的几个关键技术：

高级材质编程：通过着色器重写实现自定义渲染效果

离屏渲染管线：多阶段渲染实现复杂效果

后处理技术：使用模糊算法提升视觉效果

性能优化：在保证质量的同时维持高帧率

交互设计：提供实时参数调整和用户控制 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGL 接触阴影实现 -->
		<title>Three.js WebGL - 接触阴影效果演示</title>
		<meta charset="utf-8">
		<!-- 视口设置：确保在移动设备上正确显示，禁止用户缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #fff;
				color: #000;
			}
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>
		<!-- 页面顶部信息栏：显示技术信息和链接 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL 接触阴影效果演示 - 实现物体与地面之间的柔和接触阴影
		</div>

		<!-- ES模块导入映射配置：告诉浏览器如何解析模块导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js核心库 - 用于3D图形渲染
			import * as THREE from 'three';
			
			// 导入轨道控制器 - 允许用户用鼠标拖拽、缩放来操控相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入性能监视器（Stats.js）- 显示FPS、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入GUI库（lil-gui）- 创建用户交互界面，实时调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入水平模糊着色器 - 用于后处理效果中的水平方向模糊
			import { HorizontalBlurShader } from 'three/addons/shaders/HorizontalBlurShader.js';
			
			// 导入垂直模糊着色器 - 用于后处理效果中的垂直方向模糊
			import { VerticalBlurShader } from 'three/addons/shaders/VerticalBlurShader.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// 核心Three.js对象
			let camera;      // 透视相机 - 用于渲染主场景
			let scene;       // 场景容器 - 包含所有3D对象
			let renderer;    // WebGL渲染器 - 负责将3D场景绘制到canvas
			let stats;       // 性能监视器实例
			let gui;         // GUI界面实例
			
			// 存储场景中所有可旋转物体的数组
			const meshes = [];

			// ============================================
			// 常量定义 - 用于控制阴影和场景布局
			// ============================================
			
			const PLANE_WIDTH = 2.5;   // 阴影平面的宽度（X轴方向）
			const PLANE_HEIGHT = 2.5;  // 阴影平面的高度（Z轴方向）
			const CAMERA_HEIGHT = 0.3; // 阴影相机的高度（Y轴方向，决定阴影的投影范围）

			// ============================================
			// 应用状态对象 - 存储所有可通过GUI调整的参数
			// ============================================
			
			const state = {
				shadow: {
					blur: 3.5,      // 阴影模糊程度：值越大阴影边缘越模糊
					darkness: 1,    // 阴影暗度：值越大阴影颜色越深
					opacity: 1,     // 阴影透明度：1为完全不透明，0为完全透明
				},
				plane: {
					color: '#ffffff', // 地面颜色：使用十六进制颜色值
					opacity: 1,       // 地面透明度
				},
				showWireframe: false, // 是否显示阴影相机的辅助线框（用于调试）
			};

			// ============================================
			// 阴影系统相关变量
			// ============================================
			
			let shadowGroup;      // 阴影组容器：包含所有与阴影相关的对象（平面、相机等）
			let renderTarget;     // 渲染目标1：用于渲染阴影深度图（离屏渲染缓冲区）
			let renderTargetBlur; // 渲染目标2：用于模糊处理的中间缓冲区
			let shadowCamera;     // 正交相机：专门用于从地面视角渲染阴影深度
			let cameraHelper;     // 相机辅助线：可视化显示shadowCamera的视锥体
			
			// 材质相关
			let depthMaterial;            // 自定义深度材质：将场景深度信息转换为阴影信息
			let horizontalBlurMaterial;   // 水平模糊材质：应用水平方向的高斯模糊
			let verticalBlurMaterial;     // 垂直模糊材质：应用垂直方向的高斯模糊

			// ============================================
			// 平面对象变量
			// ============================================
			
			let plane;      // 显示阴影的平面：将阴影深度图作为纹理显示
			let blurPlane;  // 模糊处理平面：用于执行模糊后处理的不可见平面
			let fillPlane;  // 填充平面：显示地面颜色的背景平面

			// ============================================
			// 初始化函数 - 程序入口点
			// ============================================
			
			init();

			function init() {
				// ============================================
				// 1. 创建相机
				// ============================================
				
				// 创建透视相机：模拟人眼视角，有近大远小的透视效果
				// 参数：视野角度50度，宽高比，近裁剪面0.1单位，远裁剪面100单位
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
				
				// 设置相机初始位置：(X, Y, Z)坐标
				camera.position.set(0.5, 1, 2);

				// ============================================
				// 2. 创建场景
				// ============================================
				
				scene = new THREE.Scene();
				scene.background = new THREE.Color(0xffffff); // 设置场景背景为纯白色

				// ============================================
				// 3. 创建性能监视器并添加到页面
				// ============================================
				
				stats = new Stats();
				document.body.appendChild(stats.dom); // 将性能监视器的DOM元素添加到页面

				// ============================================
				// 4. 事件监听设置
				// ============================================
				
				// 监听窗口大小变化事件，确保渲染器尺寸和相机比例随窗口变化
				window.addEventListener('resize', onWindowResize);

				// ============================================
				// 5. 创建场景中的3D物体
				// ============================================
				
				// 定义三种不同的几何体形状
				const geometries = [
					new THREE.BoxGeometry(0.4, 0.4, 0.4), // 立方体：长宽高各0.4单位
					new THREE.IcosahedronGeometry(0.3),   // 二十面体：半径0.3单位
					new THREE.TorusKnotGeometry(0.4, 0.05, 256, 24, 1, 3) // 环面纽结：复杂几何形状
				];

				// 创建法线材质：根据物体表面法线方向显示不同颜色（用于调试和视觉效果）
				const material = new THREE.MeshNormalMaterial();

				// 循环创建网格对象并添加到场景
				for (let i = 0, l = geometries.length; i < l; i++) {
					// 计算角度：使三个物体均匀分布在一个圆上
					const angle = (i / l) * Math.PI * 2;

					const geometry = geometries[i];
					const mesh = new THREE.Mesh(geometry, material);
					
					// 设置物体位置
					mesh.position.y = 0.1; // 稍微高于地面，产生阴影
					mesh.position.x = Math.cos(angle) / 2.0; // 根据角度计算X坐标
					mesh.position.z = Math.sin(angle) / 2.0; // 根据角度计算Z坐标
					
					scene.add(mesh);
					meshes.push(mesh); // 将网格添加到数组，方便后续统一控制
				}

				// ============================================
				// 6. 创建阴影系统
				// ============================================
				
				// 6.1 创建阴影组容器
				// 将阴影相关的所有对象放在一个组中，便于统一管理和移动
				shadowGroup = new THREE.Group();
				shadowGroup.position.y = -0.3; // 将整个阴影系统向下移动，与物体保持距离
				scene.add(shadowGroup);

				// 6.2 创建渲染目标（离屏渲染缓冲区）
				// 渲染目标是一个可以渲染到纹理的缓冲区，而不是直接渲染到屏幕
				renderTarget = new THREE.WebGLRenderTarget(512, 512); // 512x512像素
				renderTarget.texture.generateMipmaps = false; // 禁用Mipmaps生成，提高性能
				
				// 6.3 创建模糊处理用的渲染目标
				renderTargetBlur = new THREE.WebGLRenderTarget(512, 512);
				renderTargetBlur.texture.generateMipmaps = false;

				// 6.4 创建平面几何体
				// 创建平面后旋转90度，使其水平（平行于XZ平面）
				const planeGeometry = new THREE.PlaneGeometry(PLANE_WIDTH, PLANE_HEIGHT).rotateX(Math.PI / 2);
				
				// 6.5 创建显示阴影的平面材质
				// 使用渲染目标的纹理作为贴图，显示阴影效果
				const planeMaterial = new THREE.MeshBasicMaterial({
					map: renderTarget.texture, // 纹理贴图：使用阴影深度纹理
					opacity: state.shadow.opacity, // 透明度：可调整阴影的可见度
					transparent: true, // 启用透明：允许alpha通道生效
					depthWrite: false, // 禁用深度写入：避免与其他平面产生深度冲突
				});
				
				// 6.6 创建阴影平面
				plane = new THREE.Mesh(planeGeometry, planeMaterial);
				plane.renderOrder = 1; // 设置渲染顺序：确保在填充平面之后渲染
				shadowGroup.add(plane);
				
				// 注意：WebGL纹理的Y坐标是反的（0在顶部，1在底部），所以需要翻转平面
				plane.scale.y = -1;

				// 6.7 创建模糊处理平面
				// 这个平面不可见，只用于执行模糊后处理
				blurPlane = new THREE.Mesh(planeGeometry);
				blurPlane.visible = false; // 设置为不可见
				shadowGroup.add(blurPlane);

				// 6.8 创建填充平面（地面背景）
				// 这个平面显示地面的颜色，作为阴影的背景
				const fillPlaneMaterial = new THREE.MeshBasicMaterial({
					color: state.plane.color, // 地面颜色
					opacity: state.plane.opacity, // 地面透明度
					transparent: true, // 启用透明
					depthWrite: false, // 禁用深度写入
				});
				fillPlane = new THREE.Mesh(planeGeometry, fillPlaneMaterial);
				fillPlane.rotateX(Math.PI); // 旋转180度，使其朝下
				shadowGroup.add(fillPlane);

				// 6.9 创建阴影相机（正交相机）
				// 正交相机没有透视效果，平行投影，适合渲染阴影深度
				shadowCamera = new THREE.OrthographicCamera(
					-PLANE_WIDTH / 2,  // 左边界
					PLANE_WIDTH / 2,   // 右边界
					PLANE_HEIGHT / 2,  // 上边界
					-PLANE_HEIGHT / 2, // 下边界
					0,                 // 近裁剪面
					CAMERA_HEIGHT      // 远裁剪面（相机高度）
				);
				shadowCamera.rotation.x = Math.PI / 2; // 旋转90度，使相机朝上（从地面向上看）
				shadowGroup.add(shadowCamera);

				// 6.10 创建阴影相机辅助线（调试用）
				cameraHelper = new THREE.CameraHelper(shadowCamera);

				// ============================================
				// 7. 创建自定义深度材质
				// ============================================
				
				// 深度材质：将物体的深度信息（距离相机的远近）转换为颜色或透明度
				depthMaterial = new THREE.MeshDepthMaterial();
				
				// 在材质上添加自定义数据：阴影暗度值
				depthMaterial.userData.darkness = { value: state.shadow.darkness };
				
				// 重写材质的着色器编译过程：自定义片元着色器
				depthMaterial.onBeforeCompile = function(shader) {
					// 将自定义的darkness变量添加到着色器的uniforms中
					shader.uniforms.darkness = depthMaterial.userData.darkness;
					
					// 修改片元着色器代码：
					// 原始代码：将深度值转换为灰度颜色 (1.0 - 深度值)
					// 修改后：将深度值转换为透明度 (1.0 - 深度值) * darkness
					shader.fragmentShader = /* glsl */`
						uniform float darkness; // 声明自定义uniform变量
						${shader.fragmentShader.replace(
							// 替换原始的颜色输出代码
							'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
							// 修改为透明度输出：越近的物体（深度值小）产生越不透明的阴影
							'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );'
						)}
					`;
				};

				// 设置深度材质属性
				depthMaterial.depthTest = false;  // 禁用深度测试：确保所有片段都被渲染
				depthMaterial.depthWrite = false; // 禁用深度写入：避免影响主场景的深度缓冲

				// ============================================
				// 8. 创建模糊材质
				// ============================================
				
				// 8.1 水平模糊材质：使用导入的HorizontalBlurShader
				horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);
				horizontalBlurMaterial.depthTest = false; // 禁用深度测试
				
				// 8.2 垂直模糊材质：使用导入的VerticalBlurShader
				verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader);
				verticalBlurMaterial.depthTest = false;

				// ============================================
				// 9. 创建GUI控制界面
				// ============================================
				
				gui = new GUI(); // 创建GUI实例
				
				// 9.1 阴影参数控制文件夹
				const shadowFolder = gui.addFolder('阴影设置');
				shadowFolder.open(); // 默认打开该文件夹
				
				// 阴影模糊程度控制滑块
				shadowFolder.add(state.shadow, 'blur', 0, 15, 0.1)
					.name('模糊程度')
					.onChange(function(value) {
						// 值变化时自动更新，不需要额外代码，animate函数中会使用这个值
					});
				
				// 阴影暗度控制滑块
				shadowFolder.add(state.shadow, 'darkness', 1, 5, 0.1)
					.name('阴影暗度')
					.onChange(function(value) {
						// 更新深度材质中的暗度值
						depthMaterial.userData.darkness.value = state.shadow.darkness;
					});
				
				// 阴影透明度控制滑块
				shadowFolder.add(state.shadow, 'opacity', 0, 1, 0.01)
					.name('阴影透明度')
					.onChange(function(value) {
						// 更新阴影平面的材质透明度
						plane.material.opacity = state.shadow.opacity;
					});

				// 9.2 平面参数控制文件夹
				const planeFolder = gui.addFolder('地面设置');
				planeFolder.open();
				
				// 地面颜色选择器
				planeFolder.addColor(state.plane, 'color')
					.name('地面颜色')
					.onChange(function(value) {
						// 将颜色字符串转换为Three.js颜色对象
						fillPlane.material.color = new THREE.Color(state.plane.color);
					});
				
				// 地面透明度控制滑块
				planeFolder.add(state.plane, 'opacity', 0, 1, 0.01)
					.name('地面透明度')
					.onChange(function(value) {
						// 更新填充平面的材质透明度
						fillPlane.material.opacity = state.plane.opacity;
					});

				// 9.3 调试选项：显示阴影相机辅助线
				gui.add(state, 'showWireframe')
					.name('显示相机辅助线')
					.onChange(function(value) {
						if (state.showWireframe) {
							scene.add(cameraHelper); // 添加辅助线到场景
						} else {
							scene.remove(cameraHelper); // 从场景移除辅助线
						}
					});

				// ============================================
				// 10. 创建WebGL渲染器
				// ============================================
				
				renderer = new THREE.WebGLRenderer({ 
					antialias: true // 启用抗锯齿，使边缘更平滑
				});
				
				// 设置设备像素比：适配高清屏幕（如Retina显示屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数（替换旧的requestAnimationFrame方式）
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ============================================
				// 11. 创建轨道控制器
				// ============================================
				
				// 允许用户通过鼠标拖拽、滚轮缩放来操控相机
				new OrbitControls(camera, renderer.domElement);
			}

			// ============================================
			// 窗口大小变化事件处理函数
			// ============================================
			
			function onWindowResize() {
				// 更新相机纵横比，防止图像拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix(); // 必须调用此方法使更改生效
				
				// 更新渲染器尺寸，使其填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ============================================
			// 阴影模糊函数
			// ============================================
			
			/**
			 * 对阴影纹理执行高斯模糊处理
			 * 实现原理：分离高斯模糊，先水平模糊再垂直模糊，性能更高
			 * 渲染流程：renderTarget → blurPlane（水平模糊）→ renderTargetBlur → blurPlane（垂直模糊）→ renderTarget
			 * 
			 * @param {number} amount - 模糊强度值，值越大模糊效果越强
			 */
			function blurShadow(amount) {
				// 临时显示模糊处理平面
				blurPlane.visible = true;

				// ========== 第一步：水平方向模糊 ==========
				
				// 1.1 设置模糊平面的材质为水平模糊材质
				blurPlane.material = horizontalBlurMaterial;
				
				// 1.2 将原始阴影纹理传递给着色器
				blurPlane.material.uniforms.tDiffuse.value = renderTarget.texture;
				
				// 1.3 计算水平模糊强度
				// 将模糊强度转换为纹理坐标偏移量（1/256表示纹理坐标的偏移步长）
				horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
				
				// 1.4 渲染到中间渲染目标（renderTargetBlur）
				renderer.setRenderTarget(renderTargetBlur);
				renderer.render(blurPlane, shadowCamera);

				// ========== 第二步：垂直方向模糊 ==========
				
				// 2.1 切换模糊平面的材质为垂直模糊材质
				blurPlane.material = verticalBlurMaterial;
				
				// 2.2 将水平模糊后的纹理传递给着色器
				blurPlane.material.uniforms.tDiffuse.value = renderTargetBlur.texture;
				
				// 2.3 计算垂直模糊强度
				verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
				
				// 2.4 渲染回原始渲染目标（renderTarget）
				renderer.setRenderTarget(renderTarget);
				renderer.render(blurPlane, shadowCamera);

				// 模糊处理完成，隐藏模糊平面
				blurPlane.visible = false;
			}

			// ============================================
			// 动画循环函数 - 每帧执行一次
			// ============================================
			
			function animate() {
				// ============================================
				// 第一部分：更新场景中的物体状态
				// ============================================
				
				// 旋转所有网格物体，创建动态效果
				meshes.forEach(mesh => {
					mesh.rotation.x += 0.01; // 绕X轴旋转
					mesh.rotation.y += 0.02; // 绕Y轴旋转（速度更快）
				});

				// ============================================
				// 第二部分：阴影生成与处理（离屏渲染）
				// ============================================
				
				// 2.1 保存当前场景背景（临时移除背景，避免影响深度渲染）
				const initialBackground = scene.background;
				scene.background = null;

				// 2.2 隐藏阴影相机辅助线（在深度渲染时不显示）
				cameraHelper.visible = false;
				
				// 2.3 使用深度材质覆盖场景中所有物体的材质
				// 这样所有物体都会用深度材质渲染，生成深度信息
				scene.overrideMaterial = depthMaterial;

				// 2.4 保存当前渲染器的清除alpha值，并设置为0（完全透明）
				// 这样渲染深度图时背景是透明的
				const initialClearAlpha = renderer.getClearAlpha();
				renderer.setClearAlpha(0);

				// 2.5 渲染阴影深度图到离屏渲染目标
				// 使用阴影相机（正交相机）从地面视角渲染
				renderer.setRenderTarget(renderTarget); // 切换到渲染目标
				renderer.render(scene, shadowCamera);   // 渲染场景到渲染目标

				// 2.6 恢复原始材质设置
				scene.overrideMaterial = null; // 移除材质覆盖
				cameraHelper.visible = true;   // 恢复相机辅助线显示

				// 2.7 对阴影深度图进行模糊处理
				// 第一次模糊：主要模糊处理
				blurShadow(state.shadow.blur);
				
				// 第二次模糊：轻微模糊，用于减少伪影和锯齿
				// 0.4是经验值，能有效消除分离模糊产生的伪影
				blurShadow(state.shadow.blur * 0.4);

				// ============================================
				// 第三部分：主场景渲染（屏幕渲染）
				// ============================================
				
				// 3.1 切换回主渲染目标（屏幕）
				renderer.setRenderTarget(null);
				
				// 3.2 恢复渲染器的清除alpha值
				renderer.setClearAlpha(initialClearAlpha);
				
				// 3.3 恢复场景背景
				scene.background = initialBackground;

				// 3.4 渲染主场景到屏幕
				// 使用主相机（透视相机）渲染最终效果
				renderer.render(scene, camera);
				
				// 3.5 更新性能监视器显示
				stats.update();
			}
		</script>
	</body>
</html>