<!-- Three.js WebGL 索引缓冲几何体示例 - 详细功能描述
🎯 核心功能概述
这是一个使用 Three.js 库创建的交互式 3D 彩色网格平面演示程序。该程序在浏览器中实时渲染一个具有渐变色效果的网格平面，并自动旋转，展示 Three.js 中索引缓冲几何体 (Indexed BufferGeometry) 的使用方法。

🔧 主要技术点详解
1. 核心架构
javascript
// 典型的三层架构
场景(Scene) → 网格(Mesh) → 渲染器(Renderer)
    ↓            ↓            ↓
  光源    几何体 + 材质    WebGL Canvas
2. 索引缓冲几何体 (核心特色)
传统几何体 vs 索引缓冲几何体：

传统方式：每个三角形需要3个独立顶点（即使顶点位置相同）

索引方式：使用索引数组重用顶点，减少内存使用

数据重用示例：

text
顶点数组：[v1, v2, v3, v4]  ← 4个顶点
索引数组：[0,1,3, 1,2,3]   ← 定义2个三角形

三角形1：使用顶点0(v1)、1(v2)、3(v4)
三角形2：使用顶点1(v2)、2(v3)、3(v4) ← 顶点1和3被重用
3. 几何体数据生成
javascript
// 生成 11×11 = 121 个顶点（segments=10）
for (let i = 0; i <= 10; i++) {
  for (let j = 0; j <= 10; j++) {
    // 顶点位置：均匀分布在 -10 到 +10 的范围内
    vertices.push(x, -y, 0);  // z=0 创建平面
    
    // 法线：所有指向z轴正方向
    normals.push(0, 0, 1);
    
    // 颜色：基于位置计算渐变
    // x从-10到+10 → r从0到1
    // y从-10到+10 → g从0到1
    // b固定为1
    // 产生从紫色(0,0,1)到青色(1,1,1)的渐变
  }
}
4. 网格连接算法
javascript
// 将顶点连接成 10×10×2 = 200 个三角形
// 每个四边形由2个三角形组成
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // 四边形四个顶点的索引计算：
    const a = i * 11 + (j + 1);  // 当前行，下一列
    const b = i * 11 + j;        // 当前行，当前列  
    const c = (i + 1) * 11 + j;  // 下一行，当前列
    const d = (i + 1) * 11 + (j + 1); // 下一行，下一列
    
    // 三角形划分（两个三角形组成一个四边形）：
    // 三角形1：a → b → d（右上、左上、右下）
    // 三角形2：b → c → d（左上、左下、右下）
  }
}
5. 渲染管线流程
text
1. 顶点着色器处理 → 2. 图元装配 → 3. 光栅化 → 4. 片段着色器
     ↓                   ↓           ↓           ↓
位置/法线/颜色       三角形组装    像素生成    最终颜色输出
6. 性能优化技术
顶点缓存对象(VBO)：使用 Float32BufferAttribute 将数据上传到GPU

元素数组缓冲(EBO)：使用 setIndex() 创建索引缓冲

批处理渲染：所有三角形一次提交给GPU

双缓冲机制：WebGL自动处理，避免闪烁

7. 交互功能
自动动画：网格绕X轴和Y轴持续旋转

实时控制：通过GUI切换线框模式

响应式设计：窗口大小变化时自动调整

性能监控：显示FPS帧率信息

8. 视觉效果技术
Phong着色模型：计算每个像素的光照（环境光+漫反射+高光）

顶点着色(Vertex Colors)：在顶点级别定义颜色，GPU进行插值

双面渲染(Double Side)：正反两面都可见

抗锯齿(Antialiasing)：平滑边缘锯齿

9. 坐标系统
世界坐标系：场景中所有对象的绝对位置

本地坐标系：每个对象自身的坐标系

裁剪坐标系：经过投影矩阵变换后的坐标

屏幕坐标系：最终在屏幕上显示的像素位置

10. 内存使用分析
text
顶点数据：121个顶点 × (3位置 + 3法线 + 3颜色) × 4字节 = 13068字节
索引数据：200个三角形 × 3索引 × 2字节 = 1200字节
总计：约14KB（非常高效）
🚀 教育价值
这个示例展示了：

现代WebGL编程模式：使用BufferGeometry而不是传统Geometry

GPU友好数据布局：连续的内存布局提高缓存命中率

实时图形学基础：从数据生成到最终渲染的完整流程

Three.js最佳实践：模块化导入、动画循环、事件处理

