<!-- 代码功能与主要技术点详解
一、项目概述
这是一个基于Three.js和WebGL 2的3D图形演示项目，核心功能是展示Uniform Buffer Objects（统一缓冲对象）技术。项目创建了一个包含200个3D对象（100个四面体和100个立方体）的动态场景，这些对象共享相机和光照数据，展示了高效的大规模对象渲染技术。

二、核心功能
1. 大规模对象渲染
200个3D对象：交替创建四面体和立方体

两种不同材质：

四面体：纯色材质，每个对象有随机颜色

立方体：纹理材质，使用木箱纹理贴图

随机变换：每个对象有随机的位置、旋转和缩放

2. 实时动画系统
平滑旋转：所有对象持续绕X轴和Y轴旋转

时间同步：使用delta time确保动画帧率独立

60FPS渲染：基于requestAnimationFrame的动画循环

3. 交互式响应
窗口自适应：响应窗口大小变化，调整相机和渲染器

高清显示支持：自动适配高DPI显示器

三、主要技术点详解
1. Uniform Buffer Objects (UBOs) - 核心技术
什么是UBO？
定义：Uniform Buffer Objects是WebGL 2引入的特性，允许将相关的uniform变量分组存储到缓冲区中

类比：类似于将多个uniform"打包"成一个数据块

本项目中使用的两个UBO：
A. 相机数据UBO (ViewData)
javascript
// 着色器中的定义
uniform ViewData {
    mat4 projectionMatrix;  // 投影矩阵
    mat4 viewMatrix;        // 视图矩阵
};

// JavaScript中的创建
const cameraUniformsGroup = new THREE.UniformsGroup();
cameraUniformsGroup.setName('ViewData');
cameraUniformsGroup.add(new THREE.Uniform(camera.projectionMatrix));
cameraUniformsGroup.add(new THREE.Uniform(camera.matrixWorldInverse));
技术优势：

所有200个对象共享相同的相机数据

相机移动时只需更新一次UBO

减少GPU uniform更新开销

B. 光照数据UBO (LightingData)
javascript
uniform LightingData {
    vec3 position;      // 光源位置
    vec3 ambientColor;  // 环境光
    vec3 diffuseColor;  // 漫反射光
    vec3 specularColor; // 镜面反射光
    float shininess;    // 光泽度
} Light;
包含的光照参数：

位置：(0, 0, 10) - Z轴前方

