<!-- 代码功能概述
这是一个基于Three.js的WebGL高级渲染演示，展示了使用模板缓冲区（Stencil Buffer）和裁剪平面（Clipping Planes）实现精确的3D几何体裁剪效果。用户可以通过交互界面实时调整三个相互垂直的裁剪平面，观察它们如何切割一个旋转的圆环结几何体。

核心视觉效果：
琥珀色圆环结：被三个裁剪平面切割的主几何体

粉红色平面：可视化显示每个裁剪平面的位置和方向

动态阴影：裁剪后的几何体仍然投射正确的阴影

实时交互：用户可以拖动、旋转、缩放视角，并调整裁剪参数

主要技术点详解
1. 模板缓冲区技术（Stencil Buffer）
作用：实现像素级的精确裁剪标记
工作原理：

模板缓冲区为每个像素存储一个整数值（通常是0-255）

通过模板测试决定像素是否被渲染

本示例使用递增/递减计数法：

javascript
// 背面：递增模板值（标记被裁剪区域）
stencilFail: THREE.IncrementWrapStencilOp
// 正面：递减模板值（还原保留区域）
stencilFail: THREE.DecrementWrapStencilOp
最终结果：模板值为0的区域被裁剪，非0的区域保留

2. 裁剪平面系统（Clipping Planes）
数学原理：使用平面方程 Ax + By + Cz + D = 0

(A, B, C)：平面法线向量（定义平面朝向）

D：平面常数（定义平面偏移）

Three.js实现：

javascript
// 创建X轴裁剪平面（法线指向X轴负方向）
new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0)
3. 分层渲染策略
关键：精确的渲染顺序控制（renderOrder属性）

javascript
// 渲染顺序：
// 1. X平面模板缓冲组 renderOrder: 1
// 2. X平面可视化对象 renderOrder: 1.1
// 3. Y平面模板缓冲组 renderOrder: 2
// 4. Y平面可视化对象 renderOrder: 2.1
// 5. Z平面模板缓冲组 renderOrder: 3
// 6. Z平面可视化对象 renderOrder: 3.1
// 7. 主几何体 renderOrder: 6（最后渲染）
4. 材质系统配置
三种特殊材质协同工作：

A. 模板操作材质（透明、只操作模板缓冲）：

javascript
depthWrite: false      // 不写入深度缓冲
depthTest: false       // 不进行深度测试  
colorWrite: false      // 不写入颜色缓冲
stencilWrite: true     // 只操作模板缓冲
B. 平面可视化材质（粉红色、显示裁剪平面）：

javascript
clippingPlanes: planes.filter(p => p !== plane) // 被其他平面裁剪
stencilFunc: THREE.NotEqualStencilFunc           // 模板值≠0时渲染
C. 主几何体材质（琥珀色、被三个平面裁剪）：

javascript
clippingPlanes: planes    // 应用所有三个裁剪平面
clipShadows: true         // 阴影也被裁剪
shadowSide: THREE.DoubleSide // 双面阴影
5. 阴影系统集成
阴影裁剪：clipShadows: true 使阴影也遵循裁剪平面

双面阴影：确保裁剪后的内部和外部都有正确阴影

阴影材质：使用ShadowMaterial创建只显示阴影的地面

6. 交互控制系统
A. 轨道控制器（OrbitControls）：

鼠标拖拽旋转视角

滚轮缩放

右键平移

B. GUI参数面板（lil-gui）：

每个裁剪平面的独立控制

实时调整平面位置（constant）

平面方向反转（negated）

辅助线显示开关

7. 性能优化技术
设备像素比适配：setPixelRatio(window.devicePixelRatio)

帧率无关动画：使用clock.getDelta()计算时间增量

缓冲区管理：每帧后清除模板缓冲区

局部裁剪：localClippingEnabled: true 启用GPU硬件加速

8. 高级Three.js特性应用
平面辅助器：PlaneHelper可视化显示平面方向

共面点计算：plane.coplanarPoint()获取平面上任意点

面向控制：mesh.lookAt()使平面始终面向法线方向

渲染回调：onAfterRender在渲染后执行清理操作

技术亮点总结
模板缓冲的创造性使用：通过递增/递减计数实现精确的区域标记

多层渲染管道：精心设计的渲染顺序确保正确视觉效果

