<!-- Three.js 几何体展示馆 - 代码功能与技术点分析
一、项目概述
这是一个基于 Three.js 的 3D 几何体展示应用，展示了 16 种不同的三维几何体。应用通过 WebGL 在浏览器中实时渲染 3D 场景，所有几何体都带有动画效果。

二、核心功能
1. 几何体展示系统
16种几何体分4行展示，每行4个，矩阵式布局

分类展示：

第1行：基础多面体（球体、二十面体、八面体、四面体）

第2行：平面类几何体（平面、立方体、圆形、圆环）

第3行：旋转/环形几何体（圆柱体、旋转体、圆环面、环形结）

第4行：特殊几何体（胶囊体、参数化平面、克莱因瓶、莫比乌斯带）

2. 动态动画系统
相机环绕动画：相机围绕场景中心做圆周运动，半径800单位

几何体旋转动画：所有几何体同时绕X轴和Y轴旋转，速度不同

实时更新：每秒60帧的平滑动画

3. 交互与响应式
窗口自适应：响应式设计，自动调整渲染尺寸和相机比例

性能监控：实时显示帧率(FPS)、渲染时间(MS)、内存占用(MB)

4. 视觉效果
统一材质系统：所有几何体使用相同的UV网格纹理材质

双面渲染：几何体内外表面都可视

光照系统：环境光+点光源组合照明

三、主要技术点
1. Three.js 核心架构
场景图(Scene Graph)
javascript
// 层次结构
Scene
├── AmbientLight (环境光)
├── Camera (相机)
│   └── PointLight (点光源)
├── 16个Mesh对象 (几何体)
└── 渲染器管理
坐标系系统
世界坐标系：所有对象的绝对位置

局部坐标系：每个对象自身的坐标系

相机坐标系：从相机视角观察的坐标系

2. 几何体生成技术
内置几何体类型
基本几何体：SphereGeometry、BoxGeometry、PlaneGeometry

正多面体：IcosahedronGeometry、OctahedronGeometry、TetrahedronGeometry

旋转几何体：CylinderGeometry、LatheGeometry

环形几何体：TorusGeometry、TorusKnotGeometry、RingGeometry

参数化几何体：ParametricGeometry（通过数学函数定义）

几何体参数详解
javascript
// 球体：半径 + 分段数
new THREE.SphereGeometry(75, 20, 10)

// 立方体：尺寸 + 各方向分段数
new THREE.BoxGeometry(100, 100, 100, 4, 4, 4)

// 旋转体：轮廓点 + 旋转分段
new THREE.LatheGeometry(points, 20)
3. 材质与纹理系统
Phong材质模型
漫反射：基于纹理贴图的颜色

镜面高光：点光源产生的反射亮点

环境光反射：全局均匀照明

纹理处理
UV映射：将2D纹理映射到3D表面

重复平铺：THREE.RepeatWrapping

各向异性过滤：anisotropy: 16，提升倾斜视角的纹理质量

颜色空间：THREE.SRGBColorSpace，确保颜色一致性

4. 光照系统
双光源设计
javascript
// 1. 环境光 - 全局基础照明
new THREE.AmbientLight(0xcccccc, 1.5)

// 2. 点光源 - 附加到相机，随视角移动
new THREE.PointLight(0xffffff, 2.5, 0, 0)
5. 动画与渲染系统
动画循环机制
javascript
// 使用requestAnimationFrame的Three.js封装
renderer.setAnimationLoop(animate);

// 动画更新逻辑
function animate() {
    render();      // 渲染场景
    stats.update(); // 更新性能监控
}
数学驱动的动画
javascript
// 三角函数生成平滑动画
const timer = Date.now() * 0.0001;

// 相机圆周运动：x = r*cos(θ), z = r*sin(θ)
camera.position.x = Math.cos(timer) * 800;
camera.position.z = Math.sin(timer) * 800;

// 几何体旋转：不同轴不同速度
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
6. 性能优化技术
渲染优化
抗锯齿：antialias: true，平滑边缘

设备像素比适配：setPixelRatio(window.devicePixelRatio)

视锥体剔除：自动剔除视野外的对象

内存管理
几何体复用：多个几何体共享相同材质

缓冲区管理：WebGL缓冲区自动管理

