<!-- Three.js WebGPU 裁剪平面示例 - 详细说明
🎯 代码功能概述
这是一个基于Three.js WebGPU版本的交互式3D图形演示，主要展示裁剪平面（Clipping Planes）技术在三维图形中的应用。通过该示例，用户可以：

核心功能
3D对象裁剪：使用数学定义的平面切割3D几何体

层级裁剪系统：支持全局和局部的嵌套裁剪组

实时交互控制：通过GUI面板动态调整裁剪参数

完整3D场景：包含光照、阴影、材质和动画效果

WebGPU渲染：利用现代GPU硬件加速渲染

交互体验
视角控制：鼠标拖拽旋转、滚轮缩放

参数调整：实时修改裁剪平面位置和属性

视觉效果：观察不同裁剪参数下的3D对象截面

动画效果：自动旋转和缩放的环面结对象

🔧 主要技术点详解
1. 裁剪平面技术（Clipping Planes）
数学基础
平面方程：ax + by + cz + d = 0

法线向量：定义平面的方向

常数项：定义平面在法线方向上的偏移

裁剪逻辑：保留满足平面不等式 ax + by + cz + d > 0 的部分

技术实现
javascript
// 创建裁剪平面
const plane = new THREE.Plane(normal, constant);

// 创建裁剪组
const clippingGroup = new THREE.ClippingGroup();
clippingGroup.clippingPlanes = [plane1, plane2];

// 控制裁剪模式
clippingGroup.clipIntersection = true; // true:交集 false:并集
2. WebGPU渲染系统
优势特性
底层GPU访问：直接调用现代图形API

并行计算能力：更好的多线程支持

显存管理：更高效的内存使用

Pipeline状态：预编译的渲染管线

Three.js集成
javascript
// WebGPU渲染器初始化
const renderer = new THREE.WebGPURenderer({
  antialias: true  // 抗锯齿
});

// 与传统WebGL API兼容
// Three.js抽象层隐藏了WebGPU的复杂性
3. 光照与阴影系统
多重光源组合
环境光（Ambient Light）

均匀的基础照明

无方向性，无阴影

聚光灯（Spot Light）

锥形光束，有明确方向

可投射柔和阴影

参数可调（角度、半影等）

平行光（Directional Light）

模拟太阳光，所有光线平行

产生方向性阴影

阴影技术
阴影贴图（Shadow Mapping）

阴影偏移（Bias）：防止阴影失真

阴影模糊（Radius）：产生柔和边缘

阴影相机（Shadow Camera）：定义阴影渲染范围

4. 材质与着色器
Phong节点材质
基于节点的材质系统：更灵活的着色器组合

物理属性：颜色、光泽度、透明度

双面渲染：裁剪后内外表面都可见

Alpha to Coverage技术
抗锯齿机制：特别适用于透明边缘

多重采样：利用MSAA（多重采样抗锯齿）

裁剪边缘平滑：消除锯齿状的裁剪边界

5. 几何体与动画
环面结几何体
复杂拓扑结构：自相交的环面

参数化定义：半径、管径、分段数

高效渲染：优化的顶点和索引缓冲

动画系统
javascript
// 基于时间的动画计算
const time = (currentTime - startTime) / 1000;

// 旋转动画
object.rotation.x = time * 0.5;
object.rotation.y = time * 0.2;

// 缩放动画（呼吸效果）
object.scale.setScalar(Math.cos(time) * 0.125 + 0.875);
6. 用户交互系统
轨道控制器（OrbitControls）
鼠标交互：左键旋转、右键平移、滚轮缩放

惯性效果：平滑的拖拽体验

约束限制：防止过度旋转或缩放

GUI调试界面
参数分组：按功能组织控制项

实时反馈：立即看到参数变化效果

范围约束：限制参数的合理取值范围

7. 场景管理与优化
层级结构
javascript
// 场景 -> 全局裁剪组 -> 局部裁剪组 -> 3D对象
scene.add(globalClippingGroup);
globalClippingGroup.add(knotClippingGroup);
knotClippingGroup.add(object);
性能优化
设备像素比适配：renderer.setPixelRatio()

