<!-- 描述一下代码功能，和主要技术点
Three.js WebGL 模型查看器 - 功能描述与技术点分析
🎯 整体功能描述
这是一个基于 Three.js 构建的专业级 3D 模型查看器，主要用于在 Web 浏览器中交互式展示和操作高质量的 3D 模型。应用特别针对 Cerberus（最终幻想 VII 中的枪械） 模型进行了优化，提供了一个功能完整、用户友好的 3D 可视化环境。

🔧 核心功能模块
1. 3D 模型加载与渲染
模型格式支持：加载 OBJ 格式的 3D 模型

材质系统：

支持 PBR（基于物理的渲染）材质

加载并使用多张纹理贴图：

漫反射贴图（颜色）

法线贴图（表面细节）

粗糙度/金属度贴图（材质属性）

环境光照：使用 HDR 环境贴图提供真实的环境反射

2. 相机系统（双模式支持）
透视相机：模拟人眼视觉效果，支持近大远小的透视关系

正交相机：保持物体大小恒定，无透视变形，适合技术展示

实时切换：用户可在两种相机模式间无缝切换

3. 交互控制系统
Arcball 控制器：提供直观的 3D 交互方式

旋转：像旋转球体一样旋转模型

缩放：鼠标滚轮缩放，支持光标中心缩放

平移：平移视点位置

控制器状态管理：

复制/粘贴控制器状态

重置到初始状态

状态持久化支持

4. 用户界面与控制面板
参数化控制：通过 GUI 面板调整所有控制参数

实时反馈：所有修改即时生效并反映在渲染中

分层组织：控制选项按功能分组显示

5. 响应式设计
窗口自适应：自动调整渲染尺寸和相机参数

设备像素适配：支持高分辨率显示设备

键盘快捷键：Ctrl+C/V 快速复制粘贴状态

🛠️ 主要技术点详解
1. Three.js 核心架构
javascript
// 三大核心组件
const scene = new THREE.Scene();      // 场景容器
const camera = new THREE.PerspectiveCamera(...);  // 观察视角
const renderer = new THREE.WebGLRenderer(...);    // 渲染引擎
技术特点：

场景图管理：使用树状结构管理所有 3D 对象

WebGL 底层封装：提供高级 API 同时保留底层控制

模块化设计：各组件职责分离，易于维护

2. PBR 材质系统
javascript
const material = new THREE.MeshStandardMaterial({
  roughness: 1,           // 粗糙度控制
  metalness: 1,           // 金属度控制
  map: diffuseMap,        // 漫反射贴图
  normalMap: normalMap,   // 法线贴图
  roughnessMap: roughnessMap  // 粗糙度贴图
});
技术实现：

物理准确性：模拟真实光线与材质的交互

多纹理支持：使用纹理贴图增加表面细节

颜色空间管理：正确使用 sRGB 颜色空间

3. Arcball 控制器算法
工作原理：

虚拟球体映射：将 2D 屏幕坐标映射到 3D 虚拟球体

旋转计算：根据鼠标移动计算球体旋转

四元数插值：平滑的旋转动画

javascript
// Arcball 控制的核心配置
const controls = new ArcballControls(camera, renderer.domElement, scene);
controls.enableRotate = true;    // 启用旋转
controls.enablePan = true;       // 启用平移
controls.enableZoom = true;      // 启用缩放
4. HDR 环境光照
javascript
// HDR 环境贴图设置
hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = hdrEquirect;  // 设置为场景环境
技术优势：

高动态范围：保留更多光线信息

真实反射：提供准确的环境反射效果

全局光照：统一的光照计算

5. 相机投影系统
javascript
// 透视相机
new THREE.PerspectiveCamera(fov, aspect, near, far);

// 正交相机
new THREE.OrthographicCamera(left, right, top, bottom, near, far);
投影矩阵计算：

透视投影：模拟人眼视角，有灭点

正交投影：平行投影，保持比例

裁切空间：定义可见范围（近裁切面/远裁切面）

6. GUI 交互系统
实现特点：