垃圾回收：适当的作用域管理避免内存泄漏

7. 现代JavaScript特性
ES6模块系统
javascript
// 导入映射 (Import Maps)
<script type="importmap">
// 模块别名配置
</script>

// ES6模块导入
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
异步加载
纹理异步加载：TextureLoader().load() 非阻塞加载

按需渲染：动画循环仅在需要时渲染

8. 响应式设计
自适应布局
javascript
// 窗口大小变化处理
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix(); // 更新投影矩阵
    renderer.setSize(window.innerWidth, window.innerHeight);
}
9. 数学原理应用
三维变换
平移：object.position.set(x, y, z)

旋转：object.rotation.x/y/z

缩放：object.scale.multiplyScalar(factor)

参数化曲面
克莱因瓶：拓扑学中的不可定向曲面

莫比乌斯带：单面单边的特殊曲面

数学函数定义：f(u, v) → (x, y, z)

四、技术亮点
1. WebGL硬件加速
利用GPU进行矩阵运算和光栅化

硬件级别的3D渲染性能

2. 模块化架构
清晰的代码组织结构

可扩展的几何体添加机制

3. 教育价值
可视化展示各种几何体

实时演示3D图形学概念

适合学习和教学使用

4. 跨平台兼容
纯Web技术，无需插件

支持现代桌面和移动浏览器

响应式设计适配不同屏幕

五、应用场景
1. 教育演示
3D图形学教学

几何体可视化

WebGL技术展示

2. 开发测试
Three.js功能测试

几何体性能基准

材质和光照测试

3. 艺术展示
3D几何艺术

动态视觉效果

交互式艺术装置

六、技术栈总结
核心框架：Three.js (r150+)

渲染引擎：WebGL 2.0/1.0

模块系统：ES6 Modules + Import Maps

性能监控：Stats.js

开发语言：JavaScript ES6+

