<!-- Three.js WebGPU 镜头光晕特效演示
一、核心功能概述
这是一个基于 WebGPU 和 Three.js 的交互式3D可视化应用，主要展示镜头光晕特效，模拟在虚拟宇宙环境中飞行探索的体验。

主要功能：
太空探索体验 - 用户可以在充满立方体星云的虚拟宇宙中自由飞行

动态光晕效果 - 三个不同颜色的点光源产生逼真的镜头光晕

大规模场景渲染 - 实时渲染3000个随机分布的立方体

沉浸式交互 - 第一人称飞行控制，支持6自由度移动

响应式设计 - 自适应不同屏幕尺寸和设备像素比

实时调试支持 - 集成场景检查器用于开发和调试

二、核心技术要点
1. WebGPU 渲染引擎
现代图形API：使用WebGPU替代传统的WebGL，提供更好的性能和功能

硬件加速：充分利用GPU并行计算能力

异步计算：支持更高效的渲染管线

内存管理：更精细的GPU内存控制

2. Three.js 架构
模块化导入：使用ES6模块系统组织代码

场景图管理：层级化的场景对象管理

材质系统：基于节点的材质定义（MeshPhongNodeMaterial）

相机系统：透视相机与裁剪面设置

3. 镜头光晕实现机制
text
光源系统：
├── PointLight（点光源）
│   ├── 基础照明功能
│   └── 光晕效果中心
└── LensflareMesh（光晕网格）
    ├── LensflareElement（主光晕）- textureFlare0
    ├── LensflareElement（辅助光晕1）- textureFlare3
    ├── LensflareElement（辅助光晕2）- textureFlare3
    ├── LensflareElement（辅助光晕3）- textureFlare3
    └── LensflareElement（辅助光晕4）- textureFlare3
技术特点：

广告牌技术：光晕始终面向相机

多纹理叠加：不同大小、位置、透明度的纹理混合

颜色继承：光晕颜色与光源颜色同步

父子关系：光晕作为光源的子对象自动跟随

4. 性能优化策略
静态物体优化：

javascript
mesh.matrixAutoUpdate = false;  // 禁用自动矩阵更新
mesh.updateMatrix();           // 手动更新一次
雾效优化：

javascript
scene.fog = new THREE.Fog(background, 3500, 15000);
// 远处物体逐渐融入雾中，减少细节渲染
合理的裁剪面：

javascript
new THREE.PerspectiveCamera(40, aspect, 1, 15000);
// 近裁剪面=1，远裁剪面=15000，避免渲染不可见物体
5. 交互控制系统
FlyControls 飞行控制器：

移动控制：W(前)、A(左)、S(后)、D(右)

垂直控制：R(上升)、F(下降)

视角控制：鼠标移动控制视角方向

滚转控制：Q/E键控制相机滚转

帧率无关：基于delta time的平滑运动

6. 视觉效果技术
HSL色彩系统：更直观的颜色控制

SRGB色彩空间：确保颜色显示一致性

环境雾效：增强场景深度感和空间感

光照系统：平行光 + 点光源组合照明

7. 开发调试工具
Import Map：模块路径映射管理

Inspector：实时场景调试工具

响应式事件：窗口大小自适应处理

三、技术架构分析
渲染管线流程：
text
初始化阶段
├── 创建场景容器
├── 设置相机参数
├── 配置场景环境（背景、雾效）
├── 生成静态几何体（3000立方体）
├── 设置灯光系统
└── 创建渲染器

运行时循环（每帧60次）
├── 计算时间增量(delta)
├── 更新控制器状态
├── 更新相机位置/旋转
├── 执行WebGPU渲染
└── 呈现到Canvas

事件处理
├── 窗口大小调整
├── 键盘输入处理
├── 鼠标输入处理
└── 触摸设备适配
内存管理策略：
几何体复用：所有立方体共享同一个几何体实例

材质复用：所有立方体使用相同材质