视口响应式：窗口大小变化自动调整

资源管理：合理的几何体细分级别

📊 技术架构图
text
┌─────────────────────────────────────────┐
│           Three.js WebGPU API           │
├─────────────────────────────────────────┤
│   Scene Graph  │  Materials  │ Lights   │
├─────────────────────────────────────────┤
│    Geometry    │  Animation  │ Controls │
├─────────────────────────────────────────┤
│          Clipping Groups System         │
│  ┌──────────┐  ┌──────────┐            │
│  │  Global  │  │  Local   │            │
│  │ Clipping │  │ Clipping │            │
│  │  Group   │  │  Group   │            │
│  └──────────┘  └──────────┘            │
├─────────────────────────────────────────┤
│           WebGPU Render Pipeline        │
└─────────────────────────────────────────┘
🚀 应用场景
教育演示
3D几何截面展示

空间平面概念教学

图形学算法可视化

工程应用
CAD软件中的剖面视图

医学影像的3D切割

地质勘探数据分析

创意设计
艺术化的3D模型展示

动态视觉特效

交互式数据可视化

🔍 关键代码解释
裁剪平面的创建与应用
javascript
// 1. 定义平面：法线指向X轴负方向，偏移0.1单位
const plane = new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0.1);

// 2. 创建裁剪组并应用平面
const group = new THREE.ClippingGroup();
group.clippingPlanes = [plane];

// 3. 将对象添加到裁剪组
group.add(meshObject);

// 4. 添加到场景
scene.add(group);
WebGPU渲染器初始化
javascript
const renderer = new THREE.WebGPURenderer({
  antialias: true,           // 抗锯齿
  powerPreference: 'high-performance' // 性能优先
});

// 设置渲染循环（替代requestAnimationFrame）
renderer.setAnimationLoop(animate);
动态参数绑定（GUI）
javascript
// 创建属性访问器
const props = {
  get '平面位置'() {
    return clippingPlane.constant;
  },
  set '平面位置'(value) {
    clippingPlane.constant = value;
  }
};

// 添加到GUI面板
gui.add(props, '平面位置', min, max);
💡 扩展可能性
技术扩展
多平面裁剪：同时应用多个裁剪平面

动态平面：随时间或交互变化的裁剪平面

模板测试：结合模板缓冲区的高级裁剪

计算着色器：GPU加速的复杂裁剪计算

功能增强
导入外部模型：支持OBJ、GLTF等格式

体积数据裁剪：医学影像的3D体积渲染

实时物理模拟：结合物理引擎的交互

网络协作：多用户协同查看和编辑

🎨 视觉效果说明
裁剪效果
清晰截面：显示3D对象的内部结构

平滑边缘：Alpha to Coverage抗锯齿

阴影一致性：阴影与几何体同步裁剪

材质连续性：截面保持原有材质属性

场景氛围
层次感照明：多光源营造立体感

真实阴影：柔和阴影增强深度感知

动态元素：旋转动画展示全角度视图

