<!-- Three.js 阴影贴图查看器示例 - 详细功能与技术分析
一、项目概述
这是一个基于Three.js的WebGL技术演示，专门用于可视化阴影贴图的生成与调试。通过实时显示灯光的阴影贴图，帮助开发者理解和优化3D场景中的阴影效果。

二、核心功能详解
1. 双灯光系统
方向光模拟太阳光：产生平行投影阴影，适合室外场景

聚光灯模拟射灯：产生锥形投影阴影，适合室内场景

两种灯光同时工作，展示不同类型的阴影效果

2. 实时阴影贴图可视化
将不可见的深度贴图转换为可视的灰度图像

直观显示每个灯光的阴影覆盖范围和精度

支持窗口大小变化自适应

3. 交互式场景探索
使用OrbitControls实现鼠标控制：

左键拖拽：旋转视角

右键拖拽：平移场景

滚轮：缩放视角

实时性能监控显示帧率

4. 动态场景动画
环面结和立方体持续旋转

展示动态物体的阴影变化

动画速度与帧率无关，确保在不同设备上表现一致

三、主要技术点详解
1. Three.js核心架构
javascript
// 三大核心组件
场景(Scene) → 相机(Camera) → 渲染器(Renderer)

// 渲染流程
初始化 → 动画循环 → 渲染 → 更新
2. 阴影系统技术栈
a) 阴影贴图生成流程
text
1. 灯光视角渲染 → 2. 深度信息存储 → 3. 阴影测试 → 4. 最终渲染
灯光相机：每个阴影投射光源都有自己的相机

深度缓冲：存储从灯光视角看到的深度信息

阴影比较：在主渲染时比较当前深度与阴影贴图深度

b) ShadowMapViewer实现原理
javascript
// 核心技术：将深度纹理渲染为2D图像
class ShadowMapViewer {
    // 1. 创建2D渲染上下文
    // 2. 将深度纹理转换为灰度图
    // 3. 应用可视化着色器
    // 4. 叠加到主渲染之上
}
3. 相机系统
a) 透视相机 vs 正交相机
特性	透视相机(Perspective)	正交相机(Orthographic)
使用场景	聚光灯	方向光
投影方式	近大远小	等比例投影
参数	FOV, 宽高比	左、右、上、下边界
视觉效果	符合人眼透视	无透视变形
b) 相机辅助工具
javascript
// CameraHelper可视化相机视锥体
new THREE.CameraHelper(light.shadow.camera)
// 显示阴影相机的有效范围
4. 材质与光照模型
a) Phong材质特性
javascript
new THREE.MeshPhongMaterial({
    color: 0xff0000,      // 漫反射颜色
    shininess: 150,       // 高光指数（0-1000）
    specular: 0x222222    // 高光颜色
})
漫反射：基础表面颜色

镜面反射：高光效果

环境反射：环境光影响

b) 光照计算
text
最终颜色 = 环境光 + 漫反射 + 镜面反射
5. 性能优化技术
a) 阴影质量控制
javascript
// 阴影贴图分辨率：平衡质量与性能
light.shadow.mapSize.width = 1024;  // 默认512，越高越清晰
light.shadow.mapSize.height = 1024;

// 裁剪面优化：减少渲染范围
light.shadow.camera.near = 1;      // 近裁剪面
light.shadow.camera.far = 30;      // 远裁剪面
b) 渲染优化
javascript
// 1. 设备像素比适配
renderer.setPixelRatio(window.devicePixelRatio);

// 2. 阴影贴图类型选择
renderer.shadowMap.type = THREE.BasicShadowMap;
// 可选：THREE.PCFShadowMap（软阴影）
// 可选：THREE.PCFSoftShadowMap（更软阴影）

// 3. 智能裁剪
ground.castShadow = false;  // 地面不投射阴影，节省计算
6. 动画系统设计
a) 时间管理
javascript
// Clock时钟系统
const clock = new THREE.Clock();

// 帧率无关动画
function update() {
    const delta = clock.getDelta();  // 获取时间增量（秒）
    object.rotation.y += 2 * delta;  // 恒定速度旋转
}
b) 渲染循环
javascript
// 现代Three.js渲染循环
renderer.setAnimationLoop(animate);

