<!-- 代码功能和技术点详解
一、主要功能概述
1. 核心功能：科赫雪花分形生成器
分形几何展示：实时生成并渲染多种科赫曲线和雪花图案

多图案展示：在同一场景中展示4种不同形状的科赫分形：

简单科赫曲线（单一线段）

三角形科赫雪花（闭合图形）

正方形科赫雪花（闭合图形）

复杂十字形科赫曲线

2. 交互与视觉效果
实时旋转动画：整个分形图案围绕Z轴持续缓慢旋转

响应式设计：自动适应浏览器窗口大小变化

随机色彩：为每个顶点生成随机蓝紫色调，增强视觉层次感

性能监控：实时显示帧率(FPS)等性能指标

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

模拟人眼视角，支持3D透视效果

参数：视野角度27°，适合观察几何细节

视锥体范围：1到10000单位

场景图(Scene Graph)：

使用父子节点层次结构（Object3D → LineSegments）

父节点控制整体旋转，子节点包含实际几何体

WebGL渲染器：

硬件加速的3D渲染

自动处理着色器编译、状态管理

2. 高效几何数据管理（BufferGeometry）
传统Geometry vs BufferGeometry
特性	传统Geometry	BufferGeometry
数据存储	JavaScript对象	类型化数组(Typed Arrays)
性能	较低（垃圾回收频繁）	极高（直接GPU传输）
内存	较大	较小
灵活性	易用性高	需要手动管理
BufferGeometry数据组织
javascript
// 三个核心数据数组
positions = [x1,y1,z1, x2,y2,z2, ...]  // 顶点位置
colors = [r1,g1,b1, r2,g2,b2, ...]     // 顶点颜色
indices = [0,1, 1,2, 2,3, ...]        // 顶点索引（线段连接）
关键技术优势：
顶点索引复用：通过indices数组重用顶点，减少内存占用

批量数据传输：一次性将所有数据发送到GPU

类型化数组优化：Float32Array提供内存对齐，加速处理

3. 科赫雪花分形算法
分形原理
科赫曲线是经典的分形几何，具有自相似性和无限细节的特性。

递归算法实现
javascript
function snowflake_iteration(p0, p4, depth) {
    // 递归终止条件
    if (--depth < 0) {
        添加线段(p0, p4);
        return;
    }
    
    // 线段三等分
    const p1 = p0 + (p4 - p0) / 3;
    const p3 = p0 + 2 * (p4 - p0) / 3;
    
    // 计算等边三角形顶点
    const angle = 原角度 + 60度;
    const p2 = 基于p1和角度计算;
    
    // 递归处理4个子线段
    递归(p0, p1, depth);
    递归(p1, p2, depth);
    递归(p2, p3, depth);
    递归(p3, p4, depth);
}
算法复杂度分析
空间复杂度：O(4^n) 顶点增长（n为迭代次数）

迭代次数：代码中使用4次迭代，生成足够细节但保持性能

4. 渲染管线优化技术
顶点着色器优化
javascript
// LineBasicMaterial + 顶点颜色实现
// GPU并行处理每个顶点，无需CPU逐帧计算
material = new THREE.LineBasicMaterial({ vertexColors: true });
视锥体裁剪(Frustum Culling)
javascript
geometry.computeBoundingSphere();
// 自动计算几何体的包围球
// Three.js渲染时检查包围球与视锥体的关系
// 完全在视野外时跳过渲染
设备像素比适配
javascript
renderer.setPixelRatio(window.devicePixelRatio);
// 自动适配Retina等高DPI显示屏
// 避免在高分辨率设备上模糊
5. 动画与性能管理
动画循环机制
javascript
// 现代API：setAnimationLoop
renderer.setAnimationLoop(animate);
// 替代旧的requestAnimationFrame方式
// 自动处理浏览器标签页隐藏/显示
性能监控集成
javascript
// Stats.js集成
stats = new Stats();
// 显示：
// - FPS: 帧率（60为满帧）
// - MS: 渲染时间（毫秒）
// - MB: 内存使用
窗口自适应
javascript
window.addEventListener('resize', onWindowResize);
// 三要素更新：
// 1. 相机宽高比（防止拉伸）
// 2. 投影矩阵（必须手动更新）
// 3. 渲染器尺寸
6. 模块化与工程化
ES6模块系统
javascript
// 使用importmap进行路径映射
{
  "imports": {
    "three": "../build/three.module.js",
    "three/addons/": "./jsm/"
  }
}
// 优势：清晰的依赖关系，Tree Shaking支持
代码组织结构
text
初始化函数(init)
├── 场景设置（相机、场景、渲染器）
├── 几何生成（科赫算法）
├── 数据装配（BufferGeometry）
├── 对象创建（LineSegments）
├── 事件绑定（resize监听）
└── 动画启动
三、技术亮点总结
1. 性能优化方面
✅ 使用BufferGeometry最大化GPU效率