动态参数绑定：GUI 控件与控制器参数实时同步

回调机制：参数变化时自动触发相应函数

状态管理：保持界面状态与控制器状态一致

7. 性能优化技术
纹理压缩：使用 JPG 格式减小纹理尺寸

裁切优化：合理的近/远裁切面设置

事件防抖：避免频繁的渲染调用

内存管理：及时释放不再使用的资源

📊 技术架构流程图
text
用户操作 → 事件监听 → Arcball控制器 → 更新相机参数
    ↓
GUI控制面板 → 参数变更 → 控制器配置 → 渲染更新
    ↓
模型/纹理加载 → 材质系统 → PBR渲染 → WebGL渲染
    ↓
HDR环境贴图 → 全局光照 → 最终渲染 → 屏幕显示 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示为"Three.js WebGL - Arcball 控制器模型查看器" -->
		<title>Three.js WebGL - Arcball 控制器模型查看器</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户缩放页面
			minimum-scale=1.0: 最小缩放比例为1.0
			maximum-scale=1.0: 最大缩放比例为1.0
		-->
		<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="main.css">
	</head>

	<body>
		<!-- 
			信息显示区域：展示项目信息和版权信息
			id="info": 用于CSS样式和JavaScript操作的标识
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接：
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全设置，防止新页面访问原页面的window对象
			-->
			<a href="https://three.js.org" target="_blank" rel="noopener">Three.js</a> 
			- 基于Arcball控制器的3D模型查看器<br/>
			<!-- 
				3D模型来源信息链接：
				模型名称：Cerberus（最终幻想7中的枪械）
				作者：Andrew Maximov
			-->
			<a href="http://www.polycount.com/forum/showthread.php?t=130641" target="_blank" rel="noopener">
				Cerberus（最终幻想7枪械）模型
			</a> 
			由 Andrew Maximov 创建
		</div>

		<!-- 
			导入映射（Import Map）：
			这是ES6模块系统的配置，告诉浏览器从哪里加载模块
			type="importmap": 指定脚本类型为导入映射
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module": 指定这是一个ES6模块，支持模块化导入
		-->
		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js核心库的所有功能，命名为THREE
			// THREE是Three.js的全局命名空间对象
			import * as THREE from 'three';

			// 导入轻量级GUI库，用于创建控制面板
			// GUI允许用户交互式调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入Arcball控制器
			// ArcballControls是一种3D交互控制方式，提供直观的旋转、缩放、平移操作
			// 特点：模拟球体旋转，适合3D模型查看
			import { ArcballControls } from 'three/addons/controls/ArcballControls.js';

			// 导入OBJ模型加载器
			// OBJ是一种常见的3D模型文件格式
			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
			
			// 导入HDR环境贴图加载器
			// HDR是高动态范围图像，用于提供高质量的环境光照
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';

			// ============================================
			// 全局变量和常量定义
			// ============================================
			
			// 相机类型数组：定义可选的相机类型
			const cameras = [ 'Orthographic', 'Perspective' ];
			
			// 当前相机类型对象：存储用户选择的相机类型
			// 初始值为'Perspective'（透视相机）
			const cameraType = { type: 'Perspective' };

			// 透视相机与模型之间的距离常数
			// 这个距离决定了透视相机观察模型的初始位置
			const perspectiveDistance = 2.5;
			
			// 正交相机与模型之间的距离常数
			// 正交相机需要更大的距离才能完整显示模型
			const orthographicDistance = 120;
			
			// 全局变量声明（在初始化函数中赋值）
			let camera;        // Three.js相机对象
			let controls;      // Arcball控制器对象
			let scene;         // Three.js场景对象（包含所有3D对象）
			let renderer;      // Three.js渲染器对象
			let gui;           // GUI控制面板对象
			
			// GUI文件夹对象（用于组织控制选项）
			let folderOptions;      // 主选项文件夹
			let folderAnimations;   // 动画选项文件夹（嵌套在主文件夹内）

			// ============================================
			// Arcball控制器GUI配置对象
			// ============================================
			
			// arcballGui对象：管理和配置Arcball控制器的GUI界面
			const arcballGui = {
				// 控制小工具（gizmo）的可见性
				// gizmo是3D空间中的可视化控制器，帮助用户理解操作方向
				gizmoVisible: true,

				// 设置Arcball控制器的主要方法
				// 这个方法创建控制器实例并配置相关参数
				setArcballControls: function () {
					// 创建ArcballControls实例
					// 参数1: camera - 要控制的相机对象
					// 参数2: renderer.domElement - 渲染器的DOM元素，用于监听事件
					// 参数3: scene - 场景对象，用于确定焦点目标
					controls = new ArcballControls( camera, renderer.domElement, scene );
					
					// 添加控制器变化事件监听器
					// 当控制器状态改变（用户操作）时，触发render函数重新渲染场景
					controls.addEventListener( 'change', render );

					// 初始化小工具为可见状态
					this.gizmoVisible = true;

					// 调用populateGui方法，将控制选项添加到GUI面板
					this.populateGui();
				},

				// 填充GUI控制面板的方法
				// 这个方法创建各种控制器选项，并将其添加到GUI中
				populateGui: function () {
					// ============================================
					// 基础控制选项（添加到folderOptions文件夹）
					// ============================================
					
					// 启用/禁用控制器
					folderOptions.add( controls, 'enabled' ).name( '启用控制器' );
					
					// 启用/禁用焦点功能
					folderOptions.add( controls, 'enableFocus' ).name( '启用焦点' );
					
					// 启用/禁用网格显示
					folderOptions.add( controls, 'enableGrid' ).name( '启用网格' );
					
					// 启用/禁用旋转功能
					folderOptions.add( controls, 'enableRotate' ).name( '启用旋转' );
					
					// 启用/禁用平移功能
					folderOptions.add( controls, 'enablePan' ).name( '启用平移' );
					
					// 启用/禁用缩放功能
					folderOptions.add( controls, 'enableZoom' ).name( '启用缩放' );
					
					// 启用/禁用光标缩放（缩放时以光标位置为中心）
					folderOptions.add( controls, 'cursorZoom' ).name( '光标缩放' );
					
					// 启用/禁用自动调整近远裁切面
					folderOptions.add( controls, 'adjustNearFar' ).name( '调整近/远裁切面' );
					
					// ============================================
					// 参数控制选项（带有数值范围）
					// ============================================
					
					// 缩放因子控制：范围1.1到10，步长0.1
					// 控制缩放操作的灵敏度
					folderOptions.add( controls, 'scaleFactor', 1.1, 10, 0.1 ).name( '缩放因子' );
					
					// 最小距离限制：范围0到50，步长0.5
					// 相机可以接近模型的最小距离
					folderOptions.add( controls, 'minDistance', 0, 50, 0.5 ).name( '最小距离' );
					
					// 最大距离限制：范围0到50，步长0.5
					// 相机可以远离模型的最大距离
					folderOptions.add( controls, 'maxDistance', 0, 50, 0.5 ).name( '最大距离' );
					
					// 最小缩放限制：范围0到50，步长0.5
					// 允许的最小缩放级别
					folderOptions.add( controls, 'minZoom', 0, 50, 0.5 ).name( '最小缩放' );
					
					// 最大缩放限制：范围0到50，步长0.5
					// 允许的最大缩放级别
					folderOptions.add( controls, 'maxZoom', 0, 50, 0.5 ).name( '最大缩放' );
					
					// ============================================
					// 可视化控制选项
					// ============================================
					
					// 控制小工具（gizmo）的可见性
					// onChange回调函数：当值改变时调用controls.setGizmosVisible方法
					folderOptions.add( arcballGui, 'gizmoVisible' ).name( '显示小工具' ).onChange( function () {
						// 调用控制器的setGizmosVisible方法，更新小工具可见性
						controls.setGizmosVisible( arcballGui.gizmoVisible );
					} );
					
					// ============================================
					// 状态管理功能
					// ============================================
					
					// 复制控制器状态（对应键盘快捷键Ctrl+C）
					folderOptions.add( controls, 'copyState' ).name( '复制状态(Ctrl+C)' );
					
					// 粘贴控制器状态（对应键盘快捷键Ctrl+V）
					folderOptions.add( controls, 'pasteState' ).name( '粘贴状态(Ctrl+V)' );
					
					// 重置控制器到初始状态
					folderOptions.add( controls, 'reset' ).name( '重置' );
					
					// ============================================
					// 动画控制选项（添加到folderAnimations文件夹）
					// ============================================
					
					// 启用/禁用动画效果
					folderAnimations.add( controls, 'enableAnimations' ).name( '启用动画' );
					
					// 阻尼因子控制：范围0到100，步长1
					// 控制动画运动的阻尼效果，值越大运动越慢
					folderAnimations.add( controls, 'dampingFactor', 0, 100, 1 ).name( '阻尼系数' );
					
					// 最大角速度控制：范围0到100，步长1
					// 控制旋转动画的最大角速度
					folderAnimations.add( controls, 'wMax', 0, 100, 1 ).name( '最大角速度' );
				}
			};

			// ============================================
			// 初始化函数调用
			// ============================================
			
			// 调用init函数，启动应用程序
			// 注意：函数声明在下方，JavaScript会进行函数提升
			init();

			// ============================================
			// 主初始化函数
			// ============================================
			
			/**
			 * 初始化整个3D应用程序
			 * 这个函数是应用的入口点，负责：
			 * 1. 创建渲染器和容器
			 * 2. 初始化场景和相机
			 * 3. 加载3D模型和纹理
			 * 4. 设置事件监听器
			 * 5. 创建GUI控制面板
			 */
			function init() {
				// ============================================
				// 第1步：创建DOM容器
				// ============================================
				
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中
				document.body.appendChild( container );

				// ============================================
				// 第2步：创建WebGL渲染器
				// ============================================
				
				// 创建WebGL渲染器实例
				// 参数配置：
				// antialias: true - 启用抗锯齿，使边缘更平滑
				// alpha: true - 启用透明度，允许背景显示
				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
				
				// 设置渲染器的像素比
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比率
				// 在高分辨率屏幕上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器大小为整个窗口
				// window.innerWidth和window.innerHeight获取浏览器视口的内宽高
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置色调映射算法为Reinhard色调映射
				// 色调映射用于将HDR（高动态范围）颜色转换到LDR（低动态范围）显示
				renderer.toneMapping = THREE.ReinhardToneMapping;
				
				// 设置色调映射的曝光值
				// 值越大，场景越亮
				renderer.toneMappingExposure = 3;
				
				// 设置渲染器DOM元素的背景样式
				// 使用CSS线性渐变创建从黑色到浅蓝色的背景
				renderer.domElement.style.background = 'linear-gradient( 180deg, rgba( 0,0,0,1 ) 0%, rgba( 128,128,255,1 ) 100% )';
				
				// 将渲染器的DOM元素（canvas）添加到容器中
				container.appendChild( renderer.domElement );

				// ============================================
				// 第3步：创建场景和相机
				// ============================================
				
				// 创建Three.js场景对象
				// 场景是所有3D对象的容器，包括模型、灯光、相机等
				scene = new THREE.Scene();

				// 调用makePerspectiveCamera函数创建透视相机
				camera = makePerspectiveCamera();
				
				// 设置相机位置
				// 参数(x, y, z): (0, 0, perspectiveDistance)
				// 相机位于原点上方，沿Z轴正方向移动perspectiveDistance距离
				camera.position.set( 0, 0, perspectiveDistance );

				// ============================================
				// 第4步：创建材质和加载模型
				// ============================================
				
				// 创建PBR（基于物理的渲染）材质
				// MeshStandardMaterial支持金属度、粗糙度等PBR属性
				const material = new THREE.MeshStandardMaterial();

				// 使用OBJLoader加载3D模型
				// setPath: 设置模型文件的基础路径
				// load: 异步加载模型文件，加载完成后执行回调函数
				new OBJLoader()
					.setPath( 'models/obj/cerberus/' )  // 设置模型文件目录
					.load( 'Cerberus.obj', function ( group ) {
						// 加载完成回调函数，参数group是包含模型网格的Group对象
						
						// 创建纹理加载器，并设置纹理文件的路径
						const textureLoader = new THREE.TextureLoader().setPath( 'models/obj/cerberus/' );

						// ============================================
						// 第4.1步：配置材质属性
						// ============================================
						
						// 设置材质的粗糙度（0表示完全光滑，1表示完全粗糙）
						material.roughness = 1;
						
						// 设置材质的金属度（0表示非金属，1表示金属）
						material.metalness = 1;

						// 加载漫反射贴图（颜色贴图）
						// Cerberus_A.jpg: 包含模型的颜色信息
						const diffuseMap = textureLoader.load( 'Cerberus_A.jpg', render );
						
						// 设置漫反射贴图的颜色空间为sRGB
						// sRGB是标准的颜色空间，更符合人眼感知
						diffuseMap.colorSpace = THREE.SRGBColorSpace;
						
						// 将漫反射贴图应用到材质的map属性
						material.map = diffuseMap;

						// 加载粗糙度/金属度贴图（同一张纹理）
						// Cerberus_RM.jpg: R通道可能是粗糙度，G通道可能是金属度
						// 这里将同一张纹理同时赋值给roughnessMap和metalnessMap
						material.metalnessMap = material.roughnessMap = textureLoader.load( 'Cerberus_RM.jpg', render );
						
						// 加载法线贴图
						// Cerberus_N.jpg: 包含表面法线信息，用于增加细节而不增加几何复杂度
						material.normalMap = textureLoader.load( 'Cerberus_N.jpg', render );

						// ============================================
						// 第4.2步：配置纹理包装方式
						// ============================================
						
						// 设置所有纹理的S方向（水平方向）的包装方式为重复
						// RepeatWrapping表示纹理在UV坐标超过1时重复显示
						material.map.wrapS = THREE.RepeatWrapping;
						material.roughnessMap.wrapS = THREE.RepeatWrapping;
						material.metalnessMap.wrapS = THREE.RepeatWrapping;
						material.normalMap.wrapS = THREE.RepeatWrapping;

						// ============================================
						// 第4.3步：将材质应用到模型
						// ============================================
						
						// 遍历模型组中的所有子对象
						// group.traverse方法递归访问组中的所有子对象
						group.traverse( function ( child ) {
							// 检查子对象是否是网格（Mesh）类型
							if ( child.isMesh ) {
								// 将配置好的材质赋值给网格
								child.material = material;
							}
						} );

						// ============================================
						// 第4.4步：调整模型位置和旋转
						// ============================================
						
						// 将模型绕Y轴旋转90度（π/2弧度）
						// 这通常是为了让模型以正确的方向显示
						group.rotation.y = Math.PI / 2;
						
						// 将模型沿X轴正方向移动0.25个单位
						group.position.x += 0.25;
						
						// 将模型组添加到场景中
						scene.add( group );
						
						// 调用render函数进行初始渲染
						render();

						// ============================================
						// 第4.5步：加载HDR环境贴图
						// ============================================
						
						// 使用HDRLoader加载HDR环境贴图
						new HDRLoader()
							.setPath( 'textures/equirectangular/' )  // 设置HDR文件路径
							.load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
								// HDR加载完成回调函数
								
								// 设置HDR贴图的映射方式为等距圆柱投影
								// 这种映射方式将2D纹理映射到球体上，适合用作环境贴图
								hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
								
								// 将HDR贴图设置为场景的环境贴图
								// 环境贴图提供全局光照和反射信息
								scene.environment = hdrEquirect;
								
								// 重新渲染场景，显示环境光照效果
								render();
							} );

						// ============================================
						// 第5步：设置事件监听器
						// ============================================
						
						// 添加键盘按下事件监听器
						// 用于处理Ctrl+C和Ctrl+V快捷键
						window.addEventListener( 'keydown', onKeyDown );
						
						// 添加窗口大小调整事件监听器
						// 当浏览器窗口大小改变时，调整相机和渲染器
						window.addEventListener( 'resize', onWindowResize );

						// ============================================
						// 第6步：创建GUI控制面板
						// ============================================
						
						// 创建GUI实例
						// GUI会在页面上创建一个可折叠的控制面板
						gui = new GUI();
						
						// 添加相机类型选择器
						// 参数说明：
						// cameraType: 目标对象
						// 'type': 要控制的属性名
						// cameras: 可选值数组
						gui.add( cameraType, 'type', cameras ).name( '选择相机类型' ).onChange( function () {
							// 当相机类型改变时，调用setCamera函数
							setCamera( cameraType.type );
						} );

						// 创建Arcball参数主文件夹
						// addFolder创建可折叠的文件夹，用于组织相关选项
						folderOptions = gui.addFolder( 'Arcball控制参数' );
						
						// 创建动画参数子文件夹（嵌套在主文件夹内）
						folderAnimations = folderOptions.addFolder( '动画参数' );

						// ============================================
						// 第7步：设置Arcball控制器
						// ============================================
						
						// 调用arcballGui的setArcballControls方法
						// 这个方法会创建控制器并填充GUI选项
						arcballGui.setArcballControls();

						// 最后，调用render函数进行渲染
						render();
					} );
			}

			// ============================================
			// 相机创建函数
			// ============================================
			
			/**
			 * 创建正交相机
			 * 正交相机没有透视效果，物体大小不会随距离改变
			 * 常用于工程制图、2.5D游戏等场景
			 * 
			 * @returns {THREE.OrthographicCamera} 新创建的正交相机对象
			 */
			function makeOrthographicCamera() {
				// 计算垂直方向的半视角（弧度）
				// 45度视野，除以2得到半视角，再转换为弧度
				const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5;
				
				// 计算水平方向的半视角
				// 根据窗口宽高比调整水平视角，保持正确的比例
				const halfFovH = Math.atan( ( window.innerWidth / window.innerHeight ) * Math.tan( halfFovV ) );

				// 计算正交相机的左右边界
				// 基于透视距离和水平半视角的正切值计算
				const halfW = perspectiveDistance * Math.tan( halfFovH );
				
				// 计算正交相机的上下边界
				// 基于透视距离和垂直半视角的正切值计算
				const halfH = perspectiveDistance * Math.tan( halfFovV );
				
				// 定义相机的近裁切面
				// 距离相机小于0.01的物体不会被渲染
				const near = 0.01;
				
				// 定义相机的远裁切面
				// 距离相机大于2000的物体不会被渲染
				const far = 2000;
				
				// 创建正交相机对象
				// 参数说明：
				// -halfW: 左边界（负值表示向左扩展）
				// halfW: 右边界
				// halfH: 上边界
				// -halfH: 下边界（负值表示向下扩展）
				// near: 近裁切面
				// far: 远裁切面
				const newCamera = new THREE.OrthographicCamera( - halfW, halfW, halfH, - halfH, near, far );
				
				// 返回新创建的相机
				return newCamera;
			}

			/**
			 * 创建透视相机
			 * 透视相机模拟人眼视角，有近大远小的透视效果
			 * 常用于3D游戏、仿真等场景
			 * 
			 * @returns {THREE.PerspectiveCamera} 新创建的透视相机对象
			 */
			function makePerspectiveCamera() {
				// 视野角度（Field of View）
				// 45度是一个常用的值，提供自然的视角
				const fov = 45;
				
				// 宽高比（Aspect Ratio）
				// 根据窗口宽度和高度计算
				const aspect = window.innerWidth / window.innerHeight;
				
				// 近裁切面
				// 距离相机小于0.01的物体不会被渲染
				const near = 0.01;
				
				// 远裁切面
				// 距离相机大于2000的物体不会被渲染
				const far = 2000;
				
				// 创建透视相机对象
				// 参数说明：
				// fov: 视野角度（垂直方向）
				// aspect: 宽高比
				// near: 近裁切面
				// far: 远裁切面
				const newCamera = new THREE.PerspectiveCamera( fov, aspect, near, far );
				
				// 返回新创建的相机
				return newCamera;
			}

			// ============================================
			// 事件处理函数
			// ============================================
			
			/**
			 * 窗口大小调整事件处理函数
			 * 当浏览器窗口大小改变时，重新调整相机和渲染器
			 */
			function onWindowResize() {
				// 检查当前相机类型
				if ( camera.type == 'OrthographicCamera' ) {
					// 如果是正交相机，重新计算相机边界
					
					// 重新计算垂直半视角
					const halfFovV = THREE.MathUtils.DEG2RAD * 45 * 0.5;
					
					// 重新计算水平半视角（考虑新的窗口宽高比）
					const halfFovH = Math.atan( ( window.innerWidth / window.innerHeight ) * Math.tan( halfFovV ) );

					// 重新计算左右边界
					const halfW = perspectiveDistance * Math.tan( halfFovH );
					
					// 重新计算上下边界
					const halfH = perspectiveDistance * Math.tan( halfFovV );
					
					// 更新正交相机的边界属性
					camera.left = - halfW;     // 左边界
					camera.right = halfW;      // 右边界
					camera.top = halfH;        // 上边界
					camera.bottom = - halfH;   // 下边界

				} else if ( camera.type == 'PerspectiveCamera' ) {
					// 如果是透视相机，更新宽高比
					camera.aspect = window.innerWidth / window.innerHeight;
				}

				// 无论哪种相机类型，都需要更新投影矩阵
				// 投影矩阵定义了3D空间到2D屏幕的映射关系
				camera.updateProjectionMatrix();

				// 更新渲染器大小，使其适应新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 重新渲染场景
				render();
			}

			/**
			 * 渲染函数
			 * 将3D场景渲染到2D画布上
			 */
			function render() {
				// 调用渲染器的render方法
				// 参数1: scene - 要渲染的场景
				// 参数2: camera - 用于渲染的相机
				renderer.render( scene, camera );
			}

			/**
			 * 键盘按下事件处理函数
			 * 处理Ctrl+C（复制状态）和Ctrl+V（粘贴状态）快捷键
			 * 
			 * @param {KeyboardEvent} event 键盘事件对象
			 */
			function onKeyDown( event ) {
				// 检查按下的键是否是'c'（复制）
				if ( event.key === 'c' ) {
					// 检查是否同时按下了Ctrl键（Windows/Linux）或Cmd键（Mac）
					if ( event.ctrlKey || event.metaKey ) {
						// 调用控制器的copyState方法，复制当前控制器状态
						controls.copyState();
					}
				} 
				// 检查按下的键是否是'v'（粘贴）
				else if ( event.key === 'v' ) {
					// 检查是否同时按下了Ctrl键或Cmd键
					if ( event.ctrlKey || event.metaKey ) {
						// 调用控制器的pasteState方法，粘贴之前复制的状态
						controls.pasteState();
					}
				}
			}

			/**
			 * 设置相机类型的函数
			 * 根据用户选择的相机类型，切换不同的相机
			 * 
			 * @param {string} type 相机类型，'Orthographic'或'Perspective'
			 */
			function setCamera( type ) {
				// 根据类型创建对应的相机
				if ( type == 'Orthographic' ) {
					// 创建正交相机
					camera = makeOrthographicCamera();
					
					// 设置正交相机的位置
					// 正交相机需要更大的距离才能完整显示模型
					camera.position.set( 0, 0, orthographicDistance );
				} else if ( type == 'Perspective' ) {
					// 创建透视相机
					camera = makePerspectiveCamera();
					
					// 设置透视相机的位置
					// 透视相机距离模型较近，以产生透视效果
					camera.position.set( 0, 0, perspectiveDistance );
				}

				// 将新创建的相机设置到Arcball控制器
				// 控制器需要知道当前使用的是哪个相机
				controls.setCamera( camera );

				// 重新渲染场景，显示新相机的视角
				render();
			}

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