纹理缓存：光晕纹理只加载一次，多次使用

矩阵优化：静态物体矩阵预计算

四、技术亮点
1. WebGPU的优势体现
更高效的着色器编译

支持更复杂的后期处理

更好的多光源渲染性能

未来功能的扩展性

2. 特效的真实感
光晕随视角变化动态调整

颜色混合与透明度控制

多层次的光晕叠加效果

光源强度影响光晕大小

3. 用户体验优化
平滑的相机移动插值

自适应不同设备性能

直观的控制方案

即时的视觉反馈

五、应用场景扩展
这个技术方案可以扩展到：

游戏开发：太空探索类游戏的渲染引擎

数据可视化：大规模3D数据点的交互展示

建筑可视化：室内灯光效果模拟

教育培训：光学现象的教学演示

虚拟旅游：宇宙空间探索体验

六、技术挑战与解决方案
挑战	解决方案
大规模物体渲染性能	静态物体矩阵优化 + 雾效裁剪
光晕效果的真实感	多纹理分层叠加 + 广告牌技术
跨设备兼容性	响应式设计 + 设备像素比适配
用户交互流畅性	帧率无关动画 + 平滑插值
内存使用效率	几何体复用 + 纹理共享 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文本
			此处修改为中文，描述这是一个使用WebGPU的Three.js镜头光晕演示
		-->
		<title>Three.js WebGPU - 镜头光晕特效演示</title>
		
		<!-- 
			字符编码设置：
			utf-8是最通用的字符编码，支持中文、英文等多种语言字符
			确保页面能正确显示中文和其他特殊字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)元标签：
			控制移动设备上的页面显示和行为
			width=device-width：让页面宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面（为了保持3D场景的稳定性）
			minimum-scale=1.0, maximum-scale=1.0：将缩放比例锁定在1.0，即不缩放
			这些设置常用于全屏WebGL/WebGPU应用，确保最佳的视觉体验
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			外部CSS样式表链接：
			type="text/css"：指定链接文件的MIME类型为CSS
			rel="stylesheet"：定义当前文档与链接资源的关系为样式表
			href="example.css"：样式表文件的路径
			这个CSS文件包含页面的视觉样式，如按钮、布局、字体等
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 
			信息显示区域 (id="info")：
			这个div用于展示页面标题、说明和链接
			通常浮动在3D场景上方，提供用户界面信息
		-->
		<div id="info">
			<!-- 
				Three.js官网链接：
				target="_blank"：在新标签页中打开链接
				rel="noopener"：安全属性，防止新页面访问原页面的window.opener
				class="logo-link"：CSS类，可能用于添加Three.js的logo背景图片
				点击这个链接可以跳转到Three.js官方网站
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装容器：
				用于将主标题和副标题组合在一起，便于样式控制
			-->
			<div class="title-wrapper">
				<!-- 
					主标题链接：仍然是Three.js官网链接
					通常这里会显示"three.js"，并链接到官网
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 
					副标题：描述当前演示的具体内容
					这里修改为中文："镜头光晕特效演示"
				-->
				<span>镜头光晕特效演示</span>
			</div>

			<!-- 
				小字说明区域：
				<small>标签表示旁注信息，通常字体较小
				这里包含操作说明和纹理来源信息
			-->
			<small>
				<!-- 
					操作说明：
					第一行：WASD/RF/QE + 鼠标控制飞行
					WASD：前后左右移动
					RF：上升(R)和下降(F)
					QE：可能是左右平移或倾斜控制
					+ 鼠标：控制视角方向
				-->
				操作说明：使用WASD/RF/QE + 鼠标控制飞行<br/>
				
				<!-- 
					纹理来源说明：
					链接到纹理资源提供者的网站
					ro.me是一个著名的WebGL演示网站，提供高质量的纹理资源
					target="_blank"：在新标签页打开
					rel="noopener"：安全属性
				-->
				纹理资源来自 <a href="http://www.ro.me" target="_blank" rel="noopener">ro.me</a> 网站
			</small>
		</div>

		<!-- 
			Import Map (导入映射)：
			这是一个现代JavaScript特性，允许开发者控制模块的解析方式
			type="importmap"：指定这是一个导入映射定义
			作用：将模块标识符映射到实际URL，简化模块导入路径
			
			在这个例子中：
			- 当代码中导入"three"时，实际上会加载"../build/three.webgpu.js"
			- 当导入"three/addons/..."时，实际上会从"./jsm/"目录加载
			
			这样做的好处：
			1. 避免在代码中写冗长的相对路径
			2. 方便管理和更新模块路径
			3. 支持CDN和本地开发的灵活切换
		-->
		<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模块
			模块具有自己的作用域，不会污染全局命名空间
			支持动态导入、顶层await等现代JavaScript特性
		-->
		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js WebGPU核心库
			// * as THREE：将整个模块导入为THREE对象
			// 这样可以使用THREE.Scene、THREE.Color等
			import * as THREE from 'three/webgpu';

			// 导入飞行控制器
			// FlyControls提供第一人称飞行控制，适合太空探索类应用
			import { FlyControls } from 'three/addons/controls/FlyControls.js';
			
			// 导入镜头光晕组件
			// LensflareMesh：镜头光晕的网格对象
			// LensflareElement：光晕的单个元素（一个光晕由多个元素组成）
			import { LensflareMesh, LensflareElement } from 'three/addons/objects/LensflareMesh.js';
			
			// 导入检查器（调试工具）
			// Inspector通常提供场景树查看、性能分析等功能
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// DOM容器：用于承载Three.js的canvas元素
			let container;
			
			// Three.js三大核心对象：
			let camera;     // 相机：决定观察者的视角
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D屏幕
			
			// 控制器：处理用户输入，控制相机移动
			let controls;
			
			// 创建时钟对象
			// 用途：计算帧与帧之间的时间差(delta time)
			// delta time对于实现与帧率无关的平滑动画非常重要
			const clock = new THREE.Clock();

			// ============================================
			// 初始化函数调用
			// ============================================
			
			// 立即调用初始化函数
			// 这是整个应用的入口点
			init();

			/**
			 * 初始化函数
			 * 
			 * 功能：设置整个Three.js应用的基础环境
			 * 包括：创建DOM容器、相机、场景、灯光、几何体、材质、
			 *       渲染器、控制器，并设置事件监听器
			 * 
			 * 这是一个典型的Three.js应用初始化流程
			 */
			function init() {
				// ----------------------------------------------------
				// 1. 创建并添加DOM容器
				// ----------------------------------------------------
				
				// 创建一个新的div元素
				// 这个div将作为Three.js渲染器的父容器
				container = document.createElement( 'div' );
				
				// 将容器添加到页面的body中
				// appendChild是DOM API，用于添加子节点
				document.body.appendChild( container );

				// ----------------------------------------------------
				// 2. 创建相机 (Camera)
				// ----------------------------------------------------
				
				// 创建透视相机 (PerspectiveCamera)
				// 参数说明：
				// 参数1: fov (field of view) - 视野角度，单位是度
				//        40度是适中的视野，接近人眼的自然视野
				// 参数2: aspect ratio - 宽高比，通常是窗口宽度/高度
				//        这确保渲染的内容不会被拉伸
				// 参数3: near clipping plane - 近裁剪面
				//        距离相机小于1个单位（米）的物体不会被渲染
				// 参数4: far clipping plane - 远裁剪面
				//        距离相机大于15000个单位（米）的物体不会被渲染
				//        这两个值定义了相机的可见范围
				camera = new THREE.PerspectiveCamera( 
					40,                                     // 视野角度
					window.innerWidth / window.innerHeight, // 宽高比
					1,                                      // 近裁剪面
					15000                                   // 远裁剪面
				);
				
				// 设置相机初始位置
				// 在Three.js中，使用右手坐标系：
				// X轴：水平向右
				// Y轴：垂直向上  
				// Z轴：垂直屏幕向外
				// camera.position.z = 250 表示相机在Z轴正方向250单位处
				// 即相机在场景的前方，看向原点(0,0,0)
				camera.position.z = 250;

				// ----------------------------------------------------
				// 3. 创建场景 (Scene)
				// ----------------------------------------------------
				
				// 场景是Three.js中所有3D对象的容器
				// 类似于一个虚拟世界，可以添加网格、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用HSL色彩模式（色相、饱和度、亮度）创建颜色
				// HSL(0.51, 0.4, 0.01) 创建一个深蓝色
				// THREE.SRGBColorSpace：使用标准RGB色彩空间
				// 色彩空间影响颜色的显示方式，SRGB是Web标准
				scene.background = new THREE.Color().setHSL( 
					0.51,                    // 色相：0.5左右是蓝色
					0.4,                     // 饱和度：0.4表示中等饱和度
					0.01,                    // 亮度：0.01表示非常暗
					THREE.SRGBColorSpace     // 色彩空间
				);
				
				// 添加雾效 (Fog)
				// 雾效有两个作用：
				// 1. 增加场景的真实感和深度感
				// 2. 性能优化：远处的物体逐渐融入雾中，可以隐藏细节
				// 参数说明：
				// 参数1: 雾的颜色（与背景色相同，使过渡更自然）
				// 参数2: 雾的起始距离 - 3500单位处开始有雾
				// 参数3: 雾的最大距离 - 15000单位处完全被雾遮盖
				scene.fog = new THREE.Fog( 
					scene.background,  // 雾的颜色
					3500,              // 雾的起始距离
					15000              // 雾的最大距离
				);

				// ----------------------------------------------------
				// 4. 创建世界几何体 (World Geometry)
				// ----------------------------------------------------
				
				// 定义立方体的大小
				// 这里的s=250意味着每个立方体边长250个单位
				const s = 250;
				
				// 创建立方体几何体 (BoxGeometry)
				// 这是Three.js内置的基础几何体之一
				// 参数：宽度(s)、高度(s)、深度(s)
				const geometry = new THREE.BoxGeometry( s, s, s );
				
				// 创建Phong节点材质 (MeshPhongNodeMaterial)
				// 这是Three.js WebGPU版本的特殊材质类型
				// 与传统PhongMaterial不同，它使用节点系统
				// 参数说明：
				// color: 0xffffff - 白色（十六进制RGB颜色）
				// specular: 0xffffff - 白色高光
				// shininess: 50 - 光泽度，值越高高光点越小越亮
				const material = new THREE.MeshPhongNodeMaterial( { 
					color: 0xffffff,      // 基础颜色
					specular: 0xffffff,   // 高光颜色
					shininess: 50         // 光泽度
				} );

				// 创建大量随机立方体，模拟星空或宇宙环境
				// 循环3000次，创建3000个立方体
				for ( let i = 0; i < 3000; i ++ ) {
					// 创建网格对象 (Mesh)
					// 网格 = 几何体 + 材质
					const mesh = new THREE.Mesh( geometry, material );

					// 设置随机位置
					// Math.random() 返回0-1之间的随机数
					// 2.0 * Math.random() - 1.0 返回-1到1之间的随机数
					// 乘以8000：位置范围在-8000到8000之间
					// 这样创建了一个16000x16000x16000的巨大立方体区域
					mesh.position.x = 8000 * ( 2.0 * Math.random() - 1.0 );
					mesh.position.y = 8000 * ( 2.0 * Math.random() - 1.0 );
					mesh.position.z = 8000 * ( 2.0 * Math.random() - 1.0 );

					// 设置随机旋转
					// Math.PI 是π，约等于3.14159
					// 随机旋转角度在0到π之间（0到180度）
					mesh.rotation.x = Math.random() * Math.PI;
					mesh.rotation.y = Math.random() * Math.PI;
					mesh.rotation.z = Math.random() * Math.PI;

					// 性能优化设置
					// matrixAutoUpdate = false 表示禁用自动矩阵更新
					// 矩阵（Matrix）存储物体的位置、旋转、缩放信息
					// 对于静态物体（不移动、不旋转、不缩放），可以禁用自动更新
					// 这样可以显著提高渲染性能
					mesh.matrixAutoUpdate = false;
					
					// 手动更新一次矩阵（因为上面设置了位置和旋转）
					// 之后Three.js就不会每帧更新这个物体的矩阵了
					mesh.updateMatrix();

					// 将立方体添加到场景中
					scene.add( mesh );
				}

				// ----------------------------------------------------
				// 5. 创建灯光 (Lights)
				// ----------------------------------------------------
				
				// 创建平行光 (DirectionalLight)
				// 模拟太阳光，所有光线平行从一个方向照射
				// 参数说明：
				// 参数1: 颜色 - 0xffffff (白色)
				// 参数2: 强度 - 0.15 (比较弱的环境光)
				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.15 );
				
				// 设置灯光方向
				// set(0, -1, 0) 表示方向向量指向Y轴负方向（向下）
				// normalize() 将向量标准化（长度为1）
				dirLight.position.set( 0, - 1, 0 ).normalize();
				
				// 设置灯光颜色（使用HSL色彩模式）
				// HSL(0.1, 0.7, 0.5) 创建一个暖色调
				dirLight.color.setHSL( 0.1, 0.7, 0.5 );
				
				// 将平行光添加到场景
				scene.add( dirLight );

				// ----------------------------------------------------
				// 6. 创建镜头光晕效果 (Lens Flares)
				// ----------------------------------------------------
				
				// 创建纹理加载器
				// 用于加载图片文件作为纹理
				// 纹理是贴在3D物体表面的图片
				const textureLoader = new THREE.TextureLoader();

				// 加载镜头光晕纹理图片
				// load()方法是异步的，但Three.js会处理加载完成后的回调
				// 这里加载两个不同的光晕纹理
				const textureFlare0 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
				const textureFlare3 = textureLoader.load( 'textures/lensflare/lensflare3.png' );

				// 设置纹理的色彩空间为SRGB
				// SRGB是标准RGB色彩空间，适合用于颜色纹理
				// 确保颜色在不同显示器上显示一致
				textureFlare0.colorSpace = THREE.SRGBColorSpace;
				textureFlare3.colorSpace = THREE.SRGBColorSpace;

				// 添加三个带有光晕的点光源
				// 这些光源既是照明源，也是光晕效果的中心
				// 每个addLight调用创建一个点光源和对应的光晕
				addLight( 0.55, 0.95, 0.6, 5000, 0, - 1000 );   // 光源1：偏青色，在(5000, 0, -1000)
				addLight( 0.1, 0.85, 0.65, 0, 0, - 1000 );      // 光源2：偏绿色，在场景中心前方
				addLight( 0.995, 0.5, 0.95, 5000, 5000, - 1000 ); // 光源3：偏紫色，在(5000, 5000, -1000)

				/**
				 * 添加点光源及其镜头光晕的辅助函数
				 * 
				 * @param {number} h - HSL颜色的色相 (Hue)，范围0-1
				 * @param {number} s - HSL颜色的饱和度 (Saturation)，范围0-1
				 * @param {number} l - HSL颜色的亮度 (Lightness)，范围0-1
				 * @param {number} x - 光源在X轴的位置
				 * @param {number} y - 光源在Y轴的位置
				 * @param {number} z - 光源在Z轴的位置
				 */
				function addLight( h, s, l, x, y, z ) {
					// 创建点光源 (PointLight)
					// 参数说明：
					// 参数1: 颜色 - 0xffffff (白色，后面会重新设置)
					// 参数2: 强度 - 1.5 (比较亮的灯光)
					// 参数3: 距离 - 2000 (光照影响的最大距离)
					// 参数4: 衰减 - 0 (光的衰减系数，0表示使用默认值)
					const light = new THREE.PointLight( 0xffffff, 1.5, 2000, 0 );
					
					// 使用HSL值设置光源颜色
					// HSL比RGB更直观：色相决定颜色，饱和度决定鲜艳程度，亮度决定明暗
					light.color.setHSL( h, s, l );
					
					// 设置光源位置
					light.position.set( x, y, z );
					
					// 将光源添加到场景
					scene.add( light );

					// 创建镜头光晕网格
					// LensflareMesh是一个特殊的网格对象，专门用于渲染镜头光晕
					// 它总是面向相机，模拟相机镜头上的光晕效果
					const lensflare = new LensflareMesh();
					
					// 添加光晕元素 (LensflareElement)
					// 一个完整的光晕通常由多个元素叠加而成
					// 每个元素有不同的纹理、大小和位置
					
					// 第一个元素：主光晕
					// 参数说明：
					// 参数1: textureFlare0 - 使用的纹理
					// 参数2: 700 - 光晕大小（像素或单位）
					// 参数3: 0 - 光晕位置（沿光线方向，0表示在光源位置）
					// 参数4: light.color - 光晕颜色（与光源颜色相同）
					lensflare.addElement( new LensflareElement( textureFlare0, 700, 0, light.color ) );
					
					// 第二个元素：辅助光晕1
					// 60大小，0.6位置（沿光线方向60%处）
					lensflare.addElement( new LensflareElement( textureFlare3, 60, 0.6 ) );
					
					// 第三个元素：辅助光晕2
					// 70大小，0.7位置
					lensflare.addElement( new LensflareElement( textureFlare3, 70, 0.7 ) );
					
					// 第四个元素：辅助光晕3
					// 120大小，0.9位置
					lensflare.addElement( new LensflareElement( textureFlare3, 120, 0.9 ) );
					
					// 第五个元素：辅助光晕4
					// 70大小，1.0位置（与光源完全重合）
					lensflare.addElement( new LensflareElement( textureFlare3, 70, 1 ) );
					
					// 将光晕对象添加为光源的子对象
					// 这样做的好处是：当光源移动时，光晕会自动跟随
					// 因为Three.js中，子对象的位置是相对于父对象的
					light.add( lensflare );
				}

				// ----------------------------------------------------
				// 7. 创建渲染器 (Renderer)
				// ----------------------------------------------------
				
				// 创建WebGPU渲染器
				// WebGPU是新一代的图形API，比WebGL更高效、更灵活
				// 注意：需要浏览器支持WebGPU（Chrome 113+，Edge 113+）
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比 (Device Pixel Ratio)
				// window.devicePixelRatio 获取设备的物理像素与CSS像素的比例
				// 对于高DPI屏幕（如Retina显示屏），这个值可能是2或3
				// 设置这个值可以确保渲染清晰，不模糊
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器大小为窗口大小
				// 这样3D场景就会填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// setAnimationLoop 替代了传统的requestAnimationFrame
				// 它会在每次屏幕刷新时调用指定的函数（通常是60次/秒）
				// 这里传入的animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 附加调试检查器
				// Inspector是一个调试工具，通常按某个键（如F12）激活
				// 可以查看场景结构、材质属性、性能信息等
				renderer.inspector = new Inspector();
				
				// 获取渲染器的DOM元素（canvas元素）并添加到容器中
				// renderer.domElement是Three.js创建的<canvas>元素
				// 所有的3D渲染都发生在这个canvas上
				container.appendChild( renderer.domElement );

				// ----------------------------------------------------
				// 8. 创建控制器 (Controls)
				// ----------------------------------------------------
				
				// 创建飞行控制器
				// 参数说明：
				// 参数1: camera - 要控制的相机对象
				// 参数2: renderer.domElement - 监听输入事件的DOM元素
				controls = new FlyControls( camera, renderer.domElement );
				
				// 配置控制器参数
				
				// 移动速度：每秒钟移动2500个单位
				// 这个值很大，因为场景非常大（16000x16000x16000）
				controls.movementSpeed = 2500;
				
				// 设置控制器的DOM元素为整个容器
				// 这意味着整个3D区域都可以接收鼠标事件
				controls.domElement = container;
				
				// 滚转速度：每秒π/6弧度（约30度）
				// 滚转是飞机绕Z轴旋转的动作
				controls.rollSpeed = Math.PI / 6;
				
				// 禁用自动前进
				// 如果设置为true，相机会自动向前移动
				controls.autoForward = false;
				
				// 禁用"拖动查看"模式
				// 如果设置为true，需要按住鼠标键才能改变视角
				// false表示鼠标移动直接改变视角（更接近FPS游戏）
				controls.dragToLook = false;

				// ----------------------------------------------------
				// 9. 事件监听器设置
				// ----------------------------------------------------
				
				// 监听窗口大小改变事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				// 确保3D场景始终填满窗口，并且比例正确
				window.addEventListener( 'resize', onWindowResize );
			}

			// ============================================
			// 事件处理函数
			// ============================================

			/**
			 * 窗口大小调整事件处理函数
			 * 
			 * 功能：当浏览器窗口大小改变时，重新调整渲染器和相机
			 * 这是WebGL/WebGPU应用的常见需求，确保渲染内容正确适应新窗口尺寸
			 */
			function onWindowResize() {
				// 1. 更新渲染器大小
				// 让渲染器的canvas元素与窗口新的大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 2. 更新相机的宽高比
				// 相机需要知道渲染区域的宽高比，否则图像会被拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 3. 更新相机的投影矩阵
				// 当相机参数改变后，必须调用updateProjectionMatrix()
				// 这会重新计算相机的投影矩阵，影响3D到2D的转换
				camera.updateProjectionMatrix();
			}

			// ============================================
			// 动画和渲染函数
			// ============================================

			/**
			 * 动画循环函数
			 * 
			 * 功能：这是每一帧都会调用的函数
			 * 由renderer.setAnimationLoop(animate)设置
			 * 通常这里会更新场景状态（如动画、物理模拟）
			 * 然后调用渲染函数
			 */
			function animate() {
				// 调用渲染函数
				// 在实际应用中，这里可能还会：
				// 1. 更新物体位置、旋转
				// 2. 检测碰撞
				// 3. 处理用户输入
				// 4. 更新动画状态
				render();
			}

			/**
			 * 渲染函数
			 * 
			 * 功能：执行实际的渲染操作
			 * 1. 计算时间增量
			 * 2. 更新控制器（根据用户输入更新相机位置）
			 * 3. 渲染场景
			 * 
			 * 这是整个应用的核心循环
			 */
			function render() {
				// 获取时间增量 (delta time)
				// delta是自上一帧以来经过的时间（以秒为单位）
				// 例如：60FPS时，delta大约是1/60≈0.0167秒
				// 使用delta time可以实现与帧率无关的平滑动画
				// 无论用户是60FPS还是144FPS，移动速度都是一致的
				const delta = clock.getDelta();
				
				// 更新控制器
				// 控制器需要知道时间增量来正确计算移动距离
				// 这样即使帧率变化，移动速度也不会变化
				controls.update( delta );
				
				// 执行渲染
				// renderer.render()是将3D场景绘制到2D屏幕的核心方法
				// 参数说明：
				// 参数1: scene - 要渲染的场景
				// 参数2: camera - 从哪个视角渲染
				// 这个方法会触发GPU执行所有着色器程序，最终在canvas上显示图像
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>