✅ 顶点索引减少数据冗余

✅ 视锥体裁剪避免无效渲染

✅ 类型化数组加速CPU-GPU数据传输

2. 图形学技术
✅ 分形几何的递归算法实现

✅ 顶点着色器颜色插值

✅ 透视投影相机设置

✅ 3D变换层级控制

3. 现代Web技术
✅ ES6模块化导入

✅ 响应式设计适配

✅ 性能监控集成

✅ 平滑动画循环

4. 教育价值
✅ 展示分形几何的数学之美

✅ 演示Three.js最佳实践

✅ 体现递归算法的实际应用

✅ 展示WebGL性能优化技巧

四、潜在优化建议
LOD（细节层次）：根据相机距离动态调整迭代次数

实例化渲染：多个相同分形使用实例化提高性能

Web Worker：将分形计算移到Worker线程

几何缓存：缓存计算结果避免重复计算

交互控制：添加GUI控制迭代次数、颜色、旋转速度等参数 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上
			修改：将英文标题改为中文标题
		-->
		<title>Three.js WebGL示例 - 缓冲几何体 - 索引线段 - 科赫雪花</title>
		
		<!-- 
			字符编码设置：
			utf-8 是最广泛使用的字符编码，支持中文等多种语言
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置：
			- width=device-width：宽度等于设备宽度
			- user-scalable=no：禁止用户缩放（为了更好的3D体验）
			- 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样式文件：
			type="text/css"：指定文件类型为CSS
			rel="stylesheet"：定义当前文档与链接资源的关系为样式表
			href="main.css"：样式文件的路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			主容器：
			id="container"：为这个div元素赋予一个唯一标识符
			这个div将作为Three.js渲染器的画布容器
			Three.js会自动创建一个canvas元素并添加到这个div中
		-->
		<div id="container"></div>
		
		<!-- 
			信息显示区域：
			修改：将英文信息改为中文信息
			id="info"：信息区域的标识符
			- target="_blank"：点击链接时在新标签页打开
			- rel="noopener"：安全设置，防止新打开的页面通过window.opener访问原始页面
		-->
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL示例 - 缓冲几何体 - 索引线段 - 科赫雪花生成</div>

		<!-- 
			导入映射(Import Map)：
			type="importmap"：这是一个新的Web标准，允许定义模块导入的映射关系
			作用：告诉浏览器当遇到import语句时，应该从哪里加载模块
			
			使用场景：在ES6模块系统中，可以简化模块路径的引用
			例如：import * as THREE from 'three' 会根据下面的映射找到实际路径
			
			映射关系：
			- "three": "../build/three.module.js" 
			  当导入'three'时，实际加载的是相对于当前HTML文件的../build/three.module.js
			- "three/addons/": "./jsm/"
			  当导入'three/addons/*'时，实际加载的是./jsm/目录下的对应文件
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"：这是一个ES6模块脚本
			模块脚本有自己的作用域，不会污染全局命名空间
			支持import/export语法
			默认启用严格模式
		-->
		<script type="module">
			// ============ 模块导入部分 ============
			// 导入Three.js库的所有导出内容到THREE命名空间
			// 这样我们可以使用 THREE.Scene、THREE.Vector3 等
			import * as THREE from 'three';
			
			// 导入性能监视器（stats.js）
			// 这是一个Three.js的扩展库，用于显示帧率(FPS)、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// ============ 全局变量声明 ============
			// 这些变量在整个模块中共享，用于存储Three.js的核心对象
			let container, stats;        // container: DOM容器元素；stats: 性能监视器实例
			let camera, scene, renderer; // Three.js三大核心对象
			let parent_node;             // 父节点对象，用于对整个几何体进行旋转操作

			// ============ 初始化调用 ============
			// 页面加载后立即执行初始化函数
			// 这是整个程序的入口点
			init();

			/**
			 * 初始化函数 - 整个Three.js应用的核心设置
			 * 这个函数负责：
			 * 1. 获取DOM元素
			 * 2. 创建Three.js核心对象（相机、场景、渲染器）
			 * 3. 创建几何体和材质
			 * 4. 设置事件监听器
			 * 5. 开始动画循环
			 */
			function init() {
				// ---------- 1. DOM元素获取 ----------
				// 获取HTML中id为"container"的div元素
				// 这个元素将作为Three.js渲染器的容器
				container = document.getElementById('container');

				// ---------- 2. 相机(Camera)创建 ----------
				// 创建透视投影相机(PerspectiveCamera)
				// 参数说明：
				// 参数1: fov - 视野角度(Field of View)，单位是度，这里27度适合显示几何细节
				// 参数2: aspect - 宽高比，通常设置为窗口宽高比
				// 参数3: near - 近裁剪面距离，相机能看到的最小距离
				// 参数4: far - 远裁剪面距离，相机能看到的最大距离
				// 注意：near和far之间的范围被称为"视锥体"(frustum)，只有在这个范围内的物体才会被渲染
				camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 10000);
				
				// 设置相机位置
				// 在Three.js坐标系中：
				// - X轴：水平方向，向右为正
				// - Y轴：垂直方向，向上为正
				// - Z轴：深度方向，从屏幕向外为正
				// 这里将相机沿着Z轴正方向移动9000个单位，以便能够看到整个场景
				camera.position.z = 9000;

				// ---------- 3. 场景(Scene)创建 ----------
				// 场景是所有3D对象的容器，包括网格(mesh)、灯光(light)、相机等
				// 可以理解为3D世界，渲染器会将场景中的内容渲染到画布上
				scene = new THREE.Scene();

				// ---------- 4. 几何体(Geometry)和材质(Material)创建 ----------
				// 创建缓冲几何体(BufferGeometry)
				// BufferGeometry是Three.js中最高效的几何体类型
				// 它使用类型化数组(Typed Arrays)存储顶点数据，性能优于传统的Geometry
				const geometry = new THREE.BufferGeometry();
				
				// 创建线段基础材质(LineBasicMaterial)
				// 参数说明：
				// - vertexColors: true 启用顶点颜色，每个顶点可以有独立的颜色
				//   如果不启用，整条线段将使用单一颜色
				const material = new THREE.LineBasicMaterial({ vertexColors: true });

				// ---------- 5. 数据数组初始化 ----------
				// 这些数组将存储几何体的所有数据
				const indices = [];    // 顶点索引数组：定义顶点如何连接成线段
				                        // 例如：[0,1,1,2]表示顶点0-1相连，顶点1-2相连
				
				const positions = [];  // 顶点位置数组：存储每个顶点的x,y,z坐标
				                        // 格式：[x1,y1,z1, x2,y2,z2, x3,y3,z3, ...]
				
				const colors = [];     // 顶点颜色数组：存储每个顶点的r,g,b颜色值
				                        // 格式：[r1,g1,b1, r2,g2,b2, r3,g3,b3, ...]
				
				// 位置索引计数器
				// 用于追踪当前已经添加了多少个顶点
				// 每次添加顶点后自增1
				let next_positions_index = 0;

				// ---------- 6. 科赫雪花参数设置 ----------
				// 迭代次数：决定科赫曲线的复杂程度
				// 每次迭代都会将每条线段细分为更小的线段
				// 注意：迭代次数增加会指数级增加顶点数量，影响性能
				const iteration_count = 4;
				
				// 角度设置：科赫曲线的特征角度是60度
				// 将60度转换为弧度制（Three.js使用弧度制）
				// 弧度制公式：弧度 = 角度 × π / 180
				const rangle = 60 * Math.PI / 180.0;  // 约等于1.0472弧度

				/**
				 * 添加顶点函数
				 * 功能：将顶点数据添加到对应的数组中
				 * 
				 * 流程：
				 * 1. 将顶点的x,y,z坐标添加到positions数组
				 * 2. 生成随机颜色并添加到colors数组
				 * 3. 返回当前顶点的索引并递增计数器
				 * 
				 * @param {THREE.Vector3} v - 三维向量对象，包含x,y,z坐标
				 * @returns {number} 当前顶点在positions数组中的索引
				 */
				function add_vertex(v) {
					// 添加顶点位置坐标到positions数组
					// 注意：positions数组是一维的，每三个元素表示一个顶点
					positions.push(v.x, v.y, v.z);
					
					// 添加顶点颜色到colors数组
					// 使用随机颜色生成：
					// - Math.random()生成0-1之间的随机数
					// - Math.random() * 0.5 + 0.5：生成0.5-1.0之间的随机数，避免颜色太暗
					// - 第三个分量固定为1（蓝色分量），使整体呈现蓝紫色调
					colors.push(
						Math.random() * 0.5 + 0.5,  // R分量：0.5-1.0
						Math.random() * 0.5 + 0.5,  // G分量：0.5-1.0
						1                           // B分量：固定为1，加强蓝色
					);
					
					// 返回当前顶点的索引（即next_positions_index的当前值）
					// 然后自增1，为下一个顶点做准备
					return next_positions_index++;
				}

				/**
				 * 科赫雪花单次迭代函数（递归实现）
				 * 
				 * 科赫曲线生成原理：
				 * 1. 将一条线段等分为三段
				 * 2. 以中间一段为底边，向外作等边三角形
				 * 3. 去掉底边，保留三角形的两条边
				 * 4. 对每条新线段重复上述过程
				 * 
				 * 递归终止条件：达到指定深度（iteration参数控制）
				 * 
				 * 参数说明：
				 * @param {THREE.Vector3} p0 - 线段起点
				 * @param {THREE.Vector3} p4 - 线段终点
				 * @param {number} depth - 当前递归深度，每次递归减1
				 */
				function snowflake_iteration(p0, p4, depth) {
					// 递归终止条件检查
					// 先减1再判断，当depth变为负数时停止递归
					if (--depth < 0) {
						// 获取起点p0的索引（注意：p0已经在之前的调用中添加）
						// next_positions_index - 1 就是p0的索引
						const i = next_positions_index - 1;
						
						// 添加终点p4
						add_vertex(p4);
						
						// 创建线段索引：从p0(i)连接到p4(i+1)
						indices.push(i, i + 1);
						
						// 结束当前递归分支
						return;
					}

					// ============ 科赫曲线细分计算 ============
					// 这部分计算线段三等分点和等边三角形顶点
					
					// 步骤1：计算向量v = p4 - p0（从p0指向p4的向量）
					const v = p4.clone().sub(p0);
					
					// 步骤2：计算向量v的三分之一长度
					// multiplyScalar(1/3)相当于将向量长度缩小为原来的1/3
					const v_tier = v.clone().multiplyScalar(1 / 3);
					
					// 步骤3：计算第一个三等分点p1
					// p1 = p0 + v/3
					const p1 = p0.clone().add(v_tier);
					
					// 步骤4：计算等边三角形的顶点p2
					// 1. 计算原线段的方向角度
					const angle = Math.atan2(v.y, v.x) + rangle;  // 原角度 + 60度
					
					// 2. 获取三分之一线段的长度
					const length = v_tier.length();
					
					// 3. 计算p2点的坐标
					// p2 = p1 + (cos(angle), sin(angle)) * length
					const p2 = p1.clone();
					p2.x += Math.cos(angle) * length;  // 添加X分量
					p2.y += Math.sin(angle) * length;  // 添加Y分量
					
					// 步骤5：计算第二个三等分点p3
					// p3 = p0 + 2v/3 = p0 + v/3 + v/3
					const p3 = p0.clone().add(v_tier).add(v_tier);

					// ============ 递归处理四个子线段 ============
					// 对四个线段段分别进行递归处理：
					// 1. p0 → p1
					// 2. p1 → p2（等边三角形的左边）
					// 3. p2 → p3（等边三角形的右边）
					// 4. p3 → p4
					snowflake_iteration(p0, p1, depth);
					snowflake_iteration(p1, p2, depth);
					snowflake_iteration(p2, p3, depth);
					snowflake_iteration(p3, p4, depth);
				}

				/**
				 * 科赫雪花主生成函数
				 * 
				 * 功能：控制整个科赫雪花/曲线的生成过程
				 * 可以生成开放的科赫曲线或闭合的科赫雪花
				 * 
				 * 参数说明：
				 * @param {Array} points - 控制点数组，定义初始形状
				 * @param {boolean} loop - 是否闭合循环
				 *                  true：生成科赫雪花（封闭图形）
				 *                  false：生成科赫曲线（开放图形）
				 * @param {number} x_offset - 每次迭代后X轴的偏移量
				 *                  用于在水平方向排列多个迭代阶段
				 */
				function snowflake(points, loop, x_offset) {
					// 外层循环：控制迭代次数
					for (let iteration = 0; iteration != iteration_count; iteration++) {
						// 添加起始顶点（points数组的第一个点）
						// 注意：每条线段都需要一个起点
						add_vertex(points[0]);

						// 遍历points数组中的所有线段
						// p_count = points.length - 1：线段数量比点数少1
						for (let p_index = 0, p_count = points.length - 1; p_index != p_count; p_index++) {
							// 对当前线段进行科赫迭代
							// 参数：起点、终点、当前迭代深度
							snowflake_iteration(points[p_index], points[p_index + 1], iteration);
						}

						// 如果需要闭合图形，处理最后一段线段
						// 即：从最后一个点回到第一个点
						if (loop) {
							snowflake_iteration(points[points.length - 1], points[0], iteration);
						}

						// 为下一次迭代准备：平移所有控制点
						// 这样每次迭代的结果会水平排列，便于观察迭代过程
						for (let p_index = 0, p_count = points.length; p_index != p_count; p_index++) {
							points[p_index].x += x_offset;  // X轴偏移
						}
					}
				}

				// ============ 生成四个不同形状的科赫图案 ============
				// 变量y用于控制每个图案的垂直位置
				// 每个图案生成后，y增加一定值，使下一个图案向下排列
				let y = 0;

				// ---------- 图案1：简单科赫曲线（单一线段） ----------
				// 初始形状：一条水平线段，从(0,y,0)到(500,y,0)
				// loop = false：不闭合，生成科赫曲线
				// x_offset = 600：每次迭代向右偏移600个单位
				snowflake(
					[
						new THREE.Vector3(0, y, 0),      // 起点
						new THREE.Vector3(500, y, 0)     // 终点
					],
					false,  // 不闭合（开放曲线）
					600     // X轴偏移量
				);

				// ---------- 图案2：三角形科赫雪花 ----------
				// 将y向下移动600个单位，为下一个图案腾出空间
				y += 600;
				
				// 初始形状：一个三角形
				// 三个顶点形成一个倒三角形
				snowflake(
					[
						new THREE.Vector3(0, y, 0),           // 左下角
						new THREE.Vector3(250, y + 400, 0),   // 顶部
						new THREE.Vector3(500, y, 0)          // 右下角
					],
					true,   // 闭合（科赫雪花）
					600     // X轴偏移量
				);

				// ---------- 图案3：正方形科赫雪花 ----------
				// 继续向下移动600个单位
				y += 600;
				
				// 初始形状：一个正方形
				// 四个顶点按顺时针方向定义
				snowflake(
					[
						new THREE.Vector3(0, y, 0),           // 左上角
						new THREE.Vector3(500, y, 0),         // 右上角
						new THREE.Vector3(500, y + 500, 0),   // 右下角
						new THREE.Vector3(0, y + 500, 0)      // 左下角
					],
					true,   // 闭合（科赫雪花）
					600     // X轴偏移量
				);

				// ---------- 图案4：复杂科赫曲线（十字形状） ----------
				// 向下移动1000个单位，因为这个图案比较大
				y += 1000;
				
				// 初始形状：一个十字形（8条线段从中心向外辐射）
				// 这个形状的科赫曲线会产生非常复杂的分形图案
				snowflake(
					[
						new THREE.Vector3(250, y, 0),        // 中心点（起点）
						new THREE.Vector3(500, y, 0),        // 向右
						new THREE.Vector3(250, y, 0),        // 回到中心
						new THREE.Vector3(250, y + 250, 0),  // 向上
						new THREE.Vector3(250, y, 0),        // 回到中心
						new THREE.Vector3(0, y, 0),          // 向左
						new THREE.Vector3(250, y, 0),        // 回到中心
						new THREE.Vector3(250, y - 250, 0),  // 向下
						new THREE.Vector3(250, y, 0)         // 回到中心（终点）
					],
					false,  // 不闭合（开放曲线）
					600     // X轴偏移量
				);

				// ============ 几何体数据设置 ============
				// 将所有计算好的数据设置到BufferGeometry对象中
				
				// 1. 设置顶点索引
				// 索引定义了顶点如何连接成线段
				// 在LineSegments中，每两个索引定义一条线段
				geometry.setIndex(indices);
				
				// 2. 设置顶点位置属性
				// Float32BufferAttribute：使用32位浮点数存储顶点数据
				// 参数1: positions数组（包含所有顶点的x,y,z坐标）
				// 参数2: 3 表示每个顶点有3个分量（x,y,z）
				geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
				
				// 3. 设置顶点颜色属性
				// 参数1: colors数组（包含所有顶点的r,g,b颜色值）
				// 参数2: 3 表示每个颜色有3个分量（r,g,b）
				geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
				
				// 4. 计算边界球体(Bounding Sphere)
				// 作用：用于视锥体裁剪(Frustum Culling)
				// 当几何体完全在视锥体外时，Three.js可以跳过渲染，提高性能
				geometry.computeBoundingSphere();

				// ============ 创建线段对象并添加到场景 ============
				// 创建LineSegments对象（线段集合）
				// LineSegments：将索引数组解释为独立的线段（不连接成连续线）
				const lineSegments = new THREE.LineSegments(geometry, material);
				
				// 调整线段对象的位置
				// 由于生成的几何体在原点附近，将其向左上方移动，使其在视口中居中
				lineSegments.position.x -= 1200;  // 向左移动1200个单位
				lineSegments.position.y -= 1200;  // 向上移动1200个单位

				// 创建父节点对象
				// 技巧：将几何体添加到父节点，然后旋转父节点
				// 这样可以实现整个几何体绕自身中心旋转
				parent_node = new THREE.Object3D();
				parent_node.add(lineSegments);  // 将线段对象添加到父节点
				scene.add(parent_node);         // 将父节点添加到场景

				// ============ 渲染器(Renderer)设置 ============
				// 创建WebGL渲染器
				// WebGLRenderer是Three.js的主渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// 这可以确保在高DPI设备（如Retina显示屏）上清晰显示
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环
				// setAnimationLoop替代了旧的requestAnimationFrame方式
				// 它会持续调用animate函数，实现动画效果
				renderer.setAnimationLoop(animate);

				// 将渲染器的DOM元素（canvas画布）添加到容器div中
				// renderer.domElement就是Three.js创建的canvas元素
				container.appendChild(renderer.domElement);

				// ============ 性能监视器设置 ============
				// 创建Stats对象（性能监视器）
				stats = new Stats();
				
				// 将Stats的DOM元素添加到容器中
				// stats.dom是一个div元素，包含帧率、渲染时间等显示
				container.appendChild(stats.dom);

				// ============ 事件监听器设置 ============
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 窗口大小变化处理函数
			 * 
			 * 功能：当浏览器窗口大小改变时，调整Three.js的渲染尺寸和相机参数
			 * 确保3D场景始终正确显示，不会变形
			 */
			function onWindowResize() {
				// 1. 更新相机的宽高比
				// 相机的aspect属性需要与窗口宽高比保持一致
				// 否则渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法来更新内部矩阵
				// 否则相机不会应用新的参数
				camera.updateProjectionMatrix();
				
				// 3. 更新渲染器尺寸
				// 使渲染器的画布大小与窗口大小保持一致
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 
			 * 功能：每一帧都会被调用，用于更新动画状态和重新渲染场景
			 * 这是Three.js应用的核心动画循环
			 * 
			 * 调用时机：由renderer.setAnimationLoop自动调用
			 * 调用频率：通常每秒60次（与浏览器刷新率同步）
			 */
			function animate() {
				// 1. 获取当前时间（单位：秒）
				// Date.now()返回当前时间戳（毫秒）
				// * 0.001转换为秒，便于计算
				const time = Date.now() * 0.001;

				// 2. 更新场景状态
				// 使父节点绕Z轴旋转
				// 旋转速度：每秒0.5弧度（约28.6度/秒）
				parent_node.rotation.z = time * 0.5;

				// 3. 渲染场景
				// 这是最核心的渲染调用
				// 将场景中的内容通过相机视角渲染到画布上
				renderer.render(scene, camera);

				// 4. 更新性能监视器
				// 更新帧率、渲染时间等统计信息的显示
				stats.update();
			}
		</script>
	</body>
</html>