环境光：中性灰 (#7c7c7c)

漫反射：浅灰 (#d5d5d5)

高光：亮灰 (#e7e7e7)

光泽度：64

2. 着色器编程技术
A. 两种着色器配置
javascript
// 着色器1：纯色材质
const material1 = new THREE.RawShaderMaterial({
    uniforms: { modelMatrix, normalMatrix, color },
    vertexShader: vertexShader1,
    fragmentShader: fragmentShader1,
    glslVersion: THREE.GLSL3  // 必须使用GLSL 3.0支持UBO
});

// 着色器2：纹理材质  
const material2 = new THREE.RawShaderMaterial({
    uniforms: { modelMatrix, diffuseMap },
    vertexShader: vertexShader2,
    fragmentShader: fragmentShader2,
    glslVersion: THREE.GLSL3
});
B. 冯氏光照模型 (Phong Reflection Model)
光照计算流程：

glsl
// 1. 计算方向向量
vec3 l = normalize(Light.position - vPositionEye);  // 光线方向
vec3 n = normalize(vNormalEye);                      // 法线方向
vec3 e = -normalize(vPositionEye);                   // 视线方向
vec3 r = normalize(reflect(-l, n));                  // 反射方向

// 2. 计算光照强度
float diffuse = max(dot(n, l), 0.0);                 // 漫反射强度
float specular = max(dot(r, e), 0.0);                // 镜面反射强度
specular = pow(specular, Light.shininess);           // 应用光泽度

// 3. 组合光照分量
vec3 lighting = Light.ambientColor
              + Light.diffuseColor * diffuse
              + Light.specularColor * specular;
C. 颜色空间管理
线性空间 ↔ sRGB空间转换：

glsl
vec4 LinearTosRGB(vec4 value) {
    // 线性部分：value <= 0.0031308
    // 非线性部分：伽马校正 2.4次幂
    return vec4(mix(
        pow(value.rgb, vec3(0.41666)) * 1.055 - vec3(0.055), // 非线性
        value.rgb * 12.92,                                   // 线性
        vec3(lessThanEqual(value.rgb, vec3(0.0031308)))
    ), value.a);
}
为什么需要转换？

物理正确的计算：光照计算在线性空间进行

显示正确性：显示器期望sRGB空间输入

避免颜色失真：直接使用线性值会导致颜色过暗

3. 性能优化技术
A. 数据共享策略
javascript
// 关键代码：所有对象共享相同的UBO
mesh.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
内存对比分析：

方案	200个对象的数据量	优势
传统方式	200 × (2矩阵 + 5光照参数)	-
UBO方式	1 × (2矩阵 + 5光照参数)	减少199份重复数据
B. 材质实例化
javascript
// 正确做法：克隆材质但共享UBO
mesh = new THREE.Mesh(geometry1, material1.clone());
mesh.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
为什么需要clone()？

每个对象的modelMatrix、color等值不同

但uniformsGroups可以指向相同的UBO实例

C. 矩阵更新优化
javascript
// Three.js自动管理矩阵
mesh.material.uniforms.modelMatrix.value = mesh.matrixWorld;
mesh.material.uniforms.normalMatrix.value = mesh.normalMatrix;
自动更新机制：

matrixWorld：Three.js自动计算世界矩阵

normalMatrix：自动从模型矩阵推导

减少手动计算开销

4. 渲染管线优化
A. 批量渲染优势
javascript
// 创建200个对象
for (let i = 0; i < 200; i++) {
    let mesh;
    if (i % 2 === 0) {
        mesh = new THREE.Mesh(geometry1, material1.clone());
        // ... 设置纯色材质
    } else {
        mesh = new THREE.Mesh(geometry2, material2.clone());
        // ... 设置纹理材质
    }
    scene.add(mesh);
}
WebGL渲染优化：

状态切换最小化：相似的对象连续渲染

Draw Call优化：WebGL可以优化渲染调用

缓存利用：纹理和缓冲区数据被有效缓存

B. 内存布局优化 (std140)
glsl
layout(std140) uniform ViewData {
    mat4 projectionMatrix;  // 16个float，64字节对齐
    mat4 viewMatrix;        // 16个float，64字节对齐
};
std140布局规则：

标量：4字节对齐

向量：按vec4对齐（vec3也占用16字节）

矩阵：按列向量对齐

确保CPU-GPU数据传输正确性

5. 现代Web技术应用
A. ES6模块系统
html
<script type="importmap">
{
    "imports": {
        "three": "../build/three.module.js",
        "three/addons/": "./jsm/"
    }
}
</script>
<script type="module">
    import * as THREE from 'three';
    // 模块化代码
</script>
优势：

依赖关系清晰

避免全局命名冲突

支持按需加载

B. 响应式设计
javascript
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // 更新投影
    renderer.setSize(window.innerWidth, window.innerHeight);  // 更新渲染器
}
四、技术亮点总结
1. UBO的实际应用场景
相机系统：所有对象共享视图和投影矩阵

光照系统：全局光照参数统一管理

环境设置：雾效、全局颜色等共享参数

2. 性能数据对比
指标	传统方式	UBO方式	提升
Uniform更新次数	每次渲染多次	每次渲染1次	显著
GPU内存占用	高	低	节省90%+
CPU-GPU传输	频繁	极少	大幅减少
3. 可扩展性设计
添加新对象：只需设置特有uniforms，自动共享UBO

修改光照：修改一处，所有对象立即更新

相机运动：自动传播到所有着色器

4. 最佳实践体现
分离变化与不变数据：UBO存储不变数据，单独uniform存储变化数据

合理使用GLSL版本：GLSL 3.0支持现代特性

颜色空间正确性：线性计算，sRGB显示

响应式设计：适应各种屏幕和设备

五、学习价值
这个项目是学习以下技术的优秀范例：

WebGL 2高级特性：UBO、GLSL 3.0

Three.js最佳实践：性能优化、材质管理

计算机图形学基础：光照模型、变换矩阵、颜色空间

现代Web开发：ES6模块、响应式设计 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题
			说明：展示这是基于Three.js的WebGL 2示例，重点演示Uniform Buffer Objects技术
		-->
		<title>Three.js WebGL 2 - Uniform Buffer Objects (统一缓冲对象) 示例</title>
		
		<!-- 
			字符编码设置
			说明：使用UTF-8编码以支持中文字符和国际字符集
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置（Viewport Configuration）
			说明：这个meta标签用于响应式网页设计，控制移动设备上的页面显示方式
			width=device-width: 将页面宽度设置为设备屏幕宽度
			user-scalable=no: 禁止用户缩放页面（保持固定比例）
			minimum-scale=1.0: 最小缩放比例为1.0（100%）
			maximum-scale=1.0: 最大缩放比例为1.0（100%）
			这些设置确保3D场景在不同设备上以固定比例显示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			外部样式表链接
			说明：引入main.css文件来设置页面样式（如背景色、字体、布局等）
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 
			页面信息显示区域
			说明：这个div显示页面标题和相关信息，通常位于页面顶部或角落
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				说明：点击链接可以在新窗口中打开Three.js官方网站
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全特性，防止新页面访问原始页面的window.opener属性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- Uniform Buffer Objects (统一缓冲对象) 演示
			<br>
			<!-- 添加更多中文说明 -->
			<span style="font-size: 14px; color: #aaa;">
				本示例展示200个使用两种不同材质的3D对象，通过UBO技术共享相机和光照数据
			</span>
		</div>
		
		<!-- 
			3D场景容器
			说明：这个div是WebGL渲染器输出canvas元素的父容器
			Three.js会将canvas元素添加到此div中，用于显示3D场景
		-->
		<div id="container"></div>

		<!-- 
			第一种着色器：基本颜色材质
			说明：这个着色器用于渲染纯色的3D对象（四面体），使用冯氏光照模型
			
			id="vertexShader1": 用于在JavaScript中获取此脚本内容
			type="x-shader/x-vertex": 表示这是一个顶点着色器脚本，浏览器不会直接执行
		-->
		<script id="vertexShader1" type="x-shader/x-vertex">
			/*
				Uniform Buffer Object (UBO): 视图数据
				说明：UBO是一组统一变量的集合，可以高效地在多个着色器程序之间共享
				这里定义了包含投影矩阵和视图矩阵的UBO，所有使用相同视图的对象可以共享这些数据
				
				projectionMatrix: 投影矩阵，用于将3D坐标转换为2D裁剪空间坐标
				viewMatrix: 视图矩阵（相机矩阵），将世界坐标转换为观察空间（相机空间）坐标
			*/
			uniform ViewData {
				mat4 projectionMatrix;  // 4x4投影矩阵，定义相机的投影方式（透视/正交）
				mat4 viewMatrix;        // 4x4视图矩阵，表示相机的位置和方向
			};

			/*
				单独的非UBO uniforms（每个对象特有的uniforms）
				说明：这些uniform不在UBO中，每个3D对象都有自己独立的值
				
				modelMatrix: 模型矩阵，定义对象的位置、旋转和缩放（从局部空间到世界空间）
				normalMatrix: 法线矩阵，用于正确变换法线向量（考虑非均匀缩放）
				注意：normalMatrix通常是modelMatrix左上角3x3部分的逆转置矩阵
			*/
			uniform mat4 modelMatrix;   // 4x4模型变换矩阵
			uniform mat3 normalMatrix;  // 3x3法线变换矩阵

			/*
				顶点属性输入（Vertex Attribute Inputs）
				说明：这些是从顶点缓冲区读取的每个顶点的属性数据
				
				in: GLSL 3.0中的输入限定符，等同于旧版本中的attribute
				position: 顶点位置坐标(x, y, z)
				normal: 顶点法线向量，用于光照计算
			*/
			in vec3 position;  // 顶点位置向量(x, y, z)，定义3D对象的形状
			in vec3 normal;    // 顶点法线向量(x, y, z)，垂直于表面，用于光照计算

			/*
				输出到片段着色器的变量（Vertex Shader Outputs）
				说明：顶点着色器计算这些值并传递给片段着色器
				
				out: GLSL 3.0中的输出限定符，等同于旧版本中的varying
				这些变量会在顶点之间进行插值，然后传递给片段着色器
			*/
			out vec3 vPositionEye;  // 观察空间中的顶点位置（相对于相机）
			out vec3 vNormalEye;    // 观察空间中的法线方向（已变换）

			/*
				主函数：顶点着色器的入口点
				说明：每个顶点都会执行这个函数一次
			*/
			void main()	{
				/*
					将顶点位置从局部空间转换到观察空间（相机空间）
					说明：这个变换链是：局部空间 → 世界空间 → 观察空间
					
					1. modelMatrix * vec4(position, 1.0): 局部空间 → 世界空间
					2. viewMatrix * (上一步结果): 世界空间 → 观察空间
					
					vec4(position, 1.0): 将3D位置转换为齐次坐标(4D)，w分量为1.0表示点
				*/
				vec4 vertexPositionEye = viewMatrix * modelMatrix * vec4( position, 1.0 );

				/*
					准备传递给片段着色器的数据
					说明：片段着色器需要这些数据来计算每个像素的颜色
				*/
				vPositionEye = vertexPositionEye.xyz;  // 只取xyz分量，w分量用于透视除法
				vNormalEye = normalMatrix * normal;    // 将法线从局部空间变换到观察空间

				/*
					设置顶点的最终位置（裁剪空间坐标）
					说明：这是顶点着色器必须设置的输出
					
					projectionMatrix * vertexPositionEye: 观察空间 → 裁剪空间
					裁剪空间坐标的范围是[-1, 1]，超出范围的顶点会被裁剪掉
					
					gl_Position: 内置输出变量，表示顶点在裁剪空间中的位置
				*/
				gl_Position = projectionMatrix * vertexPositionEye;
			}
		</script>

		<!-- 
			片段着色器1：基本颜色材质的光照计算
			说明：这个着色器处理每个像素的颜色计算，使用冯氏光照模型
		-->
		<script id="fragmentShader1" type="x-shader/x-fragment">
			/*
				精度限定符（Precision Qualifier）
				说明：指定浮点数的精度，影响渲染质量和性能
				
				highp: 高精度，通常用于颜色和位置计算
				mediump: 中等精度，用于纹理坐标等
				lowp: 低精度，用于简单的颜色值
			*/
			precision highp float;

			/*
				线性空间到sRGB空间的转换函数
				说明：在计算机图形学中，颜色通常在sRGB空间显示，但在计算时使用线性空间
				
				为什么需要转换：
				1. 物理正确的光照计算应该在线性空间进行
				2. 显示器期望接收sRGB空间的颜色值
				3. 如果不转换，颜色会显得过暗或不准确
				
				转换公式：
				- 当颜色值 <= 0.0031308: sRGB = 12.92 * linear
				- 当颜色值 > 0.0031308: sRGB = 1.055 * linear^(1/2.4) - 0.055
				
				这里的0.41666约等于1/2.4
			*/
			vec4 LinearTosRGB( in vec4 value ) {
				/*
					mix函数：线性插值，根据第三个参数在第一个和第二个参数之间插值
					lessThanEqual函数：比较value.rgb的每个分量是否<=0.0031308
					pow函数：幂运算，这里用于伽马校正
				*/
				return vec4( mix( 
					pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ),  // 非线性部分
					value.rgb * 12.92,  // 线性部分
					vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) )  // 选择条件
				), value.a );
			}

			/*
				Uniform Buffer Object (UBO): 光照数据
				说明：包含所有光照相关的参数，可以在多个着色器和对象间共享
				
				LightingData: UBO的结构体定义
				Light: UBO的实例名称
				
				光照参数解释：
				position: 光源在世界空间中的位置
				ambientColor: 环境光颜色（不受物体朝向影响的基础光照）
				diffuseColor: 漫反射光颜色（与物体表面法线和光线角度相关）
				specularColor: 镜面反射（高光）颜色（与视线方向相关）
				shininess: 光泽度（高光指数），值越大高光点越小越亮
			*/
			uniform LightingData {
				vec3 position;      // 光源位置向量(x, y, z)
				vec3 ambientColor;  // 环境光颜色RGB分量
				vec3 diffuseColor;  // 漫反射光颜色RGB分量
				vec3 specularColor; // 镜面反射光颜色RGB分量
				float shininess;    // 光泽度系数（通常是2的幂次，如32、64、128）
			} Light;

			/*
				单独的非UBO uniform：物体颜色
				说明：每个对象可以有不同的基础颜色
			*/
			uniform vec3 color;  // 物体自身的颜色(RGB)

			/*
				从顶点着色器传入的变量（插值后的）
				说明：这些值在三角形的顶点之间进行了线性插值
			*/
			in vec3 vPositionEye;  // 当前像素在观察空间中的位置（插值后的）
			in vec3 vNormalEye;    // 当前像素在观察空间中的法线（插值后，需要重新归一化）

			/*
				输出颜色
				说明：片段着色器必须输出一个颜色值到指定的颜色附件
				
				out: GLSL 3.0中的输出限定符
				fragColor: 自定义的输出变量名称，对应渲染目标的颜色附件
			*/
			out vec4 fragColor;

			/*
				主函数：片段着色器的入口点
				说明：每个像素（或片段）都会执行这个函数一次
			*/
			void main()	{
				/*
					冯氏光照模型（Phong Reflection Model）计算
					说明：这是经典的局部光照模型，包含三个分量：环境光、漫反射、镜面反射
					
					计算步骤：
					1. 计算各个方向向量
					2. 计算漫反射强度（兰伯特余弦定律）
					3. 计算镜面反射强度（视线与反射方向的点积）
					4. 组合所有光照分量
				*/

				// 1. 计算光照方向向量（从表面点到光源）
				// 说明：normalize函数将向量归一化为单位长度（长度为1）
				vec3 l = normalize( Light.position - vPositionEye );

				// 2. 获取法线向量（需要重新归一化，因为插值可能改变长度）
				vec3 n = normalize( vNormalEye );

				// 3. 计算视线方向向量（从表面点到相机）
				// 说明：相机在观察空间的原点(0,0,0)，所以视线方向是原点到表面点的反向
				vec3 e = - normalize( vPositionEye );

				// 4. 计算反射向量（光线在表面的反射方向）
				// reflect函数：计算入射光线l关于法线n的反射方向
				// -l: 因为l是从表面到光源，反射计算需要从光源到表面
				vec3 r = normalize( reflect( - l, n ) );

				// 5. 计算漫反射强度（兰伯特余弦定律）
				// dot(n, l): 法线和光线方向的点积，等于cos(θ)，θ是法线与光线的夹角
				// max(..., 0.0): 确保结果不为负（背光面为0）
				float diffuseLightWeighting = max( dot( n, l ), 0.0 );

				// 6. 计算镜面反射强度（高光）
				// dot(r, e): 反射方向和视线方向的点积，等于cos(α)，α是反射与视线的夹角
				float specularLightWeighting = max( dot( r, e ), 0.0 );

				// 7. 应用光泽度指数（Phong指数）
				// pow函数：将点积结果提升到shininess次幂
				// 效果：shininess越大，高光区域越小越集中
				specularLightWeighting = pow( specularLightWeighting, Light.shininess );

				// 8. 计算总光照权重
				// 公式：最终光照 = 环境光 + 漫反射 * 漫反射强度 + 镜面反射 * 高光强度
				vec3 lightWeighting = Light.ambientColor +
					Light.diffuseColor * diffuseLightWeighting +
					Light.specularColor * specularLightWeighting;

				// 9. 计算最终颜色：物体颜色 × 光照权重
				// 注意：这是分量乘法（R*R, G*G, B*B），不是矩阵乘法
				fragColor = vec4( color.rgb * lightWeighting.rgb, 1.0 );

				// 10. 将线性颜色转换为sRGB颜色空间
				// 说明：这是为了正确在显示器上显示颜色
				fragColor = LinearTosRGB( fragColor );
			}
		</script>

		<!-- 
			第二种着色器：纹理材质
			说明：这个着色器用于渲染带纹理的3D对象（立方体），同样使用冯氏光照模型
			主要区别：使用纹理采样而不是纯色，并包含UV坐标处理
		-->
		<script id="vertexShader2" type="x-shader/x-vertex">
			/*
				使用std140布局的Uniform Buffer Object
				说明：std140是GLSL中的标准内存布局规则，确保不同硬件上内存对齐方式一致
				
				内存对齐规则：
				- 标量（float/int/bool）：4字节对齐
				- 向量（vec2/vec3/vec4）：按分量大小对齐，vec3也按vec4对齐
				- 矩阵：按列向量对齐，mat4相当于4个vec4
				
				使用std140可以确保CPU和GPU之间数据传递的正确性
			*/
			layout(std140) uniform ViewData {
				mat4 projectionMatrix;  // 投影矩阵，4x4矩阵，16个float
				mat4 viewMatrix;        // 视图矩阵，4x4矩阵，16个float
			};

			// 单独的非UBO uniforms
			uniform mat4 modelMatrix;   // 模型矩阵
			uniform mat3 normalMatrix;  // 法线矩阵

			/*
				顶点属性输入（增加UV坐标）
				说明：纹理材质需要纹理坐标来采样纹理
			*/
			in vec3 position;  // 顶点位置
			in vec3 normal;    // 顶点法线
			in vec2 uv;        // 纹理坐标（UV坐标），范围通常为[0,1]

			/*
				输出到片段着色器的变量（增加UV坐标）
			*/
			out vec3 vPositionEye;  // 观察空间中的顶点位置
			out vec3 vNormalEye;    // 观察空间中的法线方向
			out vec2 vUv;           // 纹理坐标（传递给片段着色器）

			void main()	{
				// 位置变换：局部空间 → 世界空间 → 观察空间
				vec4 vertexPositionEye = viewMatrix * modelMatrix * vec4( position, 1.0 );

				// 传递数据给片段着色器
				vPositionEye = vertexPositionEye.xyz;
				vNormalEye = normalMatrix * normal;
				vUv = uv;  // 直接传递UV坐标，不需要变换
				
				// 最终位置：观察空间 → 裁剪空间
				gl_Position = projectionMatrix * vertexPositionEye;
			}
		</script>

		<!-- 
			片段着色器2：纹理材质的光照计算
			说明：与第一个片段着色器类似，但使用纹理颜色而不是纯色
		-->
		<script id="fragmentShader2" type="x-shader/x-fragment">
			// 精度设置
			precision highp float;

			// 线性到sRGB转换函数（与之前相同）
			vec4 LinearTosRGB( in vec4 value ) {
				return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
			}

			/*
				纹理采样器
				说明：sampler2D是2D纹理的采样器类型，用于从纹理中读取颜色值
				
				纹理采样过程：
				1. 使用纹理坐标(vUv)定位纹理中的位置
				2. 使用texture函数读取该位置的像素颜色
				3. 根据纹理过滤设置（邻近、线性、各向异性）进行插值
			*/
			uniform sampler2D diffuseMap;  // 漫反射贴图采样器

			// 从顶点着色器传入的变量
			in vec2 vUv;            // 纹理坐标（在顶点之间插值后）
			in vec3 vPositionEye;   // 观察空间中的位置
			in vec3 vNormalEye;     // 观察空间中的法线
			
			// 输出颜色
			out vec4 fragColor;

			// Uniform Buffer Object: 光照数据（与之前相同）
			uniform LightingData {
				vec3 position;      // 光源位置
				vec3 ambientColor;  // 环境光颜色
				vec3 diffuseColor;  // 漫反射颜色
				vec3 specularColor; // 镜面反射颜色
				float shininess;    // 光泽度
			} Light;

			void main()	{
				/*
					冯氏光照计算（与第一个着色器完全相同）
					说明：光照计算逻辑不变，只是最终颜色来源不同
				*/

				// 计算各个方向向量
				vec3 l = normalize( Light.position - vPositionEye );
				vec3 n = normalize( vNormalEye );
				vec3 e = - normalize( vPositionEye );
				vec3 r = normalize( reflect( - l, n ) );

				// 计算光照强度
				float diffuseLightWeighting = max( dot( n, l ), 0.0 );
				float specularLightWeighting = max( dot( r, e ), 0.0 );
				specularLightWeighting = pow( specularLightWeighting, Light.shininess );

				// 计算总光照权重
				vec3 lightWeighting = Light.ambientColor +
					Light.diffuseColor * diffuseLightWeighting +
					Light.specularColor * specularLightWeighting;

				/*
					关键区别：从纹理采样颜色而不是使用纯色
					texture函数参数：
					1. sampler2D diffuseMap: 纹理采样器
					2. vec2 vUv: 纹理坐标，范围通常[0,1]
					
					返回值：vec4，包含RGBA四个分量
					.rgb: 取RGB颜色分量
				*/
				fragColor = vec4( texture( diffuseMap, vUv ).rgb * lightWeighting.rgb, 1.0 );

				// 颜色空间转换
				fragColor = LinearTosRGB( fragColor );
			}
		</script>

		<!-- 
			ES模块导入映射（Import Map）
			说明：现代JavaScript模块导入配置，告诉浏览器如何解析模块标识符
			
			作用：
			1. 将模块名称映射到实际文件路径
			2. 避免在代码中使用相对路径的混乱
			3. 方便管理依赖版本
			
			注意：这需要浏览器支持importmap特性
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript代码模块
			说明：使用ES6模块语法组织Three.js应用程序代码
			
			type="module": 表示这是一个ES6模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// 导入Three.js库的所有导出
			// 说明：* as THREE 将所有导出对象收集到THREE命名空间对象中
			import * as THREE from 'three';

			// 全局变量声明
			// 说明：这些变量在整个应用程序中共享
			let camera;     // 相机对象，定义视图和投影
			let scene;      // 场景对象，包含所有3D对象、灯光等
			let renderer;   // 渲染器对象，负责将3D场景绘制到2D canvas
			let clock;      // 时钟对象，用于动画时间管理

			// 初始化函数调用
			// 说明：页面加载完成后立即执行初始化
			init();

			/**
			 * 初始化函数
			 * 说明：设置Three.js应用程序的所有基本组件
			 * 包括：场景、相机、渲染器、几何体、材质、纹理、对象等
			 */
			function init() {
				// 获取DOM容器元素
				// 说明：Three.js将在其中创建canvas元素
				const container = document.getElementById( 'container' );

				/**
				 * 创建透视相机（PerspectiveCamera）
				 * 参数说明：
				 * 1. fov (45): 垂直视野角度（度），类似人眼视角
				 * 2. aspect: 宽高比（窗口宽度/高度）
				 * 3. near (0.1): 近裁剪面距离，比这个近的物体不显示
				 * 4. far (100): 远裁剪面距离，比这个远的物体不显示
				 * 
				 * 透视投影特点：近大远小，符合人眼视觉
				 */
				camera = new THREE.PerspectiveCamera( 
					45,  // 视野角度：45度，适中的视角
					window.innerWidth / window.innerHeight,  // 宽高比：根据窗口大小动态计算
					0.1,  // 近裁剪面：0.1个单位
					100   // 远裁剪面：100个单位
				);
				
				// 设置相机位置
				// 说明：set(x, y, z) 设置三维坐标
				camera.position.set( 0, 0, 25 );  // 相机位于Z轴正方向25个单位处

				/**
				 * 创建场景（Scene）
				 * 说明：场景是所有3D对象的容器，类似于舞台
				 * 包含：网格对象、灯光、相机、辅助对象等
				 */
				scene = new THREE.Scene();
				
				// 让相机看向场景中心点(0,0,0)
				// 说明：默认情况下，相机朝向Z轴负方向
				camera.lookAt( scene.position );

				/**
				 * 创建时钟（Clock）
				 * 说明：用于跟踪时间，实现平滑的动画
				 * 功能：可以获取自创建以来的总时间、上一帧的时间增量(delta time)
				 */
				clock = new THREE.Clock();

				// 创建几何体（Geometry）
				// 说明：几何体定义3D对象的形状，包含顶点、面、法线、UV坐标等数据
				const geometry1 = new THREE.TetrahedronGeometry();  // 四面体几何体，4个三角形面
				const geometry2 = new THREE.BoxGeometry();          // 立方体几何体，6个正方形面

				/**
				 * 加载纹理（Texture）
				 * 说明：纹理是2D图像，映射到3D对象表面
				 * 
				 * TextureLoader：Three.js的纹理加载器
				 * load()：异步加载图像文件，返回Texture对象
				 * 'textures/crate.gif'：纹理文件路径（木箱纹理）
				 */
				const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
				
				/**
				 * 设置纹理颜色空间
				 * 说明：确保纹理颜色正确显示
				 * 
				 * THREE.SRGBColorSpace：sRGB颜色空间，大多数图像文件使用的颜色空间
				 * 如果纹理是sRGB空间的，但Three.js在线性空间计算，需要正确转换
				 */
				texture.colorSpace = THREE.SRGBColorSpace;

				// ===================== Uniform Groups (UBOs) 创建 =====================
				/**
				 * Uniform Groups（Uniform Buffer Objects的Three.js封装）
				 * 说明：将相关的uniform变量分组，提高性能和内存效率
				 * 
				 * 为什么使用Uniform Groups：
				 * 1. 减少uniform更新开销：共享数据只需更新一次
				 * 2. 提高缓存效率：相关数据存储在连续内存中
				 * 3. 方便管理：逻辑上相关的uniform放在一起
				 */

				/**
				 * 1. 相机相关的Uniform Group
				 * 说明：包含投影矩阵和视图矩阵
				 * 这些数据对所有使用相同相机的对象都是相同的，是使用UBO的完美例子
				 */
				const cameraUniformsGroup = new THREE.UniformsGroup();
				
				// 设置UBO名称，必须与着色器中的block名称匹配
				cameraUniformsGroup.setName( 'ViewData' );
				
				/**
				 * 向Uniform Group添加uniform变量
				 * 说明：Uniform对象封装了GLSL uniform变量
				 * 
				 * camera.projectionMatrix：相机的投影矩阵（自动更新）
				 * camera.matrixWorldInverse：世界矩阵的逆矩阵，即视图矩阵
				 * 
				 * 注意：Three.js会自动更新这些矩阵，我们只需要传递引用
				 */
				cameraUniformsGroup.add( new THREE.Uniform( camera.projectionMatrix ) );  // 投影矩阵
				cameraUniformsGroup.add( new THREE.Uniform( camera.matrixWorldInverse ) ); // 视图矩阵

				/**
				 * 2. 光照相关的Uniform Group
				 * 说明：包含所有光照参数
				 * 这些数据对所有对象都是相同的（使用相同光源的场景）
				 */
				const lightingUniformsGroup = new THREE.UniformsGroup();
				lightingUniformsGroup.setName( 'LightingData' );  // 与着色器中的LightingData对应
				
				// 添加光照参数
				lightingUniformsGroup.add( 
					new THREE.Uniform( new THREE.Vector3( 0, 0, 10 ) )  // 光源位置：Z轴正方向10个单位
				);
				lightingUniformsGroup.add( 
					new THREE.Uniform( new THREE.Color( 0x7c7c7c ) )  // 环境光颜色：中性灰色
				);
				lightingUniformsGroup.add( 
					new THREE.Uniform( new THREE.Color( 0xd5d5d5 ) )  // 漫反射颜色：浅灰色
				);
				lightingUniformsGroup.add( 
					new THREE.Uniform( new THREE.Color( 0xe7e7e7 ) )  // 镜面反射颜色：更浅的灰色
				);
				lightingUniformsGroup.add( 
					new THREE.Uniform( 64 )  // 光泽度：64，适中的高光强度
				);

				// ===================== 材质创建 =====================
				/**
				 * 材质1：基本颜色材质（RawShaderMaterial）
				 * 说明：RawShaderMaterial提供对GLSL着色器的完全控制
				 * 与ShaderMaterial不同，它不会自动添加Three.js的uniform和attributes
				 */
				const material1 = new THREE.RawShaderMaterial( {
					/**
					 * uniforms：材质特有的uniform变量（非UBO部分）
					 * 说明：这些uniform每个对象都有不同的值
					 */
					uniforms: {
						// 模型矩阵：每个对象的世界变换矩阵
						modelMatrix: { value: null },
						
						// 法线矩阵：用于变换法线向量
						normalMatrix: { value: null },
						
						// 物体颜色：每个对象的独有颜色
						color: { value: null }
					},
					
					// 顶点着色器代码：从HTML脚本标签获取
					vertexShader: document.getElementById( 'vertexShader1' ).textContent,
					
					// 片段着色器代码：从HTML脚本标签获取
					fragmentShader: document.getElementById( 'fragmentShader1' ).textContent,
					
					/**
					 * GLSL版本：指定使用GLSL 3.0（ES 3.0）
					 * 说明：GLSL 3.0支持UBO、layout限定符等WebGL 2特性
					 */
					glslVersion: THREE.GLSL3
				} );

				/**
				 * 材质2：纹理材质
				 * 说明：使用纹理贴图而不是纯色
				 */
				const material2 = new THREE.RawShaderMaterial( {
					uniforms: {
						modelMatrix: { value: null },   // 模型矩阵
						diffuseMap: { value: null },    // 漫反射贴图（纹理）
					},
					vertexShader: document.getElementById( 'vertexShader2' ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader2' ).textContent,
					glslVersion: THREE.GLSL3
				} );

				// ===================== 创建网格对象 =====================
				/**
				 * 创建200个网格对象
				 * 说明：演示UBO如何高效管理大量对象
				 */
				for ( let i = 0; i < 200; i ++ ) {
					let mesh;  // 网格对象（几何体+材质的组合）

					// 交替创建两种类型的对象
					if ( i % 2 === 0 ) {
						/**
						 * 创建四面体对象
						 * 说明：i为偶数时创建四面体，使用基本颜色材质
						 * 
						 * geometry1: 四面体几何体
						 * material1.clone(): 克隆材质，每个对象需要独立的材质实例
						 * 因为uniforms值不同（如颜色、模型矩阵）
						 */
						mesh = new THREE.Mesh( geometry1, material1.clone() );

						/**
						 * 设置uniform groups（UBOs）
						 * 说明：这两个UBO在所有对象间共享
						 * 
						 * cameraUniformsGroup: 相机数据（所有对象相同）
						 * lightingUniformsGroup: 光照数据（所有对象相同）
						 * 
						 * 关键优势：这些数据在GPU内存中只有一份副本
						 */
						mesh.material.uniformsGroups = [ cameraUniformsGroup, lightingUniformsGroup ];
						
						/**
						 * 设置对象特有的uniforms
						 * 说明：这些值每个对象都不同
						 */
						mesh.material.uniforms.modelMatrix.value = mesh.matrixWorld;  // 模型的世界变换矩阵
						mesh.material.uniforms.normalMatrix.value = mesh.normalMatrix; // 法线变换矩阵
						
						// 随机颜色：白色(0xffffff)乘以0-1之间的随机数
						mesh.material.uniforms.color.value = new THREE.Color( 0xffffff * Math.random() );

					} else {
						/**
						 * 创建立方体对象
						 * 说明：i为奇数时创建立方体，使用纹理材质
						 */
						mesh = new THREE.Mesh( geometry2, material2.clone() );

						// 设置共享的UBOs（与四面体相同）
						mesh.material.uniformsGroups = [ cameraUniformsGroup, lightingUniformsGroup ];
						
						// 设置对象特有的uniforms
						mesh.material.uniforms.modelMatrix.value = mesh.matrixWorld;
						mesh.material.uniforms.diffuseMap.value = texture;  // 所有立方体共享同一个纹理
					}

					// 将网格对象添加到场景
					scene.add( mesh );

					/**
					 * 设置随机缩放
					 * 说明：让对象大小有变化，增加视觉多样性
					 * 
					 * Math.random(): 返回0-1之间的随机数
					 * 缩放范围：1.0 - 1.5（原始大小的100%到150%）
					 */
					const s = 1 + Math.random() * 0.5;
					
					// set(x, y, z) 设置三个轴的缩放因子
					// 这里三个轴使用相同的缩放值，保持形状比例
					mesh.scale.set( s, s, s );

					/**
					 * 设置随机旋转
					 * 说明：每个对象初始时有不同的朝向
					 * 
					 * Math.PI: π，约3.14159，180度
					 * 旋转范围：0-π弧度（0-180度）
					 */
					mesh.rotation.set(
						Math.random() * Math.PI,  // X轴旋转
						Math.random() * Math.PI,  // Y轴旋转
						Math.random() * Math.PI   // Z轴旋转
					);

					/**
					 * 设置随机位置
					 * 说明：在3D空间中分散对象
					 * 
					 * 位置范围：
					 * X: -20 到 20
					 * Y: -20 到 20
					 * Z: -10 到 10
					 * 
					 * Math.random() * 40 - 20:
					 * 1. Math.random() * 40: 0-40
					 * 2. -20: -20到20
					 */
					mesh.position.set(
						Math.random() * 40 - 20,  // X坐标
						Math.random() * 40 - 20,  // Y坐标
						Math.random() * 20 - 10   // Z坐标（深度方向范围较小）
					);
				}

				// ===================== 创建渲染器 =====================
				/**
				 * 创建WebGL渲染器
				 * 参数说明：
				 * { antialias: true }: 开启抗锯齿，平滑边缘锯齿
				 * 
				 * WebGLRenderer：Three.js的WebGL渲染器
				 * 负责将3D场景渲染到2D canvas元素上
				 */
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				
				/**
				 * 设置设备像素比
				 * 说明：匹配显示设备的物理像素和CSS像素比例
				 * 
				 * window.devicePixelRatio: 
				 * - 普通显示器：1
				 * - Retina/高清显示器：2或更高
				 * 
				 * 设置这个可以确保在高DPI显示器上清晰显示
				 */
				renderer.setPixelRatio( window.devicePixelRatio );
				
				/**
				 * 设置渲染器尺寸
				 * 说明：使canvas填充整个浏览器窗口
				 */
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				/**
				 * 设置动画循环
				 * 说明：requestAnimationFrame的Three.js封装
				 * 
				 * animate: 每帧调用的渲染函数
				 * 浏览器会在每次重绘前调用这个函数（通常60fps）
				 */
				renderer.setAnimationLoop( animate );
				
				/**
				 * 将canvas元素添加到DOM
				 * 说明：renderer.domElement是canvas元素的引用
				 */
				container.appendChild( renderer.domElement );

				/**
				 * 添加窗口大小调整事件监听
				 * 说明：当浏览器窗口大小改变时，需要更新相机和渲染器
				 * 
				 * false: 使用冒泡阶段（而非捕获阶段）
				 */
				window.addEventListener( 'resize', onWindowResize, false );
			}

			/**
			 * 窗口大小调整处理函数
			 * 说明：响应式设计，确保3D场景适应不同窗口大小
			 */
			function onWindowResize() {
				/**
				 * 更新相机宽高比
				 * 说明：窗口大小改变后，宽高比也改变了
				 * 如果不更新，图像会被拉伸或压缩
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新投影矩阵
				 * 说明：改变相机参数后，需要重新计算投影矩阵
				 * 这个操作比较耗时，但窗口大小调整不频繁
				 */
				camera.updateProjectionMatrix();

				/**
				 * 更新渲染器尺寸
				 * 说明：使canvas的新尺寸匹配窗口大小
				 * 同时会更新WebGL视口(viewport)
				 */
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 说明：每一帧都会被调用的主渲染循环
			 * 
			 * 主要任务：
			 * 1. 更新对象状态（位置、旋转等）
			 * 2. 渲染场景
			 */
			function animate() {
				/**
				 * 获取时间增量（Delta Time）
				 * 说明：上一帧到当前帧的时间间隔（秒）
				 * 
				 * 使用delta time的好处：
				 * 1. 动画速度与帧率无关
				 * 2. 在不同性能的设备上动画速度一致
				 */
				const delta = clock.getDelta();

				/**
				 * 遍历场景中的所有对象
				 * 说明：更新每个对象的旋转，创建动画效果
				 * 
				 * scene.traverse(): 递归遍历场景图的所有节点
				 * 回调函数对每个节点执行
				 */
				scene.traverse( function ( child ) {
					// 检查当前节点是否是网格对象
					if ( child.isMesh ) {
						/**
						 * 更新旋转角度
						 * 说明：随时间增加旋转角度，创建持续旋转的动画
						 * 
						 * delta * 0.5: X轴每帧旋转0.5弧度/秒
						 * delta * 0.3: Y轴每帧旋转0.3弧度/秒
						 * 
						 * 不同速度的旋转：创建更自然、多样的动画效果
						 */
						child.rotation.x += delta * 0.5;  // X轴旋转
						child.rotation.y += delta * 0.3;  // Y轴旋转

						/**
						 * 为什么不更新Z轴旋转？
						 * 说明：双轴旋转通常看起来更自然
						 * Z轴旋转可能使动画过于混乱
						 */
					}
				} );

				/**
				 * 渲染场景
				 * 说明：这是最核心的渲染调用
				 * 
				 * renderer.render( scene, camera ):
				 * 1. 使用指定的相机视角
				 * 2. 渲染整个场景（包括所有子对象）
				 * 3. 将结果绘制到canvas上
				 * 
				 * 内部过程：
				 * 1. 更新场景矩阵（世界矩阵、法线矩阵等）
				 * 2. 设置WebGL状态（深度测试、混合等）
				 * 3. 遍历所有对象，调用它们的着色器程序
				 * 4. 执行顶点和片段着色器计算
				 * 5. 输出到颜色缓冲区和深度缓冲区
				 */
				renderer.render( scene, camera );
			}

		</script>

	</body>
</html>