// 传统方式
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
7. 响应式布局系统
a) 窗口大小自适应
javascript
function onWindowResize() {
    // 1. 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // 必须调用！
    
    // 2. 更新渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    // 3. 更新ShadowMapViewer
    resizeShadowMapViewers();
}
b) 自适应阴影贴图查看器
javascript
// 按窗口比例调整大小
const size = window.innerWidth * 0.15;  // 占窗口宽度15%
shadowMapViewer.size.set(size, size);
四、关键技术难点解析
1. 阴影锯齿问题
原因：阴影贴图分辨率不足

解决方案：增加mapSize，使用PCF软阴影

2. 阴影精度问题
原因：灯光相机范围设置不合理

解决方案：精确调整shadow.camera参数

3. 性能瓶颈
原因：过多的阴影计算，过高的分辨率

解决方案：合理设置castShadow/receiveShadow，优化裁剪面

4. 视觉对齐问题
现象：CameraHelper与实际阴影不匹配

解决方案：精确计算灯光相机参数，确保视锥体覆盖正确区域

五、扩展应用场景
1. 教学与演示
3D图形学教学工具

阴影技术原理演示

2. 游戏开发调试
实时调整阴影参数

优化阴影性能

3. 建筑可视化
日照分析模拟

室内灯光效果调试

4. 工业设计
产品渲染阴影优化

多光源效果预览

六、总结
这个示例项目展示了Three.js在阴影渲染和可视化调试方面的强大能力。通过实时显示阴影贴图，开发者可以：

直观理解阴影生成原理

精确调整阴影参数设置

优化平衡视觉效果与性能