实时交互性：所有参数可动态调整，立即看到效果变化

完整的阴影集成：裁剪不仅影响几何体，也影响阴影

教学价值：清晰展示了WebGL底层缓冲区操作的高级应用 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL - 裁剪与模板缓冲区演示 -->
		<title>Three.js WebGL - 裁剪与模板缓冲区演示</title>
		<meta charset="utf-8">
		<!-- 视口设置：禁用用户缩放，设置初始缩放比例 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 页面信息展示区：显示项目信息和操作提示 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 使用裁剪平面和模板缓冲材质实现几何体裁剪效果<br>
			<small>操作提示：使用鼠标拖动旋转视角，滚动缩放，右侧面板可调整裁剪参数</small>
		</div>

		<!-- 导入映射配置：定义ES模块的导入路径映射 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			// ================ 模块导入区域 ================
			// 导入Three.js核心库
			import * as THREE from 'three';
			// 导入轨道控制器：允许用户通过鼠标交互控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入GUI库：创建用户界面控件
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			// 导入性能统计工具：显示FPS、内存使用等信息
			import Stats from 'three/addons/libs/stats.module.js';

			// ================ 全局变量声明 ================
			let camera,       // 透视相机：定义3D场景的观察视角
				scene,        // 场景对象：包含所有3D对象的容器
				renderer,     // WebGL渲染器：负责将3D场景渲染到2D画布
				object,       // 主对象组：包含所有几何体和裁剪平面的父容器
				stats;        // 性能统计对象

			// 裁剪系统相关变量
			let planes,        // 裁剪平面数组：存储三个裁剪平面对象
				planeObjects,  // 裁剪平面可视化对象数组：用于显示裁剪平面的位置
				planeHelpers;  // 平面辅助器数组：可视化显示裁剪平面的方向

			let clock;  // 时钟对象：用于计算时间增量，控制动画速度

			// ================ 参数配置对象 ================
			// 存储所有可调整的参数，用于GUI控制
			const params = {
				animate: true,  // 动画开关：控制模型是否自动旋转
				
				// X轴裁剪平面参数组
				planeX: {
					constant: 0,        // 平面常数：定义平面在法线方向上的偏移距离
					negated: false,     // 是否反向：反转平面的法线方向
					displayHelper: false // 是否显示辅助器：可视化显示平面的位置和方向
				},
				
				// Y轴裁剪平面参数组
				planeY: {
					constant: 0,
					negated: false,
					displayHelper: false
				},
				
				// Z轴裁剪平面参数组
				planeZ: {
					constant: 0,
					negated: false,
					displayHelper: false
				}
			};

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

			// ================ 核心功能函数定义 ================

			/**
			 * 创建平面模板缓冲组
			 * 
			 * 这是一个关键函数，用于创建模板缓冲区操作。模板缓冲区是GPU中的一个特殊缓冲区，
			 * 用于标记哪些像素应该被渲染，哪些不应该。这里使用模板缓冲区来实现精确的裁剪效果。
			 * 
			 * 工作原理：
			 * 1. 首先渲染背面（BackSide），通过递增操作标记被裁剪的区域
			 * 2. 然后渲染正面（FrontSide），通过递减操作还原保留的区域
			 * 3. 最终，模板缓冲区中值为0的区域是被裁剪掉的，非0的区域是保留的
			 * 
			 * 技术细节：
			 * - 使用MeshBasicMaterial作为模板材质，因为它不渲染颜色，只操作模板缓冲区
			 * - depthWrite和depthTest设为false，避免干扰深度缓冲区
			 * - colorWrite设为false，不写入颜色缓冲区，只操作模板缓冲区
			 * 
			 * @param {THREE.BufferGeometry} geometry - 要应用模板操作的几何体，这里是圆环结
			 * @param {THREE.Plane} plane - 裁剪平面对象，定义裁剪的空间平面
			 * @param {number} renderOrder - 渲染顺序，确保正确的渲染前后顺序
			 * @returns {THREE.Group} 包含两个网格的组：一个用于背面操作，一个用于正面操作
			 */
			function createPlaneStencilGroup(geometry, plane, renderOrder) {
				// 创建组对象，作为两个模板操作网格的父容器
				const group = new THREE.Group();
				
				// 基础模板材质配置
				// 这个材质不渲染可见的颜色，只用于操作模板缓冲区
				const baseMat = new THREE.MeshBasicMaterial();
				baseMat.depthWrite = false;       // 不写入深度缓冲区：避免影响后续渲染的深度测试
				baseMat.depthTest = false;        // 不进行深度测试：确保总是渲染
				baseMat.colorWrite = false;       // 不写入颜色缓冲区：不产生可见的渲染结果
				baseMat.stencilWrite = true;      // 启用模板写入：允许修改模板缓冲区
				baseMat.stencilFunc = THREE.AlwaysStencilFunc;  // 总是通过模板测试：无条件写入模板缓冲区

				// ========== 背面模板操作网格 ==========
				// 用于标记被裁剪掉的区域（平面的背面）
				const mat0 = baseMat.clone();     // 克隆基础材质以创建新的材质实例
				mat0.side = THREE.BackSide;       // 只渲染几何体的背面
				mat0.clippingPlanes = [plane];    // 应用裁剪平面：只有背面的片段会通过
				// 模板操作配置：
				mat0.stencilFail = THREE.IncrementWrapStencilOp;   // 模板测试失败时：递增模板值（如果达到上限则回绕）
				mat0.stencilZFail = THREE.IncrementWrapStencilOp;  // 深度测试失败时：递增模板值
				mat0.stencilZPass = THREE.IncrementWrapStencilOp;  // 深度测试通过时：递增模板值
				
				// 创建背面网格对象
				const mesh0 = new THREE.Mesh(geometry, mat0);
				mesh0.renderOrder = renderOrder;  // 设置渲染顺序：确保在正确的时机渲染
				group.add(mesh0);  // 添加到组中

				// ========== 正面模板操作网格 ==========
				// 用于还原保留的区域（平面的正面）
				const mat1 = baseMat.clone();     // 再次克隆基础材质
				mat1.side = THREE.FrontSide;      // 只渲染几何体的正面
				mat1.clippingPlanes = [plane];    // 应用同样的裁剪平面
				// 模板操作配置：与背面相反的操作
				mat1.stencilFail = THREE.DecrementWrapStencilOp;   // 模板测试失败时：递减模板值
				mat1.stencilZFail = THREE.DecrementWrapStencilOp;  // 深度测试失败时：递减模板值
				mat1.stencilZPass = THREE.DecrementWrapStencilOp;  // 深度测试通过时：递减模板值
				
				// 创建正面网格对象
				const mesh1 = new THREE.Mesh(geometry, mat1);
				mesh1.renderOrder = renderOrder;  // 设置相同的渲染顺序
				group.add(mesh1);  // 添加到组中

				// 返回包含两个模板操作网格的组
				return group;
			}

			/**
			 * 初始化函数 - 整个应用程序的启动入口
			 * 
			 * 这个函数负责：
			 * 1. 创建场景、相机、渲染器等基础Three.js对象
			 * 2. 设置光照和阴影
			 * 3. 创建几何体和材质
			 * 4. 配置裁剪系统和模板缓冲区
			 * 5. 设置用户界面和交互控制
			 * 6. 配置事件监听器
			 */
			function init() {
				// ========== 基础设置 ==========
				clock = new THREE.Clock();  // 创建时钟对象，用于计算动画的时间增量
				scene = new THREE.Scene();  // 创建场景对象，所有3D对象的容器

				// ========== 相机设置 ==========
				// 创建透视相机：模拟人眼的视角效果
				// 参数说明：视野角度(FOV)、宽高比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera(36, window.innerWidth / window.innerHeight, 1, 100);
				camera.position.set(2, 2, 2);  // 设置相机初始位置：(x, y, z)坐标

				// ========== 光照设置 ==========
				// 环境光：提供均匀的基础照明，没有方向性
				scene.add(new THREE.AmbientLight(0xffffff, 1.5));  // 颜色：白色，强度：1.5

				// 方向光：模拟太阳光，有明确的方向性，可以产生阴影
				const dirLight = new THREE.DirectionalLight(0xffffff, 3);  // 颜色：白色，强度：3
				dirLight.position.set(5, 10, 7.5);  // 设置光源位置
				dirLight.castShadow = true;         // 启用阴影投射
				
				// 配置阴影相机的视锥体：定义阴影的渲染范围
				dirLight.shadow.camera.right = 2;   // 右侧边界
				dirLight.shadow.camera.left = -2;   // 左侧边界
				dirLight.shadow.camera.top = 2;     // 顶部边界
				dirLight.shadow.camera.bottom = -2; // 底部边界
				
				// 设置阴影贴图的分辨率：影响阴影的质量
				dirLight.shadow.mapSize.width = 1024;   // 宽度分辨率
				dirLight.shadow.mapSize.height = 1024;  // 高度分辨率
				
				scene.add(dirLight);  // 将方向光添加到场景中

				// ========== 裁剪平面系统初始化 ==========
				// 创建三个相互垂直的裁剪平面
				// 平面由法线向量和常数定义：平面方程为：法线·点 + 常数 = 0
				planes = [
					// X轴平面：法线指向X轴负方向，常数初始为0
					new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0),
					// Y轴平面：法线指向Y轴负方向，常数初始为0
					new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
					// Z轴平面：法线指向Z轴负方向，常数初始为0
					new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
				];

				// 创建平面辅助器：可视化显示裁剪平面的位置和方向
				// 每个辅助器显示为十字线，帮助理解平面的空间位置
				planeHelpers = planes.map(p => new THREE.PlaneHelper(p, 2, 0xffffff));
				planeHelpers.forEach(ph => {
					ph.visible = false;  // 默认隐藏，可通过GUI控制显示
					scene.add(ph);       // 添加到场景中
				});

				// ========== 主几何体创建 ==========
				// 创建圆环结几何体：一种复杂的、有洞的几何形状
				// 参数：半径、管径、径向分段数、管状分段数
				const geometry = new THREE.TorusKnotGeometry(0.4, 0.15, 220, 60);
				
				// 创建主对象组：作为所有相关对象的父容器
				// 这样可以将它们作为一个整体进行旋转等变换
				object = new THREE.Group();
				scene.add(object);  // 添加到场景

				// ========== 裁剪平面可视化设置 ==========
				planeObjects = [];  // 初始化平面对象数组
				const planeGeom = new THREE.PlaneGeometry(4, 4);  // 创建平面几何体，用于显示裁剪平面

				// 为每个裁剪平面创建可视化对象
				// 循环三次，分别处理X、Y、Z三个平面
				for (let i = 0; i < 3; i++) {
					// 为每个平面创建一个组
					const poGroup = new THREE.Group();
					const plane = planes[i];  // 获取当前处理的平面
					
					// 为当前平面创建模板缓冲组
					// 这个组包含两个网格：一个用于标记背面，一个用于标记正面
					const stencilGroup = createPlaneStencilGroup(geometry, plane, i + 1);

					// ========== 裁剪平面材质配置 ==========
					// 创建用于显示裁剪平面的材质
					const planeMat = new THREE.MeshStandardMaterial({
						color: 0xE91E63,      // 粉红色：用于区分不同的裁剪平面
						metalness: 0.1,       // 金属度：控制材质像金属的程度
						roughness: 0.75,      // 粗糙度：控制材质的粗糙程度
						
						// 关键：裁剪平面自身也被其他平面裁剪
						// 这样每个平面只显示在它定义的裁剪区域内
						clippingPlanes: planes.filter(p => p !== plane),
						
						// ========== 模板缓冲区配置 ==========
						stencilWrite: true,                 // 启用模板写入
						stencilRef: 0,                      // 模板参考值：0
						stencilFunc: THREE.NotEqualStencilFunc,  // 模板函数：不等于参考值时通过
						stencilFail: THREE.ReplaceStencilOp,     // 模板测试失败操作：替换为参考值
						stencilZFail: THREE.ReplaceStencilOp,    // 深度测试失败操作：替换为参考值
						stencilZPass: THREE.ReplaceStencilOp,    // 深度测试通过操作：替换为参考值
					});

					// 创建平面可视化对象
					const po = new THREE.Mesh(planeGeom, planeMat);
					
					// 设置渲染后的回调函数：清除模板缓冲区
					// 这是必要的，因为模板缓冲区在帧之间需要重置
					po.onAfterRender = function(renderer) {
						renderer.clearStencil();  // 清除模板缓冲区，为下一帧做准备
					};
					
					po.renderOrder = i + 1.1;  // 设置渲染顺序，稍晚于模板缓冲组渲染

					// ========== 对象组织 ==========
					// 将模板缓冲组添加到主对象组中
					object.add(stencilGroup);
					// 将平面对象添加到它自己的组中
					poGroup.add(po);
					// 将平面对象保存到数组中，以便后续更新
					planeObjects.push(po);
					// 将平面组添加到场景中
					scene.add(poGroup);
				}

				// ========== 主几何体材质配置 ==========
				// 创建圆环结的主要材质（被裁剪的对象）
				const material = new THREE.MeshStandardMaterial({
					color: 0xFFC107,       // 琥珀色：主几何体的颜色
					metalness: 0.1,        // 金属度
					roughness: 0.75,       // 粗糙度
					clippingPlanes: planes,  // 应用所有三个裁剪平面
					clipShadows: true,     // 启用阴影裁剪：阴影也会被裁剪平面影响
					shadowSide: THREE.DoubleSide,  // 阴影渲染双面：确保阴影在两面都正确显示
				});

				// ========== 创建主几何体网格 ==========
				// 使用圆环结几何体和上面定义的材质创建网格
				const clippedColorFront = new THREE.Mesh(geometry, material);
				clippedColorFront.castShadow = true;   // 启用阴影投射
				clippedColorFront.renderOrder = 6;     // 设置最高的渲染顺序，最后渲染
				object.add(clippedColorFront);         // 添加到主对象组

				// ========== 创建地面 ==========
				// 地面用于接收阴影，提供空间参考
				const ground = new THREE.Mesh(
					new THREE.PlaneGeometry(9, 9, 1, 1),  // 9x9的地面平面
					new THREE.ShadowMaterial({            // 阴影材质：只显示阴影
						color: 0x000000,    // 黑色
						opacity: 0.25,      // 透明度25%
						side: THREE.DoubleSide  // 双面渲染
					})
				);
				// 将地面旋转到水平位置（默认平面是垂直的）
				ground.rotation.x = -Math.PI / 2;  // 绕X轴旋转-90度
				ground.position.y = -1;            // 向下移动1个单位
				ground.receiveShadow = true;       // 启用阴影接收
				scene.add(ground);                 // 添加到场景

				// ========== 渲染器配置 ==========
				// 创建WebGL渲染器实例
				renderer = new THREE.WebGLRenderer({ 
					antialias: true,  // 启用抗锯齿：减少边缘锯齿
					stencil: true     // 启用模板缓冲区：必须启用才能使用模板功能
				});
				renderer.setPixelRatio(window.devicePixelRatio);  // 设置设备像素比
				renderer.setSize(window.innerWidth, window.innerHeight);  // 设置渲染尺寸为窗口大小
				renderer.setClearColor(0x263238);  // 设置清除颜色：深蓝灰色背景
				renderer.setAnimationLoop(animate);  // 设置动画循环回调函数
				renderer.shadowMap.enabled = true;    // 启用阴影映射
				renderer.localClippingEnabled = true; // 启用本地裁剪：允许材质级别的裁剪
				
				// 将渲染器的DOM元素（canvas画布）添加到页面中
				document.body.appendChild(renderer.domElement);

				// ========== 性能统计 ==========
				// 创建并添加性能统计显示
				stats = new Stats();
				document.body.appendChild(stats.dom);

				// ========== 事件监听器 ==========
				// 监听窗口大小变化事件
				window.addEventListener('resize', onWindowResize);

				// ========== 交互控制 ==========
				// 创建轨道控制器，允许用户用鼠标控制相机
				const controls = new OrbitControls(camera, renderer.domElement);
				controls.minDistance = 2;  // 最小缩放距离
				controls.maxDistance = 20; // 最大缩放距离
				controls.update();         // 初始化更新

				// ========== GUI用户界面 ==========
				// 创建GUI实例
				const gui = new GUI();
				
				// 添加动画开关控制
				gui.add(params, 'animate').name('启用动画');

				// ----- X轴平面控制面板 -----
				const planeX = gui.addFolder('X轴裁剪平面');
				// 显示/隐藏辅助器
				planeX.add(params.planeX, 'displayHelper')
					.name('显示辅助线')
					.onChange(v => planeHelpers[0].visible = v);
				// 调整平面常数（偏移距离）
				planeX.add(params.planeX, 'constant')
					.name('平面位置')
					.min(-1).max(1).step(0.01)
					.onChange(d => planes[0].constant = d);
				// 反向平面法线
				planeX.add(params.planeX, 'negated')
					.name('反向平面')
					.onChange(() => {
						planes[0].negate();  // 反向平面的法线方向
						params.planeX.constant = planes[0].constant;  // 更新GUI显示的值
					});
				planeX.open();  // 默认展开X平面控制面板

				// ----- Y轴平面控制面板 -----
				const planeY = gui.addFolder('Y轴裁剪平面');
				planeY.add(params.planeY, 'displayHelper')
					.name('显示辅助线')
					.onChange(v => planeHelpers[1].visible = v);
				planeY.add(params.planeY, 'constant')
					.name('平面位置')
					.min(-1).max(1).step(0.01)
					.onChange(d => planes[1].constant = d);
				planeY.add(params.planeY, 'negated')
					.name('反向平面')
					.onChange(() => {
						planes[1].negate();
						params.planeY.constant = planes[1].constant;
					});
				planeY.open();  // 默认展开Y平面控制面板

				// ----- Z轴平面控制面板 -----
				const planeZ = gui.addFolder('Z轴裁剪平面');
				planeZ.add(params.planeZ, 'displayHelper')
					.name('显示辅助线')
					.onChange(v => planeHelpers[2].visible = v);
				planeZ.add(params.planeZ, 'constant')
					.name('平面位置')
					.min(-1).max(1).step(0.01)
					.onChange(d => planes[2].constant = d);
				planeZ.add(params.planeZ, 'negated')
					.name('反向平面')
					.onChange(() => {
						planes[2].negate();
						params.planeZ.constant = planes[2].constant;
					});
				planeZ.open();  // 默认展开Z平面控制面板
			}

			/**
			 * 窗口大小调整处理函数
			 * 
			 * 当浏览器窗口大小改变时调用，用于：
			 * 1. 更新相机的宽高比
			 * 2. 更新渲染器的尺寸
			 * 
			 * 这是响应式WebGL应用的必要部分
			 */
			function onWindowResize() {
				// 更新相机的宽高比，以匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵，应用新的宽高比
				camera.updateProjectionMatrix();
				// 更新渲染器的尺寸，填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 
			 * 这是Three.js应用的核心循环函数，每帧都会被调用。
			 * 负责：
			 * 1. 更新动画状态（如果启用）
			 * 2. 更新裁剪平面对象的位置和方向
			 * 3. 渲染整个场景
			 * 4. 更新性能统计
			 * 
			 * 使用requestAnimationFrame实现，与浏览器刷新率同步
			 */
			function animate() {
				// 获取时间增量：从上一帧到当前帧经过的时间（秒）
				// 用于实现帧率无关的动画
				const delta = clock.getDelta();

				// ========== 动画更新 ==========
				// 如果启用了动画，旋转主对象组
				if (params.animate) {
					// 绕X轴旋转：delta * 0.5 弧度/秒
					object.rotation.x += delta * 0.5;
					// 绕Y轴旋转：delta * 0.2 弧度/秒
					object.rotation.y += delta * 0.2;
				}

				// ========== 裁剪平面对象更新 ==========
				// 更新每个裁剪平面可视化对象的位置和方向
				for (let i = 0; i < planeObjects.length; i++) {
					const plane = planes[i];     // 获取对应的裁剪平面
					const po = planeObjects[i];  // 获取对应的可视化对象
					
					// 获取平面上的一个点作为可视化对象的位置
					// 这个方法返回平面上的任意一点，该点满足平面方程
					plane.coplanarPoint(po.position);
					
					// 设置可视化对象的朝向
					// 使其面向平面的法线方向
					// lookAt参数：看向的目标点（当前位置减去法线向量）
					po.lookAt(
						po.position.x - plane.normal.x,  // 目标点X坐标
						po.position.y - plane.normal.y,  // 目标点Y坐标
						po.position.z - plane.normal.z,  // 目标点Z坐标
					);
				}

				// ========== 渲染场景 ==========
				// 开始性能统计记录
				stats.begin();
				// 渲染整个场景：将3D场景绘制到2D画布上
				renderer.render(scene, camera);
				// 结束性能统计记录
				stats.end();
			}

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