<!-- PMREM平行光测试示例 - 功能描述与技术分析
🎯 核心功能描述
1. 测试目的与原理
这是一个专业级的图形渲染对比测试，主要用于评估Three.js中PMREM（Pre-filtered Mipmapped Radiance Environment Map） 算法的准确性。

核心对比：

左侧（PMREM开启）：使用HDR环境贴图进行全局光照

右侧（PMREM关闭）：使用传统平行光源进行直接光照

两者理论上应该产生相同的光照效果，差异反映了PMREM近似算法的误差

2. 可视化测试场景
创建了一个11×3的球体矩阵，系统地测试不同材质属性：

text
球体排列（从左上到右下）：
┌─────────────────────────────────────────────┐
│ 粗糙度=0.0  0.1  0.2  ...  1.0  (11列)      │
│ 白色金属   白金属 白金属 ... 白金属  (第1行) │
│ 白色绝缘体 白绝缘 白绝缘 ... 白绝缘  (第2行) │
│ 黑色绝缘体 黑绝缘 黑绝缘 ... 黑绝缘  (第3行) │
└─────────────────────────────────────────────┘
3. 交互功能
视角控制：鼠标拖拽旋转、滚轮缩放

实时切换：点击GUI面板随时切换PMREM开关

调试工具：内置Inspector可查看场景结构

⚙️ 主要技术点分析
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
下一代图形API：替代WebGL，提供更好的性能和现代GPU功能支持

异步初始化：await renderer.init()确保GPU资源正确加载

抗锯齿支持：硬件级MSAA抗锯齿

2. PMREM技术
javascript
const pmremGenerator = new THREE.PMREMGenerator(renderer);
radianceMap = pmremGenerator.fromEquirectangular(texture).texture;
PMREM工作流程：
输入：等距柱状投影的HDR环境贴图

转换：转换为立方体贴图格式

预滤波：为不同粗糙度级别生成多级mipmap

输出：可直接用于实时渲染的辐射度贴图

技术优势：
实时性能：预处理后，运行时只需简单采样

高质量IBL：实现基于图像的照明（Image-Based Lighting）

粗糙度支持：不同粗糙度表面使用不同模糊级别的贴图

3. 基于物理的渲染（PBR）
javascript
const material = new THREE.MeshPhysicalMaterial({
    roughness: x / 10,
    metalness: y < 1 ? 1 : 0,
    color: y < 2 ? 0xffffff : 0x000000,
    envMap: radianceMap,
    envMapIntensity: 1
});
材质参数系统：
参数	范围	描述
粗糙度	0.0-1.0	表面微观粗糙程度（0=镜面，1=漫反射）
金属度	0或1	电导率（0=绝缘体，1=导体/金属）
基础色	白/黑	材质的反照率颜色
4. HDR与色调映射
javascript
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
HDR处理链：
HDR加载：.hdr格式存储高动态范围数据

线性空间：在渲染管线中保持线性颜色空间

色调映射：ACES Filmic算法将HDR值压缩到显示器范围

sRGB输出：转换为标准显示色彩空间

5. 精确的光源匹配
javascript
// HDR像素到平行光的精确转换
const pixelValue = 1 / (Math.sin(phi) * (Math.PI/512) ** 2);
// ≈ 27,490 nits
单位转换公式：
text
平行光强度（lux） = HDR像素值（nits） × 像素立体角（sr）
其中：立体角 = sin(φ) × (π/512)²
6. 响应式相机系统
javascript
function updateCamera() {
    // 保持水平FOV恒定，计算垂直FOV
    const verticalFoV = 2 * Math.atan(
        Math.tan(horizontalFoV / 2 * Math.PI / 180) / camera.aspect
    ) * 180 / Math.PI;
}
设计理念：无论窗口宽高比如何变化，水平视野保持不变，避免图像拉伸。

🔬 测试的科学性
1. 控制变量法
唯一变量：PMREM算法的开启/关闭

固定参数：