📊 技术指标对比
特性	传统Geometry	BufferGeometry	本示例使用
内存效率	低	高	BufferGeometry
CPU使用	高	低	BufferGeometry
灵活性	高	中	BufferGeometry
学习曲线	易	中	BufferGeometry -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			已替换为中文：Three.js WebGL示例 - 索引缓冲几何体
		-->
		<title>Three.js WebGL示例 - BufferGeometry(缓冲几何体) 索引缓冲几何体</title>
		
		<!-- 
			字符编码声明：
			UTF-8是通用字符编码，支持中英文和各种符号
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置：控制移动端显示的重要元标签
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户缩放（为3D应用提供更好体验）
			minimum-scale=1.0：最小缩放比例为1
			maximum-scale=1.0：最大缩放比例为1
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表：
			rel="stylesheet"：表示这是样式表
			href="main.css"：样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 
			3D场景容器：
			id="container"：用于JavaScript中获取此元素
			Three.js渲染器会将Canvas画布添加到此div中
		-->
		<div id="container"></div>
		
		<!-- 
			页面信息显示区域：
			已替换为中文：Three.js WebGL - 索引缓冲几何体示例
			链接到Three.js官网，新窗口打开
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">
				Three.js WebGL - BufferGeometry(缓冲几何体) 索引缓冲几何体示例
			</a>
		</div>

		<!-- 
			导入映射(Import Map)：
			现代浏览器支持的模块映射配置
			允许我们给模块指定别名和路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"表示这是ES6模块
			模块中的代码有独立的作用域
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// import语句必须在模块顶部执行
			
			// 导入Three.js的所有功能并命名为THREE
			// THREE将成为访问Three.js API的主要对象
			import * as THREE from 'three';

			// 导入性能监控工具Stats
			// Stats用于显示FPS（每秒帧数）、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入GUI库（轻量级图形用户界面库）
			// GUI用于创建控制面板，可以实时调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ==================== 全局变量声明 ====================
			// 这些变量将在多个函数中使用
			
			let camera;      // 相机：决定从哪个视角观察3D场景
			let scene;       // 场景：所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D屏幕
			let stats;       // 性能统计对象
			let mesh;        // 网格：包含几何体和材质的可渲染对象

			// ==================== 函数调用 ====================
			// 页面加载后立即执行初始化
			init();

			/**
			 * 初始化函数 - 整个Three.js应用的起点
			 * 负责创建和设置所有必要的3D组件
			 * 此函数在页面加载时只调用一次
			 */
			function init() {
				// ============ 1. 创建相机 ============
				/*
				创建透视相机(PerspectiveCamera)：
				模拟人眼的视角，有近大远小的透视效果
				参数说明：
				  27 - 视野角度(Field of View)，单位是度，较小的值产生类似望远镜的效果
				  window.innerWidth / window.innerHeight - 宽高比，匹配浏览器窗口
				  1 - 近平面距离，比这个近的物体不会被渲染
				  3500 - 远平面距离，比这个远的物体不会被渲染
				*/
				camera = new THREE.PerspectiveCamera( 
					27, 
					window.innerWidth / window.innerHeight, 
					1, 
					3500 
				);
				// 设置相机位置：在z轴上向后移动64个单位
				// 这样可以看到整个场景
				camera.position.z = 64;

				// ============ 2. 创建场景 ============
				/*
				场景(Scene)是Three.js的根容器：
				所有要渲染的3D对象（网格、光源、相机等）都需要添加到场景中
				*/
				scene = new THREE.Scene();
				// 设置场景背景颜色：深灰色（十六进制颜色代码）
				scene.background = new THREE.Color( 0x050505 );

				// ============ 3. 创建光源 ============
				/*
				创建半球光(HemisphereLight)：
				这是一种特殊的光源，模拟天空和地面的环境光
				上方的颜色（天空）和下方的颜色（地面）不同
				这里使用默认颜色（天蓝色和绿色）
				*/
				const light = new THREE.HemisphereLight();
				// 设置光照强度，默认是1，这里增强到3
				light.intensity = 3;
				// 将光源添加到场景中
				scene.add( light );

				// ============ 4. 创建缓冲几何体 ============
				/*
				BufferGeometry是Three.js的高性能几何体：
				与传统Geometry不同，BufferGeometry直接使用类型化数组
				适合大量顶点的情况，性能更好
				*/
				const geometry = new THREE.BufferGeometry();

				// 准备几何体数据数组
				const indices = [];   // 索引数组：定义顶点如何组成三角形
				const vertices = [];  // 顶点位置数组：每个顶点有x,y,z三个值
				const normals = [];   // 法线数组：每个顶点的方向，用于光照计算
				const colors = [];    // 颜色数组：每个顶点的颜色，r,g,b三个值

				// ============ 5. 几何体参数设置 ============
				/*
				创建一个由多个四边形组成的网格平面：
				每个四边形由两个三角形组成
				*/
				const size = 20;        // 网格总大小：20个单位
				const segments = 10;    // 分段数：每边分成10段
				const halfSize = size / 2;           // 半尺寸：用于将网格居中
				const segmentSize = size / segments; // 每段大小：20/10=2个单位

				// 创建一个临时的THREE.Color对象，用于计算顶点颜色
				const _color = new THREE.Color();

				// ============ 6. 生成顶点数据 ============
				/*
				生成网格的所有顶点：
				我们创建 (segments+1) × (segments+1) 个顶点
				例如 segments=10，则有 11×11=121 个顶点
				*/
				// 外层循环：行（y方向）
				for ( let i = 0; i <= segments; i ++ ) {
					// 计算当前行的y坐标：从-halfSize到+halfSize
					// 使用 - y 是为了让正y向上（默认Three.js中正y向上）
					const y = ( i * segmentSize ) - halfSize;

					// 内层循环：列（x方向）
					for ( let j = 0; j <= segments; j ++ ) {
						// 计算当前列的x坐标：从-halfSize到+halfSize
						const x = ( j * segmentSize ) - halfSize;

						// 添加顶点位置：每个顶点有x,y,z三个分量
						// z坐标为0，所以这是一个平面
						vertices.push( x, - y, 0 );
						
						// 添加法线：所有顶点法线指向z轴正方向（垂直屏幕向外）
						// 这对于光照计算很重要
						normals.push( 0, 0, 1 );

						// ============ 计算顶点颜色 ============
						/*
						根据顶点位置计算颜色：
						r（红色）分量基于x位置：-halfSize时r≈0，+halfSize时r≈1
						g（绿色）分量基于y位置：-halfSize时g≈0，+halfSize时g≈1
						b（蓝色）分量固定为1
						这样会产生从紫色到青色的渐变
						*/
						// 将x坐标从[-halfSize, halfSize]映射到[0, 1]
						const r = ( x / size ) + 0.5;
						// 将y坐标从[-halfSize, halfSize]映射到[0, 1]
						const g = ( y / size ) + 0.5;

						// 设置颜色：使用SRGB颜色空间（更符合人眼感知）
						_color.setRGB( r, g, 1, THREE.SRGBColorSpace );

						// 将颜色值添加到颜色数组：每个颜色有r,g,b三个分量
						colors.push( _color.r, _color.g, _color.b );
					}
				}

				// ============ 7. 生成索引数据 ============
				/*
				索引(Indices)定义顶点如何连接成三角形：
				不使用索引时，每个三角形需要3个独立的顶点
				使用索引时，可以重用顶点，减少内存使用
				对于网格平面，一个顶点最多被6个三角形共享
				*/
				// 外层循环：遍历每个行分段
				for ( let i = 0; i < segments; i ++ ) {
					// 内层循环：遍历每个列分段
					for ( let j = 0; j < segments; j ++ ) {
						/*
						计算当前四边形四个顶点的索引：
						顶点在vertices数组中是逐行排列的
						例如 segments=10 时：
						第0行：顶点0-10
						第1行：顶点11-21
						...
						*/
						// a：右上角顶点
						const a = i * ( segments + 1 ) + ( j + 1 );
						// b：左上角顶点
						const b = i * ( segments + 1 ) + j;
						// c：左下角顶点
						const c = ( i + 1 ) * ( segments + 1 ) + j;
						// d：右下角顶点
						const d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );

						// 将一个四边形分成两个三角形（这是3D图形中的标准做法）
						// 第一个三角形：a→b→d（顺时针方向）
						indices.push( a, b, d );
						// 第二个三角形：b→c→d（顺时针方向）
						indices.push( b, c, d );
						
						/*
						四边形分割示意图：
						b────a
						│   /│
						│  / │
						│ /  │
						│/   │
						c────d
						第一个三角形：a-b-d
						第二个三角形：b-c-d
						*/
					}
				}

				// ============ 8. 将数据设置到几何体 ============
				/*
				将我们生成的数组数据绑定到BufferGeometry：
				setIndex()：设置索引缓冲
				setAttribute()：设置各种顶点属性
				*/
				
				// 设置索引缓冲：告诉Three.js顶点如何组成三角形
				geometry.setIndex( indices );
				
				// 设置位置属性：
				// Float32BufferAttribute：32位浮点数缓冲区
				// vertices是位置数据，3表示每3个值组成一个顶点(x,y,z)
				geometry.setAttribute( 
					'position', 
					new THREE.Float32BufferAttribute( vertices, 3 ) 
				);
				
				// 设置法线属性：每3个值组成一个法线向量(nx,ny,nz)
				geometry.setAttribute( 
					'normal', 
					new THREE.Float32BufferAttribute( normals, 3 ) 
				);
				
				// 设置颜色属性：每3个值组成一个颜色(r,g,b)
				geometry.setAttribute( 
					'color', 
					new THREE.Float32BufferAttribute( colors, 3 ) 
				);

				// ============ 9. 创建材质 ============
				/*
				材质(Material)定义物体的外观：
				MeshPhongMaterial：支持高光反射的材质，能产生光泽效果
				需要法线信息来计算光照
				*/
				const material = new THREE.MeshPhongMaterial( {
					side: THREE.DoubleSide,  // 双面渲染：正反面都可见
					vertexColors: true       // 使用顶点颜色（而不是材质颜色）
				} );

				// ============ 10. 创建网格 ============
				/*
				网格(Mesh)是几何体+材质的组合：
				这是Three.js中最基本的可渲染对象
				*/
				mesh = new THREE.Mesh( geometry, material );
				// 将网格添加到场景中
				scene.add( mesh );

				// ============ 11. 创建渲染器 ============
				/*
				渲染器(Renderer)负责将3D场景绘制到2D屏幕上：
				WebGLRenderer使用WebGL API进行硬件加速渲染
				*/
				renderer = new THREE.WebGLRenderer( { 
					antialias: true  // 开启抗锯齿：平滑边缘锯齿
				} );
				
				// 设置设备像素比：适应高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：相当于requestAnimationFrame的Three.js封装
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的Canvas元素添加到body中
				// renderer.domElement就是Canvas元素
				document.body.appendChild( renderer.domElement );

				// ============ 12. 创建性能监控器 ============
				/*
				Stats.js：性能监控工具
				显示FPS（帧率）、MS（每帧渲染毫秒数）、MB（内存使用）等信息
				*/
				stats = new Stats();
				// 默认显示FPS（每秒帧数）
				stats.showPanel( 0 );
				// 将Stats的DOM元素添加到页面
				document.body.appendChild( stats.dom );

				// ============ 13. 创建GUI控制面板 ============
				/*
				lil-gui：轻量级图形用户界面库
				允许用户实时调整参数
				*/
				const gui = new GUI();
				// 添加一个复选框来控制线框模式
				// 参数说明：
				// material - 目标对象
				// 'wireframe' - 要控制的属性名
				gui.add( material, 'wireframe' )
				   .name('线框模式');  // 设置显示名称

				// ============ 14. 事件监听器 ============
				/*
				监听窗口大小变化事件：
				当用户调整浏览器窗口大小时，需要更新相机和渲染器
				*/
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时自动调用
			 * 确保3D场景始终正确填充整个窗口
			 */
			function onWindowResize() {
				// 更新相机宽高比：匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵：
				// 当相机参数改变后，必须调用此方法使更改生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸：使用新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 由renderer.setAnimationLoop()自动调用
			 * 每帧执行一次（通常是60次/秒）
			 */
			function animate() {
				// 获取当前时间（秒）：
				// Date.now()返回毫秒数，乘以0.001转换为秒
				// 使用时间值可以创建与时间相关的动画
				const time = Date.now() * 0.001;

				// 旋转网格对象：
				// 随时间旋转，创建动态效果
				mesh.rotation.x = time * 0.25;  // x轴旋转：每秒0.25弧度（约14.3度）
				mesh.rotation.y = time * 0.5;   // y轴旋转：每秒0.5弧度（约28.6度）
				// 注意：z轴没有旋转，所以网格只在x和y轴上旋转

				// 渲染场景：
				// 这是最重要的函数调用，将3D场景绘制到屏幕上
				// 参数：要渲染的场景和使用的相机
				renderer.render( scene, camera );

				// 更新性能监控器：
				// 必须在每帧结束时调用，以更新显示的数据
				stats.update();
			}

		</script>

	</body>
</html>