简洁界面：专注于核心功能的UI设计 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据 -->
		<!-- 
			页面标题：描述示例的核心功能
			这里展示的是Three.js WebGPU版本下的裁剪平面功能
		-->
		<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">
		
		<!-- 外部样式表链接 -->
		<!-- 
			rel="stylesheet": 定义链接类型为样式表
			href="example.css": 指向外部CSS文件路径
			该文件包含页面布局、颜色、字体等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 页面顶部信息区域 -->
		<!-- 
			id="info": 用于CSS样式和JavaScript操作
			这个区域通常包含品牌标识、标题和示例说明
		-->
		<div id="info">
			<!-- 
				Three.js官方链接
				class="logo-link": 可能包含Three.js的logo样式
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全设置，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装器 -->
			<!-- 
				class="title-wrapper": 用于样式控制
				包含主标题和副标题
			-->
			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				
				<!-- 副标题：当前示例名称 -->
				<span>裁剪平面演示</span>
			</div>

			<!-- 示例详细描述 -->
			<!-- 
				<small>标签：表示小号文本
				描述示例的核心功能：使用裁剪平面对3D对象进行切割
			-->
			<small>通过裁剪平面技术切割3D对象，展示三维空间的截面效果</small>
			
		</div>

		<!-- 模块导入映射配置（Import Maps） -->
		<!-- 
			type="importmap": 定义模块导入映射
			这是一种现代JavaScript模块导入机制，允许开发者定义模块别名和路径
			在支持ES模块的浏览器中，可以更灵活地管理依赖
		-->
		<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/webgpu模块导入为THREE对象
			// 这样可以像使用常规Three.js一样访问所有类和方法
			import * as THREE from 'three/webgpu';

			// 导入调试检查器（Inspector）
			// Inspector是一个可视化调试工具，可以查看场景结构、性能指标等
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器（OrbitControls）
			// 这是一个常用的相机控制器，允许用户通过鼠标控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// camera: 场景相机，定义观察视角
			let camera;
			
			// scene: 场景对象，包含所有3D对象、光源等
			let scene;
			
			// renderer: 渲染器，负责将3D场景绘制到2D画布上
			let renderer;
			
			// startTime: 动画开始的时间戳，用于计算动画时间
			let startTime;
			
			// object: 主要的3D对象（环面结），会应用裁剪效果
			let object;

			// ============================================
			// 初始化函数调用
			// ============================================
			
			// 调用初始化函数，启动整个应用
			init();

			// ============================================
			// 初始化函数定义
			// ============================================
			
			/**
			 * init函数：Three.js应用的核心初始化函数
			 * 负责创建场景、相机、渲染器、光源、几何体等所有必要组件
			 * 并设置事件监听器和用户界面
			 */
			function init() {
				// ----------------------------------------------------
				// 1. 创建相机（Camera）
				// ----------------------------------------------------
				
				// 使用PerspectiveCamera（透视相机）创建3D视角
				// 参数说明：
				//   36 - 视野角度（Field of View），单位度，影响视角广度
				//   window.innerWidth / window.innerHeight - 宽高比，匹配窗口尺寸
				//   0.25 - 近裁剪平面距离，比这个近的对象不会被渲染
				//   16 - 远裁剪平面距离，比这个远的对象不会被渲染
				camera = new THREE.PerspectiveCamera(36, window.innerWidth / window.innerHeight, 0.25, 16);
				
				// 设置相机初始位置
				// 参数：X坐标，Y坐标，Z坐标
				// 这里设置相机在(0, 1.3, 3)的位置，俯视场景中心
				camera.position.set(0, 1.3, 3);

				// ----------------------------------------------------
				// 2. 创建场景（Scene）
				// ----------------------------------------------------
				
				// Scene是所有3D对象的容器，包含网格、光源、相机等
				scene = new THREE.Scene();

				// ----------------------------------------------------
				// 3. 光源设置（Lighting）
				// ----------------------------------------------------
				
				// 3.1 环境光（Ambient Light）
				// 环境光为整个场景提供均匀的基础照明
				// 参数：颜色（十六进制RGB值）
				// 这里使用浅灰色(0xcccccc)的环境光
				scene.add(new THREE.AmbientLight(0xcccccc));

				// 3.2 聚光灯（Spot Light）
				// 聚光灯产生锥形光束，有明确的照射方向和范围
				const spotLight = new THREE.SpotLight(0xffffff, 60);
				spotLight.angle = Math.PI / 5;          // 光束角度，Math.PI/5表示36度
				spotLight.penumbra = 0.2;               // 半影区域比例，0.2表示20%的半影
				spotLight.position.set(2, 3, 3);        // 光源在三维空间中的位置
				spotLight.castShadow = true;            // 启用阴影投射
				spotLight.shadow.camera.near = 3;       // 阴影相机近平面距离
				spotLight.shadow.camera.far = 10;       // 阴影相机远平面距离
				spotLight.shadow.mapSize.width = 2048;  // 阴影贴图宽度（像素），影响阴影质量
				spotLight.shadow.mapSize.height = 2048; // 阴影贴图高度（像素）
				spotLight.shadow.bias = -0.002;         // 阴影偏移，减少阴影失真
				spotLight.shadow.radius = 4;            // 阴影模糊半径，产生柔和阴影
				scene.add(spotLight);

				// 3.3 平行光（Directional Light）
				// 平行光模拟远处的光源（如太阳），所有光线平行
				const dirLight = new THREE.DirectionalLight(0x55505a, 3);
				dirLight.position.set(0, 3, 0);         // 从正上方照射
				dirLight.castShadow = true;             // 启用阴影
				dirLight.shadow.camera.near = 1;        // 阴影相机近平面
				dirLight.shadow.camera.far = 10;        // 阴影相机远平面
				
				// 设置阴影相机范围（正交投影）
				// 这四个值定义了阴影相机的视锥体
				dirLight.shadow.camera.right = 1;       // 右侧边界
				dirLight.shadow.camera.left = -1;      // 左侧边界
				dirLight.shadow.camera.top = 1;        // 顶部边界
				dirLight.shadow.camera.bottom = -1;    // 底部边界
				
				dirLight.shadow.mapSize.width = 1024;   // 阴影贴图尺寸
				dirLight.shadow.mapSize.height = 1024;
				scene.add(dirLight);

				// ----------------------------------------------------
				// 4. 裁剪平面定义（Clipping Planes）
				// ----------------------------------------------------
				
				// 裁剪平面是3D空间中的无限大平面，用于"切割"3D对象
				// 平面由法线向量和常数项定义：法线·点 + 常数 = 0
				
				// 4.1 全局裁剪平面
				// 参数：法线向量(-1,0,0)指向X轴负方向，常数0.1表示偏移量
				// 这个平面会切割整个场景中X>0.1部分的对象
				const globalPlane = new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0.1);
				
				// 4.2 局部裁剪平面1（用于环面结）
				// 法线(0,-1,0)指向Y轴负方向，常数0.8
				// 这个平面会切割环面结在Y>0.8的部分
				const localPlane1 = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.8);
				
				// 4.3 局部裁剪平面2（用于环面结）
				// 法线(0,0,-1)指向Z轴负方向，常数0.1
				const localPlane2 = new THREE.Plane(new THREE.Vector3(0, 0, -1), 0.1);

				// ----------------------------------------------------
				// 5. 裁剪组创建（Clipping Groups）
				// ----------------------------------------------------
				
				// 裁剪组允许将裁剪平面组织在一起，并控制它们的应用方式
				
				// 5.1 全局裁剪组
				// 这个裁剪组包含全局裁剪平面，会影响组内的所有对象
				const globalClippingGroup = new THREE.ClippingGroup();
				globalClippingGroup.clippingPlanes = [globalPlane]; // 分配裁剪平面数组

				// 5.2 环面结裁剪组
				// 这个裁剪组专门用于环面结对象，包含两个局部裁剪平面
				const knotClippingGroup = new THREE.ClippingGroup();
				knotClippingGroup.clippingPlanes = [localPlane1, localPlane2];
				
				// clipIntersection属性控制裁剪逻辑：
				// true: 保留所有裁剪平面交集的部分（逻辑与）
				// false: 保留所有裁剪平面并集的部分（逻辑或）
				knotClippingGroup.clipIntersection = true;

				// 5.3 构建裁剪组层级结构
				// 将knotClippingGroup添加到globalClippingGroup中
				// 这种层级结构允许复杂的裁剪组合
				scene.add(globalClippingGroup);           // 全局裁剪组添加到场景
				globalClippingGroup.add(knotClippingGroup); // 结裁剪组嵌套在全局组内

				// ----------------------------------------------------
				// 6. 几何体和材质创建
				// ----------------------------------------------------
				
				// 6.1 创建环面结材质
				// MeshPhongNodeMaterial是基于节点的Phong材质，支持高级着色器功能
				const material = new THREE.MeshPhongNodeMaterial({
					color: 0x80ee10,      // 材质颜色：亮绿色
					shininess: 0,          // 光泽度：0表示完全漫反射，无镜面高光
					side: THREE.DoubleSide, // 渲染面：双面渲染，裁剪后内外都可见
					
					// Alpha to Coverage技术：
					// 这是一种抗锯齿技术，特别适用于透明边缘
					// 在裁剪边缘处提供更平滑的过渡效果
					alphaToCoverage: true
				});

				// 6.2 创建环面结几何体
				// TorusKnotGeometry创建环面结（一种复杂的环状结构）
				// 参数说明：
				//   0.4 - 环面主要半径
				//   0.08 - 管状截面半径
				//   95 - 径向分段数（影响几何体精度）
				//   20 - 管状分段数
				const geometry = new THREE.TorusKnotGeometry(0.4, 0.08, 95, 20);

				// 6.3 创建网格对象
				// Mesh是Three.js中基本的3D对象，包含几何体和材质
				object = new THREE.Mesh(geometry, material);
				object.castShadow = true;                    // 对象投射阴影
				knotClippingGroup.add(object);               // 添加到结裁剪组

				// 6.4 创建地面
				// PlaneGeometry创建平面几何体
				const ground = new THREE.Mesh(
					new THREE.PlaneGeometry(9, 9, 1, 1),     // 9x9的平面，细分为1x1
					new THREE.MeshPhongNodeMaterial({
						color: 0xa0adaf,    // 地面颜色：青灰色
						shininess: 150,     // 较高的光泽度，产生明显高光
						alphaToCoverage: true // 同样应用Alpha to Coverage
					})
				);

				// 旋转地面使其水平
				// 默认平面是垂直的，绕X轴旋转-90度使其水平
				ground.rotation.x = -Math.PI / 2;
				ground.receiveShadow = true;                 // 地面接收阴影
				globalClippingGroup.add(ground);             // 地面添加到全局裁剪组

				// ----------------------------------------------------
				// 7. 渲染器设置（Renderer）
				// ----------------------------------------------------
				
				// 7.1 创建WebGPU渲染器
				// WebGPURenderer使用现代WebGPU API，相比WebGL性能更好
				renderer = new THREE.WebGPURenderer({ 
					antialias: true  // 启用抗锯齿，平滑边缘
				});
				
				// 7.2 渲染器配置
				renderer.shadowMap.enabled = true;  // 启用阴影映射
				renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比
				renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
				
				// 7.3 设置动画循环
				// setAnimationLoop替代了之前的requestAnimationFrame
				// 参数animate是每一帧调用的函数
				renderer.setAnimationLoop(animate);
				
				// 7.4 附加调试器
				renderer.inspector = new Inspector(); // 初始化Inspector调试工具
				
				// 7.5 窗口大小变化监听
				window.addEventListener('resize', onWindowResize);
				
				// 7.6 将渲染器的Canvas元素添加到页面
				// renderer.domElement是<canvas>元素
				document.body.appendChild(renderer.domElement);

				// ----------------------------------------------------
				// 8. 控制器设置（Controls）
				// ----------------------------------------------------
				
				// 8.1 创建轨道控制器
				// OrbitControls允许用户通过鼠标控制相机
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 8.2 设置控制目标点
				// 相机将围绕这个点旋转
				controls.target.set(0, 1, 0);
				
				// 8.3 更新控制器内部状态
				controls.update();

				// ----------------------------------------------------
				// 9. 用户界面（GUI）设置
				// ----------------------------------------------------
				
				// 9.1 创建GUI面板
				// Inspector提供的GUI工具，用于实时调整参数
				const gui = renderer.inspector.createParameters('裁剪设置');
				
				// 9.2 全局属性对象
				const props = {
					alphaToCoverage: true, // 控制Alpha to Coverage的开关
				};
				
				// 9.3 环面结裁剪组控制面板
				const folderKnot = gui.addFolder('环面结裁剪组');
				const propsKnot = {
					// 启用/禁用裁剪组
					get '启用'() {
						return knotClippingGroup.enabled;
					},
					set '启用'(v) {
						knotClippingGroup.enabled = v;
					},

					// 控制阴影是否也被裁剪
					get '阴影裁剪'() {
						return knotClippingGroup.clipShadows;
					},
					set '阴影裁剪'(v) {
						knotClippingGroup.clipShadows = v;
					},

					// 裁剪交叉模式
					get '交叉模式'() {
						return knotClippingGroup.clipIntersection;
					},
					set '交叉模式'(v) {
						knotClippingGroup.clipIntersection = v;
					},

					// 局部平面1的偏移量
					get '平面位置'() {
						return localPlane1.constant;
					},
					set '平面位置'(v) {
						localPlane1.constant = v;
					}
				};

				// 9.4 全局裁剪组控制面板
				const folderGlobal = gui.addFolder('全局裁剪组');
				const propsGlobal = {
					// 启用/禁用全局裁剪
					get '启用'() {
						return globalClippingGroup.enabled;
					},
					set '启用'(v) {
						globalClippingGroup.enabled = v;
					},

					// 全局平面偏移量
					get '平面位置'() {
						return globalPlane.constant;
					},
					set '平面位置'(v) {
						globalPlane.constant = v;
					}
				};

				// 9.5 添加GUI控件
				// Alpha to Coverage控制
				gui.add(props, 'alphaToCoverage').name('Alpha抗锯齿').onChange(function (value) {
					// 更新地面材质
					ground.material.alphaToCoverage = value;
					ground.material.needsUpdate = true; // 标记材质需要更新

					// 更新环面结材质
					material.alphaToCoverage = value;
					material.needsUpdate = true;
				});

				// 环面结裁剪组控件
				folderKnot.add(propsKnot, '启用');
				folderKnot.add(propsKnot, '阴影裁剪');
				folderKnot.add(propsKnot, '交叉模式');
				folderKnot.add(propsKnot, '平面位置', 0.3, 1.25).name('平面偏移量');

				// 全局裁剪组控件
				folderGlobal.add(propsGlobal, '启用');
				folderGlobal.add(propsGlobal, '平面位置', -0.4, 3).name('全局平面偏移');

				// ----------------------------------------------------
				// 10. 记录开始时间
				// ----------------------------------------------------
				
				// 记录应用启动时间，用于计算动画时间
				startTime = Date.now();
			}

			// ============================================
			// 窗口大小变化处理函数
			// ============================================
			
			/**
			 * onWindowResize函数：响应浏览器窗口大小变化
			 * 确保3D场景始终正确适配窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ============================================
			// 动画循环函数
			// ============================================
			
			/**
			 * animate函数：每一帧调用的动画循环
			 * @param {number} currentTime - 当前时间戳（毫秒）
			 * 由requestAnimationFrame或setAnimationLoop提供
			 */
			function animate(currentTime) {
				// 1. 计算经过的时间（秒）
				// 将毫秒转换为秒，便于动画计算
				const time = (currentTime - startTime) / 1000;

				// 2. 更新环面结对象的动画
				// 2.1 设置Y轴位置
				object.position.y = 0.8;
				
				// 2.2 设置旋转动画
				// X轴随时间缓慢旋转
				object.rotation.x = time * 0.5;
				// Y轴随时间更缓慢旋转
				object.rotation.y = time * 0.2;
				
				// 2.3 设置缩放动画
				// 使用余弦函数创建平滑的周期性缩放
				// Math.cos(time)在-1到1之间变化
				// 计算：(Math.cos(time) * 0.125 + 0.875)在0.75到1.0之间变化
				// 产生呼吸效果
				object.scale.setScalar(Math.cos(time) * 0.125 + 0.875);

				// 3. 渲染场景
				// 将3D场景通过相机视角渲染到2D画布上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>