图形数学：线性代数 + 三角函数 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面元数据区域：
			- title: 浏览器标签页显示的标题，也是搜索引擎收录时显示的主要标题
			- charset: 设置文档字符编码为UTF-8，支持中文字符
			- viewport: 视口设置，用于移动端适配和响应式设计
			  * width=device-width: 宽度等于设备宽度
			  * user-scalable=no: 禁止用户手动缩放（在某些移动端场景下）
			  * minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
			- stylesheet: 引入外部CSS样式文件，分离样式和结构
		-->
		<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>
		<!-- 
			页面信息显示区域：
			- id="info": 用于CSS样式定位和JavaScript操作
			- 显示页面标题和three.js官方链接
			- target="_blank": 在新标签页打开链接
			- rel="noopener": 安全特性，防止新页面通过window.opener访问原页面
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL - 几何体展示馆 | 
			<span>共展示16种3D几何体</span> | 
			<span>相机自动环绕，几何体持续旋转</span>
		</div>

		<!-- 
			模块导入映射配置 (Import Maps)：
			- 现代浏览器特性，允许定义JavaScript模块的导入路径映射
			- 相当于为模块设置别名，简化导入语句
			- "three": 将three指向本地的three.module.js文件
			- "three/addons/": 将three/addons/前缀指向./jsm/目录
			作用：使得后续import语句可以使用简化的路径
		-->
		<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命名空间
			// *表示导入所有导出内容，as THREE表示重命名为THREE对象
			import * as THREE from 'three';

			// 导入性能监控器（Stats.js）
			// Stats是一个显示FPS（帧率）、MS（渲染时间）、MB（内存占用）的小面板
			// 常用于性能测试和优化
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入参数化几何体类
			// ParametricGeometry：通过数学函数定义的几何体
			import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
			
			// 导入预定义的参数化函数
			// plane：平面函数
			// klein：克莱因瓶函数（一种无定向的曲面）
			// mobius：莫比乌斯带函数（单面曲面）
			import { plane, klein, mobius } from 'three/addons/geometries/ParametricFunctions.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// camera：相机对象，决定观察场景的视角
			// scene：场景对象，所有3D对象的容器
			// renderer：渲染器对象，负责将3D场景渲染到2D画布
			// stats：性能统计对象
			let camera, scene, renderer, stats;

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

			/**
			 * 初始化函数 - 整个应用的启动入口
			 * 
			 * 主要功能：
			 * 1. 创建3D场景的基础设施（相机、场景、渲染器）
			 * 2. 设置光照系统
			 * 3. 创建和摆放所有几何体对象
			 * 4. 配置渲染器和性能监控
			 * 5. 设置事件监听器
			 * 
			 * 执行流程：
			 * 1. 相机创建 → 2. 场景创建 → 3. 灯光设置 → 4. 材质创建
			 * 5. 几何体创建（分四行排列）→ 6. 渲染器设置 → 7. 事件绑定
			 */
			function init() {
				// ----------------------------------------------------
				// 第一部分：创建相机和场景
				// ----------------------------------------------------
				
				/**
				 * 创建透视相机（PerspectiveCamera）
				 * 参数说明：
				 * @param {number} 45 - 视野角度（Field of View），单位是度
				 *   决定了相机能看到多宽的场景，类似人眼的视野
				 * @param {number} window.innerWidth / window.innerHeight - 宽高比
				 *   根据浏览器窗口尺寸计算，保持图像不变形
				 * @param {number} 1 - 近裁剪面距离，比这个距离近的物体不显示
				 * @param {number} 2000 - 远裁剪面距离，比这个距离远的物体不显示
				 * 
				 * 透视相机特点：近大远小，符合真实世界的视觉效果
				 */
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
				
				// 设置相机初始位置
				// 三个参数分别对应X轴（水平）、Y轴（垂直）、Z轴（深度）
				// Y=500：将相机放在一定高度，俯视场景
				camera.position.y = 500;

				/**
				 * 创建场景对象
				 * 场景是Three.js的核心容器，所有的3D对象（网格、灯光、相机等）
				 * 都需要添加到场景中才能被渲染
				 */
				scene = new THREE.Scene();

				// 临时变量声明
				let object, geometry;  // object用于存储网格对象，geometry用于存储几何体

				// ----------------------------------------------------
				// 第二部分：设置光照系统
				// ----------------------------------------------------
				
				/**
				 * 创建环境光（AmbientLight）
				 * 环境光是均匀照射在所有物体上的光，没有方向性
				 * 参数说明：
				 * @param {number} 0xcccccc - 光的颜色（十六进制RGB值）
				 *   cccccc是浅灰色，0x表示十六进制
				 * @param {number} 1.5 - 光的强度，值越大光越亮
				 */
				const ambientLight = new THREE.AmbientLight(0xcccccc, 1.5);
				scene.add(ambientLight);  // 将环境光添加到场景

				/**
				 * 创建点光源（PointLight）
				 * 点光源是从一个点向所有方向发射的光，类似灯泡
				 * 参数说明：
				 * @param {number} 0xffffff - 白色光
				 * @param {number} 2.5 - 光的强度
				 * @param {number} 0 - 光的衰减距离（0表示不衰减）
				 * @param {number} 0 - 衰减指数（0表示无指数衰减）
				 * 
				 * 将点光源添加到相机上，这样光源会随着相机一起移动
				 * 相当于一个"头灯"效果
				 */
				const pointLight = new THREE.PointLight(0xffffff, 2.5, 0, 0);
				camera.add(pointLight);  // 将光源附加到相机上
				scene.add(camera);       // 将相机（包含光源）添加到场景

				// ----------------------------------------------------
				// 第三部分：创建材质和纹理
				// ----------------------------------------------------
				
				/**
				 * 加载纹理贴图
				 * 纹理是覆盖在几何体表面的图像，增加细节和真实感
				 * TextureLoader是异步加载纹理的类
				 * 
				 * 纹理文件说明：
				 * 'textures/uv_grid_opengl.jpg' - UV网格贴图
				 *   - 这是一种调试贴图，可以清楚地看到纹理映射是否正确
				 *   - 通常包含彩色网格和字母，便于观察纹理拉伸和扭曲
				 */
				const map = new THREE.TextureLoader().load('textures/uv_grid_opengl.jpg');
				
				// 设置纹理包装方式（纹理坐标超出[0,1]范围时的处理）
				map.wrapS = map.wrapT = THREE.RepeatWrapping;
				// 这意味着当纹理坐标超过1时，纹理会重复平铺
				
				// 设置各向异性过滤级别
				map.anisotropy = 16;
				// 各向异性过滤是一种纹理过滤技术，用于改善倾斜角度观察纹理时的质量
				// 值越高质量越好，但性能消耗越大，16是常用值
				
				// 设置颜色空间为sRGB
				map.colorSpace = THREE.SRGBColorSpace;
				// sRGB是标准的颜色空间，确保在不同设备上颜色显示一致

				/**
				 * 创建Phong材质（MeshPhongMaterial）
				 * Phong材质是一种经典的光照模型，支持镜面高光
				 * 参数说明：
				 * @param {Object} 配置对象
				 *   - map: 使用加载的纹理作为漫反射贴图
				 *   - side: THREE.DoubleSide 双面渲染
				 *     默认只渲染正面（法线指向相机的面），设为双面后两面都渲染
				 */
				const material = new THREE.MeshPhongMaterial({
					map: map,
					side: THREE.DoubleSide
				});

				// ====================================================
				// 第四部分：创建几何体对象（分四行排列，每行4个）
				// ====================================================
				
				// ----------------------------------------------------
				// 第一行几何体：基础多面体（Y=0, Z=300）
				// 位置从左到右：X=-300, -100, 100, 300
				// ----------------------------------------------------
				
				/**
				 * 1. 球体（SphereGeometry）
				 * 参数说明：
				 * @param {number} 75 - 半径
				 * @param {number} 20 - 宽度分段数（经线分段）
				 * @param {number} 10 - 高度分段数（纬线分段）
				 * 分段数越高，球体越平滑，但顶点数越多
				 */
				object = new THREE.Mesh(new THREE.SphereGeometry(75, 20, 10), material);
				object.position.set(-300, 0, 300);  // 设置位置(X, Y, Z)
				scene.add(object);  // 添加到场景

				/**
				 * 2. 二十面体（IcosahedronGeometry）
				 * 参数说明：
				 * @param {number} 75 - 半径
				 * 二十面体：由20个正三角形面组成的正多面体
				 */
				object = new THREE.Mesh(new THREE.IcosahedronGeometry(75), material);
				object.position.set(-100, 0, 300);
				scene.add(object);

				/**
				 * 3. 八面体（OctahedronGeometry）
				 * 参数说明：
				 * @param {number} 75 - 半径
				 * 八面体：由8个正三角形面组成的正多面体，类似两个金字塔底对底
				 */
				object = new THREE.Mesh(new THREE.OctahedronGeometry(75), material);
				object.position.set(100, 0, 300);
				scene.add(object);

				/**
				 * 4. 四面体（TetrahedronGeometry）
				 * 参数说明：
				 * @param {number} 75 - 半径
				 * 四面体：最简单的正多面体，由4个正三角形面组成
				 */
				object = new THREE.Mesh(new THREE.TetrahedronGeometry(75), material);
				object.position.set(300, 0, 300);
				scene.add(object);

				// ----------------------------------------------------
				// 第二行几何体：平面类几何体（Y=0, Z=100）
				// ----------------------------------------------------
				
				/**
				 * 5. 平面（PlaneGeometry）
				 * 参数说明：
				 * @param {number} 100 - 宽度
				 * @param {number} 100 - 高度
				 * @param {number} 4 - 宽度分段数
				 * @param {number} 4 - 高度分段数
				 * 分段数决定网格细分程度，影响变形效果
				 */
				object = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 4, 4), material);
				object.position.set(-300, 0, 100);
				scene.add(object);

				/**
				 * 6. 立方体（BoxGeometry）
				 * 参数说明：
				 * @param {number} 100 - X轴方向宽度
				 * @param {number} 100 - Y轴方向高度
				 * @param {number} 100 - Z轴方向深度
				 * @param {number} 4 - 宽度分段数
				 * @param {number} 4 - 高度分段数
				 * @param {number} 4 - 深度分段数
				 */
				object = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 4, 4, 4), material);
				object.position.set(-100, 0, 100);
				scene.add(object);

				/**
				 * 7. 圆形（CircleGeometry）
				 * 参数说明：
				 * @param {number} 50 - 半径
				 * @param {number} 20 - 分段数（三角形数量）
				 * @param {number} 0 - 起始角度（弧度）
				 * @param {number} Math.PI * 2 - 扫描角度（2π表示完整圆形）
				 */
				object = new THREE.Mesh(new THREE.CircleGeometry(50, 20, 0, Math.PI * 2), material);
				object.position.set(100, 0, 100);
				scene.add(object);

				/**
				 * 8. 圆环（RingGeometry）
				 * 参数说明：
				 * @param {number} 10 - 内半径
				 * @param {number} 50 - 外半径
				 * @param {number} 20 - 径向分段数（同心圆数量）
				 * @param {number} 5 - 环向分段数（圆周分段数）
				 * @param {number} 0 - 起始角度
				 * @param {number} Math.PI * 2 - 扫描角度
				 */
				object = new THREE.Mesh(new THREE.RingGeometry(10, 50, 20, 5, 0, Math.PI * 2), material);
				object.position.set(300, 0, 100);
				scene.add(object);

				// ----------------------------------------------------
				// 第三行几何体：旋转体和环形几何体（Y=0, Z=-100）
				// ----------------------------------------------------
				
				/**
				 * 9. 圆柱体（CylinderGeometry）
				 * 参数说明：
				 * @param {number} 25 - 顶部半径
				 * @param {number} 75 - 底部半径（不等半径产生锥形效果）
				 * @param {number} 100 - 高度
				 * @param {number} 40 - 圆周分段数
				 * @param {number} 5 - 高度分段数
				 */
				object = new THREE.Mesh(new THREE.CylinderGeometry(25, 75, 100, 40, 5), material);
				object.position.set(-300, 0, -100);
				scene.add(object);

				/**
				 * 10. 旋转体（LatheGeometry）
				 * 通过将2D轮廓绕Y轴旋转生成3D对象
				 * 常用于制作花瓶、碗等旋转对称物体
				 * 
				 * 首先创建轮廓点数组
				 */
				const points = [];
				// 使用数学函数生成波浪形轮廓
				for (let i = 0; i < 50; i++) {
					// Vector2表示二维向量，x是半径，y是高度
					points.push(new THREE.Vector2(
						// 半径：使用正弦函数生成波动效果
						Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50,
						// 高度：线性增加
						(i - 5) * 2
					));
				}
				
				/**
				 * 创建旋转体几何体
				 * 参数说明：
				 * @param {Array} points - 轮廓点数组
				 * @param {number} 20 - 旋转分段数（绕Y轴的分段）
				 */
				object = new THREE.Mesh(new THREE.LatheGeometry(points, 20), material);
				object.position.set(-100, 0, -100);
				scene.add(object);

				/**
				 * 11. 圆环面（TorusGeometry）
				 * 类似于甜甜圈的形状
				 * 参数说明：
				 * @param {number} 50 - 圆环半径（中心到管中心的距离）
				 * @param {number} 20 - 管道半径（管的粗细）
				 * @param {number} 20 - 径向分段数（圆环分段）
				 * @param {number} 20 - 环向分段数（管道分段）
				 */
				object = new THREE.Mesh(new THREE.TorusGeometry(50, 20, 20, 20), material);
				object.position.set(100, 0, -100);
				scene.add(object);

				/**
				 * 12. 环形结（TorusKnotGeometry）
				 * 打结的圆环面，复杂的数学曲面
				 * 参数说明：
				 * @param {number} 50 - 圆环半径
				 * @param {number} 10 - 管道半径
				 * @param {number} 50 - 管道的分段数
				 * @param {number} 20 - 环的分段数
				 */
				object = new THREE.Mesh(new THREE.TorusKnotGeometry(50, 10, 50, 20), material);
				object.position.set(300, 0, -100);
				scene.add(object);

				// ----------------------------------------------------
				// 第四行几何体：特殊几何体（Y=0, Z=-300）
				// ----------------------------------------------------
				
				/**
				 * 13. 胶囊体（CapsuleGeometry）
				 * 两端是半球，中间是圆柱的组合体
				 * 参数说明：
				 * @param {number} 20 - 半径
				 * @param {number} 50 - 中间圆柱的长度
				 */
				object = new THREE.Mesh(new THREE.CapsuleGeometry(20, 50), material);
				object.position.set(-300, 0, -300);
				scene.add(object);

				/**
				 * 14. 参数化平面（使用ParametricGeometry）
				 * 通过数学函数(u,v) → (x,y,z)定义的曲面
				 * plane函数定义了一个简单的平面：f(u,v) = (u, 0, v)
				 * 
				 * 参数说明：
				 * @param {Function} plane - 参数化函数
				 * @param {number} 10 - u方向的分段数
				 * @param {number} 10 - v方向的分段数
				 */
				geometry = new ParametricGeometry(plane, 10, 10);
				geometry.scale(100, 100, 100);  // 放大几何体
				geometry.center();              // 将几何体中心移动到原点
				object = new THREE.Mesh(geometry, material);
				object.position.set(-100, 0, -300);
				scene.add(object);

				/**
				 * 15. 克莱因瓶（Klein Bottle）
				 * 一种在三维空间中无法定向的闭合曲面
				 * 没有"内部"和"外部"之分，是拓扑学中的重要概念
				 * 
				 * klein是一个预定义的参数化函数，生成克莱因瓶的近似曲面
				 */
				geometry = new ParametricGeometry(klein, 20, 20);
				object = new THREE.Mesh(geometry, material);
				object.position.set(100, 0, -300);
				object.scale.multiplyScalar(5);  // 放大5倍，因为原始尺寸较小
				scene.add(object);

				/**
				 * 16. 莫比乌斯带（Möbius Strip）
				 * 只有一个面和一个边的曲面
				 * 将一条纸带旋转180度后两端粘合而成
				 * 
				 * mobius是一个预定义的参数化函数，生成莫比乌斯带
				 */
				geometry = new ParametricGeometry(mobius, 20, 20);
				object = new THREE.Mesh(geometry, material);
				object.position.set(300, 0, -300);
				object.scale.multiplyScalar(30);  // 放大30倍
				scene.add(object);

				// ----------------------------------------------------
				// 第五部分：创建渲染器和性能监控
				// ----------------------------------------------------
				
				/**
				 * 创建WebGL渲染器
				 * 参数说明：
				 * @param {Object} 配置对象
				 *   - antialias: true 开启抗锯齿，平滑边缘锯齿
				 * 
				 * WebGLRenderer使用WebGL API进行硬件加速的3D渲染
				 */
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比，适配高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/**
				 * 设置动画循环回调函数
				 * setAnimationLoop是requestAnimationFrame的Three.js封装
				 * animate函数会在每一帧被调用
				 */
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的canvas元素（即<canvas>标签）添加到页面body中
				document.body.appendChild(renderer.domElement);

				/**
				 * 创建并初始化性能监控器（Stats）
				 * Stats会显示一个小面板，包含：
				 * - FPS：帧率（Frames Per Second），60为理想值
				 * - MS：每帧渲染时间（毫秒）
				 * - MB：内存占用
				 */
				stats = new Stats();
				document.body.appendChild(stats.dom);  // 将Stats面板添加到页面

				// ----------------------------------------------------
				// 第六部分：事件监听器设置
				// ----------------------------------------------------
				
				/**
				 * 监听窗口大小变化事件
				 * 当用户调整浏览器窗口大小时，重新调整相机和渲染器
				 */
				window.addEventListener('resize', onWindowResize);

				/**
				 * 初始化完成后的说明：
				 * 至此，所有3D对象已创建并添加到场景中
				 * 但还没有开始渲染，渲染会在animate循环中开始
				 */
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 
			 * 功能：当浏览器窗口大小改变时
			 * 1. 更新相机宽高比，防止图像变形
			 * 2. 更新渲染器尺寸，填充整个窗口
			 * 
			 * 这是响应式WebGL应用的基本要求
			 */
			function onWindowResize() {
				/**
				 * 更新相机宽高比
				 * aspect属性控制相机的视野形状
				 * 如果不更新，图像会被拉伸或压缩
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机投影矩阵
				 * 当相机参数（如aspect、fov等）改变后
				 * 必须调用此方法重新计算内部矩阵
				 */
				camera.updateProjectionMatrix();

				/**
				 * 更新渲染器尺寸
				 * 确保WebGL画布填满整个浏览器窗口
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 
			 * 这是Three.js动画的核心，每帧调用一次（通常60次/秒）
			 * 函数执行流程：
			 * 1. 调用render()函数渲染一帧
			 * 2. 更新性能监控器显示
			 * 
			 * 注意：这个函数本身不包含循环，而是被setAnimationLoop反复调用
			 */
			function animate() {
				// 渲染当前帧
				render();
				
				// 更新性能监控器显示
				stats.update();
				
				/**
				 * 动画循环的幕后原理：
				 * 浏览器会在下次重绘前调用animate函数
				 * 与显示器刷新率同步（通常60Hz）
				 * 这是实现平滑动画的最佳实践
				 */
			}

			/**
			 * 渲染函数 - 每帧执行的渲染逻辑
			 * 
			 * 主要功能：
			 * 1. 更新相机位置（实现环绕动画）
			 * 2. 更新所有几何体的旋转
			 * 3. 执行实际的WebGL渲染
			 * 
			 * 这是每帧性能消耗最大的地方
			 */
			function render() {
				/**
				 * 计算时间因子
				 * Date.now()返回从1970年至今的毫秒数
				 * 乘以0.0001使数值较小，便于计算三角函数
				 * timer随时间线性增加，用于驱动所有动画
				 */
				const timer = Date.now() * 0.0001;

				/**
				 * 更新相机位置，实现环绕动画
				 * 相机在XZ平面上做圆周运动：
				 * - X坐标 = cos(timer) * 半径
				 * - Z坐标 = sin(timer) * 半径
				 * 
				 * 半径800，timer随时间增加，产生圆周运动
				 * 类似参数方程：x = r*cos(θ), z = r*sin(θ)
				 */
				camera.position.x = Math.cos(timer) * 800;
				camera.position.z = Math.sin(timer) * 800;
				
				/**
				 * 设置相机看向场景中心点(0,0,0)
				 * 这样相机会一直注视着所有几何体
				 * 即使相机位置变化，视线始终对准中心
				 */
				camera.lookAt(scene.position);

				/**
				 * 遍历场景中的所有对象
				 * scene.traverse()递归访问场景图中的每个对象
				 * 对每个对象执行回调函数
				 */
				scene.traverse(function (object) {
					/**
					 * 检查对象是否为网格（Mesh）
					 * isMesh是Three.js对象的内部属性
					 * 只有网格对象才需要旋转
					 * 
					 * 注意：灯光、相机等不是网格，不会被旋转
					 */
					if (object.isMesh === true) {
						/**
						 * 为每个网格对象设置旋转动画
						 * rotation.x/y/z控制绕各轴的旋转
						 * 
						 * 旋转速度：
						 * - X轴：timer * 5，旋转较快
						 * - Y轴：timer * 2.5，旋转较慢
						 * - Z轴：不旋转
						 * 
						 * 不同的旋转速度使动画更生动
						 */
						object.rotation.x = timer * 5;
						object.rotation.y = timer * 2.5;
						
						/**
						 * 旋转说明：
						 * 所有几何体都以相同速度和方向旋转
						 * 但由于它们的初始位置不同，形成丰富的视觉效果
						 */
					}
				});

				/**
				 * 执行WebGL渲染
				 * 这是最终将3D场景绘制到2D画布的函数
				 * 参数说明：
				 * @param {THREE.Scene} scene - 要渲染的场景
				 * @param {THREE.Camera} camera - 使用的相机视角
				 * 
				 * 渲染流程：
				 * 1. 清空颜色缓冲区和深度缓冲区
				 * 2. 根据相机设置计算可见对象
				 * 3. 对每个可见对象执行着色器程序
				 * 4. 将结果输出到canvas
				 */
				renderer.render(scene, camera);
				
				/**
				 * 渲染一帧完成
				 * 浏览器会在合适的时机调用下一帧
				 * 形成连续的动画效果
				 */
			}

			// ============================================
			// 程序结束
			// ============================================
			
			/**
			 * 代码结构总结：
			 * 1. 模块导入（第1部分）
			 * 2. 全局变量声明（第2部分）
			 * 3. 初始化函数init()（第3-6部分）
			 * 4. 事件处理函数（第7部分）
			 * 5. 动画循环函数animate()（第8部分）
			 * 6. 渲染函数render()（第9部分）
			 * 
			 * 这是一个典型的Three.js应用结构
			 * 遵循"初始化 → 动画循环 → 每帧渲染"的模式
			 */

		</script>

	</body>
</html>