相同的几何体（球体）

相同的相机位置

相同的光源能量（1 lux）

相同的材质属性

2. 误差可视化
理想情况：两种渲染方式应完全一致

实际差异：显示了PMREM在以下方面的近似误差：

高频细节丢失（预滤波过程）

方向性精度

能量守恒

3. 应用场景
图形引擎开发：验证渲染算法的正确性

学术研究：分析实时全局光照的近似误差

内容创作：理解PBR材质在不同光照下的表现

🚀 性能优化技术
1. 异步资源加载
javascript
Promise.resolve()
    .then(init)          // 初始化核心
    .then(createObjects); // 加载资源
非阻塞：避免加载HDR时界面卡顿

渐进式：先显示界面，再加载内容

2. 着色器预编译
javascript
pmremGenerator.compileEquirectangularShader();
消除卡顿：避免运行时编译着色器

提升体验：确保模式切换时流畅

3. 资源管理
javascript
pmremGenerator.dispose(); // 及时释放资源
内存优化：生成贴图后立即释放生成器

防止泄漏：避免不必要的GPU内存占用 -->


<!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
		-->
		<title>Three.js WebGPU - PMREM平行光测试</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部CSS样式表 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：
			- id="info": 用于CSS样式选择和JavaScript操作
			- 这个区域显示页面标题、说明文字和操作指南
		-->
		<div id="info">
			<!-- 
				three.js官方logo链接：
				- href: 指向three.js官网
				- target="_blank": 在新标签页打开链接
				- rel="noopener": 安全设置，防止新页面访问原页面的window对象
				- class="logo-link": CSS样式类，通常用于设置logo背景图片
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：点击可访问three.js官网
					- <a>: 链接到three.js官网
					- <span>: 显示本页面的具体测试名称
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span> - PMREM平行光对比测试</span>
			</div>

			<!-- 
				详细说明区域（使用<small>标签表示次要信息）：
				- <br>: 换行标签
				- 第一行：说明图中球体代表的材质类型
				- 第二行：说明两种渲染模式的区别
				- 第三行：说明本测试的目的和意义
				- 第四行：作者信息和致谢
			-->
			<small>
				按键说明：1键-白色金属材质 | 2键-白色绝缘体材质 | 3键-黑色绝缘体材质
				<br>渲染模式：PMREM开启时使用HDR环境贴图（包含单个高亮像素）| PMREM关闭时使用平行光源
				<br>测试目的：对比两种渲染方式的差异，评估PMREM（预滤波辐射度环境贴图）近似算法的误差
				<br>测试案例作者：<a href="https://github.com/elalish" target="_blank" rel="noopener">Emmett Lalish</a>
				<br>操作指南：右上角设置面板可切换PMREM开关 | 鼠标拖拽旋转视角 | 滚轮缩放
			</small>
		</div>

		<!-- 
			导入映射配置（Import Map）：
			- 这是现代浏览器支持的模块导入映射系统
			- 允许开发者定义模块标识符到实际文件路径的映射关系
			- type="importmap": 指定脚本类型为导入映射
			用途：
			1. 简化模块导入路径
			2. 管理依赖版本
			3. 实现模块的别名功能
			配置说明：
			- "three": 主库文件路径
			- "three/webgpu": WebGPU相关模块路径
			- "three/tsl": 着色器语言模块路径
			- "three/addons/": 插件和扩展模块目录
		-->
		<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核心库的所有功能
			// * as THREE: 将所有导出内容放在THREE命名空间下
			import * as THREE from 'three';

			// 导入Three.js插件模块
			// OrbitControls: 轨道控制器，用于鼠标控制相机旋转、平移和缩放
			// HDRLoader: HDR（高动态范围）图像加载器，支持.hdr格式文件
			// Inspector: 调试检查器，提供场景对象的可视化调试界面
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ============ 全局变量声明 ============
			// 声明将在多个函数中使用的变量
			// 使用let而不是var，因为let具有块级作用域，更安全
			let scene;      // 场景对象：包含所有3D物体、光源和相机
			let camera;     // 相机对象：定义观察者的视角和投影方式
			let controls;   // 控制器对象：用户交互控制
			let renderer;   // 渲染器对象：负责将3D场景绘制到2D画布上

			// ============ 初始化函数 ============
			/**
			 * 异步初始化函数
			 * async关键字表示函数内部可以使用await进行异步操作
			 * 这个函数负责创建和配置所有核心组件
			 */
			async function init() {

				// 获取当前浏览器窗口的尺寸
				// window.innerWidth/innerHeight: 包含滚动条的窗口内部尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;
				// 计算宽高比，用于相机投影矩阵的设置
				// 宽高比不正确会导致图像拉伸变形
				const aspect = width / height;

				// ------------ 创建渲染器 ------------
				/**
				 * WebGPURenderer: Three.js的WebGPU渲染器实现
				 * WebGPU是新一代图形API，替代WebGL，提供更好的性能和功能
				 * 参数说明：
				 * { antialias: true } - 开启抗锯齿，平滑边缘锯齿
				 */
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比，适配高DPI显示器（如Retina屏）
				// window.devicePixelRatio: 物理像素与CSS像素的比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器输出画布的大小（单位：像素）
				renderer.setSize( width, height );
				
				// 设置动画循环回调函数
				// 替代传统的requestAnimationFrame，Three.js的现代动画循环方式
				renderer.setAnimationLoop( render );
				
				// 创建并附加调试检查器
				// Inspector可以帮助开发者查看和修改场景中对象的属性
				renderer.inspector = new Inspector();

				// ------------ 色调映射设置 ------------
				/**
				 * 色调映射（Tone Mapping）：
				 * 将HDR（高动态范围）颜色值转换为LDR（低动态范围）显示设备可显示的值
				 * ACESFilmicToneMapping: 电影行业标准的色调映射算法，提供电影感的色彩
				 * toneMappingExposure: 曝光度控制，1.0表示标准曝光
				 */
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 1;

				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// renderer.domElement: 渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// 添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时，重新调整渲染尺寸和相机参数
				window.addEventListener( 'resize', onWindowResize );

				// ------------ 初始化WebGPU渲染器 ------------
				/**
				 * WebGPU需要异步初始化，因为它涉及GPU设备的创建和上下文设置
				 * await: 等待异步操作完成，确保渲染器完全初始化后再继续执行
				 */
				await renderer.init();

				// ------------ 创建场景 ------------
				/**
				 * Scene: 场景容器，所有要渲染的3D对象都添加到场景中
				 * 场景还管理背景、雾效等环境效果
				 */
				scene = new THREE.Scene();

				// ------------ 创建相机 ------------
				/**
				 * PerspectiveCamera: 透视相机，模拟人眼的视角
				 * 参数说明：
				 * 1. fov: 垂直视场角（度），40表示比较自然的视角
				 * 2. aspect: 宽高比，根据窗口尺寸计算
				 * 3. near: 近裁剪面，距离相机小于此值的物体不会被渲染
				 * 4. far: 远裁剪面，距离相机大于此值的物体不会被渲染
				 */
				camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
				// 更新相机参数（确保垂直FOV正确）
				updateCamera();
				// 设置相机初始位置：在Z轴上向后移动16个单位
				camera.position.set( 0, 0, 16 );

				// ------------ 创建轨道控制器 ------------
				/**
				 * OrbitControls: 最常用的Three.js相机控制器
				 * 功能：鼠标左键拖拽旋转、右键拖拽平移、滚轮缩放
				 * 参数说明：
				 * 1. camera: 要控制的相机对象
				 * 2. domElement: 监听事件的DOM元素，通常是渲染器的画布
				 */
				controls = new OrbitControls( camera, renderer.domElement );
				// 设置相机与目标点的最小距离限制
				controls.minDistance = 4;
				// 设置相机与目标点的最大距离限制
				controls.maxDistance = 20;

				// ------------ 创建平行光源 ------------
				/**
				 * DirectionalLight: 平行光，模拟太阳光等远距离光源
				 * 特性：光线平行，不随距离衰减
				 * 参数说明：
				 * 1. 0xffffff: 光的颜色（白色），十六进制RGB格式
				 * 2. 0: 光的初始强度，设为0（在GUI中会切换）
				 */
				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0 );
				
				// 计算光源的球面坐标位置
				// 这些坐标对应HDR图像中的特定像素位置（x=597, y=213）
				const x = 597;  // HDR图像中的X坐标（经度方向）
				const y = 213;  // HDR图像中的Y坐标（纬度方向）
				
				// 将像素坐标转换为球面角（弧度制）
				// 图像尺寸为1024x512，所以除以512
				// +0.5是为了取像素中心点
				const theta = ( x + 0.5 ) * Math.PI / 512;  // 经度角（0到2π）
				const phi = ( y + 0.5 ) * Math.PI / 512;    // 纬度角（0到π）
				
				// 将球面坐标转换为笛卡尔坐标（三维空间坐标）
				// setFromSphericalCoords参数：
				// 1. radius: 半径，设为100确保光源足够远（近似平行光）
				// 2. phi: 纬度角（从天顶开始），-phi是因为坐标系方向
				// 3. theta: 经度角，Math.PI/2 - theta调整坐标系
				directionalLight.position.setFromSphericalCoords( 100, -phi, Math.PI / 2 - theta );
				
				// 将光源添加到场景中
				scene.add( directionalLight );
				
				// 可选：添加平行光辅助器，可视化光源方向（调试用）
				// scene.add( new THREE.DirectionalLightHelper( directionalLight ) );

				// ------------ 技术说明注释 ------------
				/**
				 * 本测试的光源设置原理：
				 * 1. HDR环境贴图（spot1Lux.hdr）的单位是nits（cd/m²，即lux/sr）
				 * 2. 平行光的单位是lux（勒克斯，照度单位）
				 * 3. 为了精确对比，需要将HDR中的一个像素转换为等效的平行光
				 * 
				 * 转换公式：
				 * 像素值 = 1 lux / 像素立体角
				 * 立体角 = sin(phi) * (Δθ * Δφ) ≈ sin(phi) * (π/512)^2
				 * 因此：像素值 = 1 / (sin(phi) * (π/512)^2) ≈ 27,490 nits
				 * 
				 * 这样设置后，HDR中的单个高亮像素与1 lux的平行光理论上应该产生相同的光照效果
				 */

				// ------------ 创建GUI控制面板 ------------
				/**
				 * 通过Inspector创建参数控制面板
				 * 用户可以通过这个面板交互式地控制PMREM的开关
				 */
				const gui = renderer.inspector.createParameters( '设置' );
				
				// 添加PMREM开关控件
				gui.add( { enabled: true }, 'enabled' )
					.name( 'PMREM开关' )  // 控件显示名称
					.onChange( value => {  // 值变化时的回调函数
						
						// 根据PMREM开关状态设置平行光强度
						// PMREM开启时：使用HDR环境贴图，平行光强度为0
						// PMREM关闭时：使用平行光，强度为1
						directionalLight.intensity = value ? 0 : 1;

						// 遍历场景中的所有对象
						// scene.traverse()会递归遍历场景树的所有子节点
						scene.traverse( function ( child ) {

							// 检查是否是网格对象（Mesh）
							if ( child.isMesh ) {
								
								// 调整材质的环境贴图强度
								// 当使用平行光时（PMREM关闭），降低环境贴图的影响
								// 当使用环境贴图时（PMREM开启），使用完整的环境贴图强度
								child.material.envMapIntensity = 1 - directionalLight.intensity;
								
							}

						} );

					} );

			} // init函数结束

			// ============ 创建场景物体函数 ============
			/**
			 * 创建测试用的球体网格
			 * 这些球体展示不同材质属性（粗糙度、金属度、颜色）在PMREM下的表现
			 */
			function createObjects() {

				// 声明辐射度贴图变量（用于存储生成的PMREM贴图）
				let radianceMap = null;
				
				// 创建HDR加载器实例并加载环境贴图
				new HDRLoader()
					// 可选：设置数据类型（默认可能是HalfFloatType，FloatType精度更高但内存占用更大）
					// .setDataType( THREE.FloatType )
					
					// 设置纹理文件的路径
					.setPath( 'textures/equirectangular/' )
					
					// 异步加载HDR文件
					// 'spot1Lux.hdr': HDR文件名，包含单个高亮像素的环境贴图
					// 回调函数在文件加载完成后执行，参数texture是加载的纹理对象
					.load( 'spot1Lux.hdr', function ( texture ) {
						
						// ------------ 生成PMREM贴图 ------------
						/**
						 * PMREMGenerator: 预滤波辐射度环境贴图生成器
						 * 作用：将等距柱状投影的HDR贴图转换为立方体贴图，
						 * 并预计算不同粗糙度级别所需的模糊版本
						 * 
						 * fromEquirectangular(): 从等距柱状贴图生成PMREM
						 * .texture: 获取生成的辐射度贴图
						 */
						radianceMap = pmremGenerator.fromEquirectangular( texture ).texture;
						
						// 释放PMREM生成器资源（生成完成后不再需要）
						pmremGenerator.dispose();

						// 设置场景背景为辐射度贴图
						// 这样可以看到环境贴图本身，有助于理解光照环境
						scene.background = radianceMap;

						// ------------ 创建球体几何体 ------------
						/**
						 * SphereGeometry: 球体几何体
						 * 参数说明：
						 * 1. radius: 半径 = 0.4 单位
						 * 2. widthSegments: 经度分段数 = 32（影响球体平滑度）
						 * 3. heightSegments: 纬度分段数 = 32
						 */
						const geometry = new THREE.SphereGeometry( 0.4, 32, 32 );

						// ------------ 创建材质网格矩阵 ------------
						/**
						 * 创建11x3的球体网格矩阵：
						 * - X轴（水平）：11个球体，展示粗糙度从0到1的变化
						 * - Y轴（垂直）：3个球体，展示不同材质类型
						 *   第一行：白色金属材质（metalness=1, color=white）
						 *   第二行：白色绝缘体材质（metalness=0, color=white）
						 *   第三行：黑色绝缘体材质（metalness=0, color=black）
						 */
						for ( let x = 0; x <= 10; x ++ ) {  // 粗糙度变化：0, 0.1, 0.2, ..., 1.0

							for ( let y = 0; y <= 2; y ++ ) {  // 材质类型：0, 1, 2

								// 创建物理材质（PBR材质）
								/**
								 * MeshPhysicalMaterial: 基于物理的渲染材质
								 * 支持金属度-粗糙度工作流，适合真实感渲染
								 */
								const material = new THREE.MeshPhysicalMaterial( {
									// 粗糙度：0.0（完全光滑）到1.0（完全粗糙）
									// x从0到10，除以10得到0到1的粗糙度
									roughness: x / 10,
									
									// 金属度：1.0（金属）或0.0（非金属/绝缘体）
									// y<1（即y=0）时为金属，y>=1时为绝缘体
									metalness: y < 1 ? 1 : 0,
									
									// 基础颜色：白色或黑色
									// y<2（即y=0,1）时为白色，y=2时为黑色
									color: y < 2 ? 0xffffff : 0x000000,
									
									// 环境贴图：使用生成的PMREM辐射度贴图
									envMap: radianceMap,
									
									// 环境贴图强度：控制环境光对材质的影响程度
									envMapIntensity: 1
								} );

								// 创建网格对象（几何体+材质）
								const mesh = new THREE.Mesh( geometry, material );
								
								// 设置网格位置
								// X坐标：x-5，使球体水平居中（-5到+5）
								mesh.position.x = x - 5;
								// Y坐标：1-y，使球体垂直排列（1, 0, -1）
								mesh.position.y = 1 - y;
								
								// 将网格添加到场景中
								scene.add( mesh );

							}

						}

					} ); // HDR加载回调结束

				// ------------ 创建PMREM生成器 ------------
				/**
				 * 注意：PMREMGenerator必须在加载纹理之前创建
				 * 因为需要用它来处理加载的HDR纹理
				 * 
				 * 参数：renderer - 渲染器实例，用于编译着色器
				 */
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				
				// 预编译等距柱状投影着色器
				// 这样可以避免在生成PMREM时出现卡顿
				pmremGenerator.compileEquirectangularShader();

			} // createObjects函数结束

			// ============ 窗口大小变化处理函数 ============
			/**
			 * 当浏览器窗口大小改变时调用
			 * 确保渲染尺寸和相机参数与窗口尺寸匹配
			 */
			function onWindowResize() {

				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机宽高比
				// 如果宽高比不正确，渲染的图像会变形
				camera.aspect = width / height;
				
				// 调用更新相机函数，重新计算垂直FOV和投影矩阵
				updateCamera();

				// 更新渲染器输出画布的大小
				renderer.setSize( width, height );

			}

			// ============ 更新相机参数函数 ============
			/**
			 * 更新相机参数，确保正确的透视投影
			 * 这个函数保持水平视场角恒定，根据宽高比计算垂直视场角
			 */
			function updateCamera() {

				// 设置固定的水平视场角（40度）
				const horizontalFoV = 40;
				
				/**
				 * 根据水平FOV和宽高比计算垂直FOV
				 * 公式推导：
				 * 水平FOV和垂直FOV的关系：tan(hFOV/2) / tan(vFOV/2) = aspect
				 * 所以：vFOV = 2 * arctan( tan(hFOV/2) / aspect )
				 * 
				 * 计算步骤：
				 * 1. 将水平FOV从角度转换为弧度：horizontalFoV * Math.PI / 180
				 * 2. 计算一半的水平FOV的正切值：Math.tan( horizontalFoV / 2 * Math.PI / 180 )
				 * 3. 除以宽高比得到一半的垂直FOV的正切值
				 * 4. 取反正切得到一半的垂直FOV（弧度）
				 * 5. 乘以2得到完整的垂直FOV（弧度）
				 * 6. 转换为角度：* 180 / Math.PI
				 */
				const verticalFoV = 2 * Math.atan( 
					Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect 
				) * 180 / Math.PI;
				
				// 设置相机的垂直视场角
				camera.fov = verticalFoV;
				
				// 更新相机的投影矩阵
				// 当相机参数（fov, aspect, near, far）改变后，必须调用此方法
				camera.updateProjectionMatrix();

			}

			// ============ 渲染循环函数 ============
			/**
			 * 每一帧渲染时调用的函数
			 * 这是Three.js动画循环的核心
			 * 注意：这个函数不直接调用requestAnimationFrame，
			 * 而是通过renderer.setAnimationLoop()设置的
			 */
			function render() {

				// 执行渲染
				// 参数：
				// 1. scene: 要渲染的场景
				// 2. camera: 使用的相机视角
				renderer.render( scene, camera );

			}

			// ============ 应用启动流程 ============
			/**
			 * 使用Promise链式调用确保正确的初始化顺序：
			 * 1. Promise.resolve(): 创建一个已解决的Promise，作为起点
			 * 2. .then(init): 首先执行初始化函数（创建渲染器、场景、相机等）
			 * 3. .then(createObjects): 然后创建场景中的物体（加载纹理、生成网格）
			 * 
			 * 这种写法比async/await更简洁，适合简单的启动流程
			 */
			Promise.resolve()
				.then( init )          // 第一步：初始化核心组件
				.then( createObjects ); // 第二步：创建场景内容

		</script>
	</body>
</html>