快速调试复杂光照场景 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGL 阴影贴图查看器示例 -->
		<title>Three.js WebGL - 阴影贴图查看器示例</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="main.css">
	</head>
	<body>
		<!-- 页面信息展示区域：显示项目信息和作者信息 -->
		<div id="info">
			<!-- 
				Three.js官方链接：链接到Three.js官方网站
				target="_blank"：在新标签页中打开链接
				rel="noopener"：安全设置，防止新页面通过window.opener访问原始页面
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- 阴影贴图查看器示例 
			<!-- 作者信息链接：链接到GitHub作者页面 -->
			作者：<a href="https://github.com/arya-s" target="_blank" rel="noopener">arya-s</a> |
			<!-- 示例说明：简要说明本示例的功能 -->
			功能说明：本示例展示了如何使用Three.js的ShadowMapViewer工具可视化阴影贴图
		</div>

		<!-- 
			导入映射(Import Map)：现代JavaScript模块导入配置
			作用：将模块标识符映射到实际文件路径，简化导入语句
			注意：这需要浏览器支持ES模块和Import Maps功能
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：使用type="module"声明为ES6模块
			模块化脚本，支持import/export语法，有独立作用域
		-->
		<script type="module">
			// ========== 模块导入部分 ==========
			
			// 导入Three.js核心库的所有功能
			// * as THREE：将所有导出内容作为一个对象导入，命名为THREE
			import * as THREE from 'three';
			
			// 导入性能监控库Stats
			// Stats：用于显示帧率(FPS)、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轨道控制器OrbitControls
			// 功能：允许用户通过鼠标拖拽、滚轮缩放来操控相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入阴影贴图查看器ShadowMapViewer
			// 功能：将灯光的阴影贴图渲染到2D画布上，便于调试和可视化
			import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';

			// ========== 全局变量声明部分 ==========
			
			// 核心Three.js对象
			let camera;      // 相机：定义观察场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D画布
			let clock;       // 时钟：用于计算时间差，实现与帧率无关的动画
			let stats;       // 性能监控器：显示FPS等性能指标
			
			// 灯光对象
			let dirLight;    // 方向光(DirectionalLight)：模拟太阳光，平行光线
			let spotLight;   // 聚光灯(SpotLight)：锥形光线，有方向和角度
			
			// 几何体对象
			let torusKnot;   // 环面结(Torus Knot)：复杂的环形几何体
			let cube;        // 立方体(Box)：简单的方形几何体
			
			// 阴影贴图查看器对象
			let dirLightShadowMapViewer;   // 方向光的阴影贴图查看器
			let spotLightShadowMapViewer;  // 聚光灯的阴影贴图查看器

			// ========== 初始化函数调用 ==========
			
			// 程序入口：调用初始化函数启动整个应用
			init();

			/**
			 * 主初始化函数
			 * 功能：按正确顺序初始化所有组件，建立Three.js应用的基础架构
			 * 执行流程：
			 * 1. 初始化3D场景（几何体、灯光、材质）
			 * 2. 初始化阴影贴图查看器
			 * 3. 初始化渲染器、控制器等辅助组件
			 * 4. 将渲染器画布添加到DOM
			 * 5. 绑定窗口大小变化事件
			 */
			function init() {
				// 第一步：初始化3D场景
				initScene();
				
				// 第二步：初始化阴影贴图查看器（依赖已创建的灯光）
				initShadowMapViewers();
				
				// 第三步：初始化其他组件（渲染器、控制器、监控器）
				initMisc();

				// 将WebGL渲染器的canvas元素添加到页面body中
				// renderer.domElement：渲染器对应的<canvas>元素
				document.body.appendChild(renderer.domElement);
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数重新调整布局
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 初始化3D场景函数
			 * 功能：创建和配置所有3D对象，包括相机、灯光、几何体
			 * 详细流程：
			 * 1. 创建透视相机并设置位置
			 * 2. 创建场景容器
			 * 3. 创建环境光、聚光灯、方向光
			 * 4. 配置灯光的阴影参数
			 * 5. 创建几何体（环面结、立方体、地面）
			 * 6. 设置几何体的材质、位置、阴影属性
			 */
			function initScene() {
				// ---------- 相机创建与配置 ----------
				
				// 创建透视相机(PerspectiveCamera)
				// 参数说明：
				// 45 - 视野角度(FOV)：垂直视角为45度，值越大看到的范围越广
				// window.innerWidth/window.innerHeight - 宽高比：根据窗口尺寸计算
				// 1 - 近裁剪面：距离相机1个单位以内的物体不被渲染
				// 1000 - 远裁剪面：距离相机1000个单位以外的物体不被渲染
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
				
				// 设置相机初始位置 (x, y, z)
				// x: 水平方向，正右负左
				// y: 垂直方向，正上负下  
				// z: 深度方向，正前负后
				camera.position.set(0, 15, 35);

				// 创建场景对象
				// Scene是所有3D对象的容器，类似于HTML的DOM树
				scene = new THREE.Scene();

				// ---------- 灯光系统创建与配置 ----------
				
				// 1. 环境光(AmbientLight)
				// 功能：提供均匀的基础照明，没有方向，不产生阴影
				// 参数说明：
				// 0x404040 - 光色：十六进制RGB颜色，浅灰色
				// 3 - 强度：光照强度，值越大越亮
				scene.add(new THREE.AmbientLight(0x404040, 3));

				// 2. 聚光灯(SpotLight)
				// 功能：产生锥形光束，有明确的方向和范围，模拟射灯效果
				spotLight = new THREE.SpotLight(0xffffff, 500); // 白色光，强度500
				spotLight.name = 'Spot Light'; // 设置名称便于识别
				spotLight.angle = Math.PI / 5; // 光束角度：π/5弧度（36度）
				spotLight.penumbra = 0.3;      // 半影区：光束边缘的模糊程度，0-1之间
				spotLight.position.set(10, 10, 5); // 设置灯光位置
				spotLight.castShadow = true;   // 启用阴影投射
				
				// 聚光灯阴影相机配置
				// 阴影相机：一个特殊的相机，用于从灯光视角渲染深度图（阴影贴图）
				spotLight.shadow.camera.near = 8;   // 阴影渲染近裁剪面
				spotLight.shadow.camera.far = 30;   // 阴影渲染远裁剪面
				// 阴影贴图分辨率：决定阴影的质量和精度
				spotLight.shadow.mapSize.width = 1024;   // 阴影贴图宽度（像素）
				spotLight.shadow.mapSize.height = 1024;  // 阴影贴图高度（像素）
				scene.add(spotLight); // 将聚光灯添加到场景
				
				// 添加聚光灯阴影相机的辅助线框
				// CameraHelper：可视化显示相机的视锥体范围，便于调试
				scene.add(new THREE.CameraHelper(spotLight.shadow.camera));

				// 3. 方向光(DirectionalLight)
				// 功能：产生平行光线，模拟太阳光，所有光线方向相同
				dirLight = new THREE.DirectionalLight(0xffffff, 3); // 白色光，强度3
				dirLight.name = 'Dir. Light'; // 设置名称
				dirLight.position.set(0, 10, 0); // 灯光位置（方向光的位置决定光线方向）
				dirLight.castShadow = true; // 启用阴影投射
				
				// 方向光阴影相机配置（使用正交相机）
				// 方向光使用正交相机，因为它的光线是平行的
				dirLight.shadow.camera.near = 1;  // 近裁剪面
				dirLight.shadow.camera.far = 10;  // 远裁剪面
				// 正交相机的渲染范围（形成一个长方体区域）
				dirLight.shadow.camera.right = 15;   // 右边界
				dirLight.shadow.camera.left = -15;   // 左边界
				dirLight.shadow.camera.top = 15;     // 上边界
				dirLight.shadow.camera.bottom = -15; // 下边界
				// 阴影贴图分辨率
				dirLight.shadow.mapSize.width = 1024;
				dirLight.shadow.mapSize.height = 1024;
				scene.add(dirLight); // 将方向光添加到场景
				
				// 添加方向光阴影相机的辅助线框
				scene.add(new THREE.CameraHelper(dirLight.shadow.camera));

				// ---------- 几何体创建与配置 ----------
				
				// 1. 环面结(Torus Knot)几何体
				// 参数说明：
				// 25 - 半径：主要半径大小
				// 8 - 管道半径：截面的半径
				// 75 - 管状段数：圆周方向的细分程度
				// 20 - 径向段数：截面圆的细分程度
				let geometry = new THREE.TorusKnotGeometry(25, 8, 75, 20);
				
				// 创建Phong材质（冯氏光照模型）
				// Phong材质：支持高光反射，适合光滑表面
				let material = new THREE.MeshPhongMaterial({
					color: 0xff0000,     // 漫反射颜色：红色
					shininess: 150,      // 高光亮度：0-1000，值越大高光点越小越亮
					specular: 0x222222   // 高光颜色：深灰色
				});

				// 创建环面结网格对象
				// Mesh：几何体 + 材质 = 可渲染的3D对象
				torusKnot = new THREE.Mesh(geometry, material);
				torusKnot.scale.multiplyScalar(1 / 18); // 缩放：缩小到原来的1/18
				torusKnot.position.y = 3; // 设置Y轴位置，向上移动3个单位
				torusKnot.castShadow = true;    // 允许投射阴影
				torusKnot.receiveShadow = true; // 允许接收阴影
				scene.add(torusKnot); // 添加到场景

				// 2. 立方体(Box)几何体
				// 参数说明：3, 3, 3 - 立方体的宽度、高度、深度
				geometry = new THREE.BoxGeometry(3, 3, 3);
				// 使用相同的材质（红色Phong材质）
				cube = new THREE.Mesh(geometry, material);
				cube.position.set(8, 3, 8); // 设置位置 (x=8, y=3, z=8)
				cube.castShadow = true;    // 允许投射阴影
				cube.receiveShadow = true; // 允许接收阴影
				scene.add(cube); // 添加到场景

				// 3. 地面(Floor)几何体
				// 创建一个扁平的立方体作为地面
				geometry = new THREE.BoxGeometry(10, 0.15, 10); // 很薄的长方体
				
				// 创建新的材质（灰色）
				material = new THREE.MeshPhongMaterial({
					color: 0xa0adaf,    // 漫反射颜色：浅灰色
					shininess: 150,     // 高光亮度
					specular: 0x111111  // 高光颜色：深灰色
				});

				// 创建地面网格
				const ground = new THREE.Mesh(geometry, material);
				ground.scale.multiplyScalar(3); // 放大3倍，使地面更大
				ground.castShadow = false;      // 地面不投射阴影（节省性能）
				ground.receiveShadow = true;    // 地面接收阴影（显示其他物体的阴影）
				scene.add(ground); // 添加到场景
			}

			/**
			 * 初始化阴影贴图查看器
			 * 功能：为每个灯光创建阴影贴图查看器，用于可视化调试阴影贴图
			 * 阴影贴图：一种深度纹理，记录了从灯光视角看到的场景深度信息
			 * 查看器作用：将深度信息可视化为灰度图，便于调试阴影范围和精度
			 */
			function initShadowMapViewers() {
				// 为方向光创建阴影贴图查看器
				// 参数：dirLight - 要可视化阴影贴图的灯光对象
				dirLightShadowMapViewer = new ShadowMapViewer(dirLight);
				
				// 为聚光灯创建阴影贴图查看器
				spotLightShadowMapViewer = new ShadowMapViewer(spotLight);
				
				// 根据当前窗口大小调整查看器的尺寸和位置
				resizeShadowMapViewers();
			}

			/**
			 * 初始化其他辅助组件
			 * 功能：创建和配置渲染器、用户交互控制器、性能监控器等
			 */
			function initMisc() {
				// ---------- WebGL渲染器创建与配置 ----------
				
				// 创建WebGL渲染器
				// antialias: true - 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比
				// window.devicePixelRatio：设备的物理像素与CSS像素的比率
				// 高DPI屏幕（如Retina）此值可能为2，确保清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// animate函数将作为每一帧的渲染回调
				// 替代传统的requestAnimationFrame方式
				renderer.setAnimationLoop(animate);
				
				// 启用阴影贴图
				renderer.shadowMap.enabled = true;
				
				// 设置阴影贴图类型
				// THREE.BasicShadowMap：基础阴影贴图，性能好但质量一般
				// 其他选项：THREE.PCFShadowMap（软阴影）、THREE.PCFSoftShadowMap（更软的阴影）
				renderer.shadowMap.type = THREE.BasicShadowMap;

				// ---------- 用户交互控制器 ----------
				
				// 创建轨道控制器(OrbitControls)
				// 参数：
				// camera - 要控制的相机对象
				// renderer.domElement - 监听事件的DOM元素（canvas）
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制器的目标点（相机围绕此点旋转）
				controls.target.set(0, 2, 0);
				
				// 更新控制器状态（应用初始设置）
				controls.update();

				// ---------- 动画时钟 ----------
				
				// 创建Three.js时钟对象
				// 用于计算时间差，实现与帧率无关的平滑动画
				clock = new THREE.Clock();

				// ---------- 性能监控器 ----------
				
				// 创建Stats性能监控器
				// 显示FPS（帧率）、MS（每帧渲染时间）、MB（内存使用）等指标
				stats = new Stats();
				
				// 将监控器的DOM元素添加到页面
				// stats.dom：包含FPS显示面板的HTML元素
				document.body.appendChild(stats.dom);
			}

			/**
			 * 调整阴影贴图查看器的大小和位置
			 * 功能：根据窗口大小动态调整查看器的显示参数
			 * 布局说明：
			 * - 两个查看器并排显示在窗口左上角
			 * - 大小随窗口宽度变化（自适应）
			 * - 保持一定间距，避免重叠
			 */
			function resizeShadowMapViewers() {
				// 计算查看器尺寸：窗口宽度的15%
				// 这样查看器会随窗口大小变化，保持比例
				const size = window.innerWidth * 0.15;

				// 配置方向光阴影贴图查看器
				dirLightShadowMapViewer.position.x = 10;      // X坐标：距离左侧10像素
				dirLightShadowMapViewer.position.y = 10;      // Y坐标：距离顶部10像素
				dirLightShadowMapViewer.size.width = size;    // 宽度
				dirLightShadowMapViewer.size.height = size;   // 高度
				// 更新查看器状态（应用新的位置和尺寸）
				// 注意：直接修改属性后必须调用update()才能生效
				dirLightShadowMapViewer.update();

				// 配置聚光灯阴影贴图查看器
				// 使用set方法同时设置宽度和高度
				spotLightShadowMapViewer.size.set(size, size);
				// 设置位置：在方向光查看器右侧，保持20像素间距
				spotLightShadowMapViewer.position.set(size + 20, 10);
				// 注意：set方法内部会自动调用update()，所以这里不需要额外调用
				// spotLightShadowMapViewer.update(); // 不需要调用
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 功能：当浏览器窗口大小改变时，重新调整Three.js渲染设置
			 * 触发时机：用户调整窗口大小、旋转移动设备、切换全屏等
			 */
			function onWindowResize() {
				// ---------- 更新相机 ----------
				
				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 重要：修改相机参数后必须调用此方法，否则更改不会生效
				camera.updateProjectionMatrix();

				// ---------- 更新渲染器 ----------
				
				// 设置渲染器的新尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);

				// ---------- 更新阴影贴图查看器 ----------
				
				// 重新调整查看器大小和位置
				resizeShadowMapViewers();
				
				// 通知查看器窗口大小已变化
				// updateForWindowResize()：处理内部坐标转换等更新
				dirLightShadowMapViewer.updateForWindowResize();
				spotLightShadowMapViewer.updateForWindowResize();
			}

			/**
			 * 动画循环函数（每一帧执行）
			 * 功能：Three.js的主渲染循环，在每一帧中调用
			 * 调用方式：通过renderer.setAnimationLoop(animate)设置
			 */
			function animate() {
				render();       // 执行渲染逻辑
				stats.update(); // 更新性能监控器显示
			}

			/**
			 * 渲染主场景函数
			 * 功能：将3D场景渲染到WebGL画布
			 * 这是Three.js最核心的渲染操作
			 */
			function renderScene() {
				// 调用渲染器的render方法
				// 参数：
				// scene - 要渲染的场景对象
				// camera - 渲染视角的相机对象
				renderer.render(scene, camera);
			}

			/**
			 * 渲染阴影贴图查看器函数
			 * 功能：将阴影贴图的可视化结果渲染到屏幕上
			 * 注意：这是在主场景渲染之后进行的2D叠加渲染
			 */
			function renderShadowMapViewers() {
				// 渲染方向光阴影贴图查看器
				// 参数：renderer - 使用同一个WebGL渲染器
				dirLightShadowMapViewer.render(renderer);
				
				// 渲染聚光灯阴影贴图查看器
				spotLightShadowMapViewer.render(renderer);
			}

			/**
			 * 主渲染函数
			 * 功能：组合所有渲染操作和动画更新
			 * 执行流程：
			 * 1. 获取时间增量（确保动画速度与帧率无关）
			 * 2. 渲染主3D场景
			 * 3. 渲染阴影贴图查看器（2D叠加）
			 * 4. 更新几何体的旋转动画
			 */
			function render() {
				// 获取时间增量（delta time）
				// clock.getDelta()：返回自上次调用getDelta()以来经过的时间（秒）
				// 使用时间增量可以使动画速度不受帧率影响
				const delta = clock.getDelta();

				// 第一步：渲染主3D场景
				renderScene();
				
				// 第二步：渲染阴影贴图查看器（2D覆盖）
				renderShadowMapViewers();

				// ---------- 更新几何体动画 ----------
				
				// 更新环面结的旋转
				// 每个轴的旋转速度不同，创建更自然的动画效果
				// 使用delta确保旋转速度与帧率无关
				torusKnot.rotation.x += 0.25 * delta; // X轴缓慢旋转
				torusKnot.rotation.y += 2 * delta;    // Y轴快速旋转
				torusKnot.rotation.z += 1 * delta;    // Z轴中等速度旋转

				// 更新立方体的旋转（与环面结相同的旋转模式）
				cube.rotation.x += 0.25 * delta;
				cube.rotation.y += 2 * delta;
				cube.rotation.z += 1 * delta;
			}
		</script>
	</body>
</html>