<!-- 代码功能概述
这是一个基于Three.js WebGPU的Matcap材质实时演示程序，允许用户通过拖放不同的Matcap贴图文件来实时改变3D模型的材质外观。

核心功能
3D模型展示：加载并显示一个高质量的人头模型（Lee Perry Smith）

Matcap材质系统：使用基于图像的光照技术，通过2D纹理模拟复杂材质效果

实时材质更换：支持通过拖放操作更换Matcap贴图

交互控制：提供轨道控制器旋转视角、GUI参数调整

多格式支持：支持JPG、PNG、WebP、AVIF和EXR格式的Matcap贴图

主要技术点详解
1. WebGPU渲染引擎
javascript
renderer = new THREE.WebGPURenderer( { antialias: true } );
现代图形API：使用WebGPU代替传统的WebGL，提供更好的性能和更现代的图形特性

硬件加速：直接调用GPU进行渲染，支持更复杂的着色器和效果

异步计算：更好的并行处理能力

2. Matcap材质技术
javascript
mesh.material = new THREE.MeshMatcapNodeMaterial({
    color: new THREE.Color().setHex(API.color),
    matcap: matcap,
    normalMap: normalmap
});
原理：Matcap（Material Capture）是一种基于图像的光照技术

工作方式：使用一张包含材质在各个视角下的光照信息的2D纹理

优势：

性能高效：不需要复杂的光照计算

效果逼真：可以模拟复杂的材质表面（金属、塑料、皮肤等）

易于制作：艺术家可以直接绘制材质效果

3. 节点材质系统（TSL）
可视化着色器编程：Three.js的TSL（Three.js Shading Language）系统

节点化工作流：通过连接节点来构建材质，而不是编写GLSL代码

灵活性：易于创建复杂的材质效果而无需深入了解底层着色器语言

4. 高动态范围渲染（HDR）
javascript
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = API.exposure;
ACES Filmic色调映射：电影行业标准的颜色编码系统

高动态范围支持：特别是通过EXR格式的Matcap贴图

曝光控制：可实时调整场景的整体亮度

5. 法线贴图技术
javascript
normalMap: normalmap
表面细节增强：在不增加模型多边形数量的情况下增加表面细节

工作原理：通过改变表面法线方向来影响光照计算

资源优化：用纹理代替几何体，大幅减少GPU负载

6. 文件拖放系统
javascript
document.addEventListener('drop', function(event) {
    event.preventDefault();
    loadFile(event.dataTransfer.files[0]);
});
HTML5拖放API：原生浏览器API，无需第三方库

多格式支持：智能识别文件类型并采用相应处理方式

即时反馈：拖放后立即更新材质，无需页面刷新

7. EXR格式处理
javascript
const loader = new EXRLoader();
loader.setDataType(THREE.HalfFloatType);
高动态范围图像：支持更大的亮度范围和颜色深度

半精度浮点数：使用16位浮点数存储，平衡精度和性能

专业级格式：电影和视觉特效行业标准格式

8. 轨道控制器
javascript
const controls = new OrbitControls(camera, renderer.domElement);
直观的3D导航：鼠标拖拽旋转、滚轮缩放（本示例中缩放已禁用）

焦点环绕：围绕模型中心点进行轨道运动

触摸支持：在移动设备上支持手势操作

9. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}
自适应窗口大小：自动调整渲染尺寸和相机参数

保持宽高比：防止3D场景变形

移动端友好：支持各种屏幕尺寸和设备

10. 内存管理
javascript
if (mesh.material.matcap) {
    mesh.material.matcap.dispose();
}
显存释放：使用dispose()方法释放不再使用的纹理

避免内存泄漏：动态更换材质时清理旧资源

性能优化：确保长时间运行不会导致内存累积

技术架构流程图
text
用户界面
    │
    ├── 3D场景渲染 (WebGPU)
    │   ├── 相机系统 (透视投影)
    │   ├── 材质系统 (Matcap + 法线贴图)
    │   └── 模型系统 (GLTF加载)
    │
    ├── 交互系统
    │   ├── 轨道控制器 (鼠标/触摸)
    │   └── GUI参数控制 (颜色/曝光)
    │
    └── 文件处理系统
        ├── 拖放检测 (HTML5 API)
        ├── 格式识别 (扩展名分析)
        ├── 图片解码 (Image对象/EXRLoader)
        └── 材质更新 (纹理替换)
应用场景
材质预览工具：艺术家和设计师可以快速预览不同Matcap材质的效果

教学演示：展示Matcap材质的工作原理和优势

实时配置：允许用户自定义3D模型的材质外观

跨平台展示：基于Web技术，可在任何现代浏览器中运行

性能基准测试：展示WebGPU与传统WebGL的性能差异 -->


<!DOCTYPE html>
<html lang="zh-CN">  <!-- 修改为中文语言 -->
	<head>
		<!-- 页面元数据配置 -->
		<!-- 修改标题为中文 -->
		<title>Three.js WebGPU - Matcap材质演示</title>
		
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)配置:
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放页面
			- 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样式表文件，用于页面布局和样式 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 
			信息展示区域 - 显示页面标题和使用说明
			id="info" 用于CSS样式和JavaScript选择器标识
		-->
		<div id="info">
			<!-- 
				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 href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 
					副标题：当前页面功能说明
					修改为中文
				-->
				<span> - Matcap材质演示</span>
			</div>

			<!-- 
				使用说明文字
				<small>标签：表示旁注或小号字体，通常用于版权声明或次要信息
				修改为中文说明
			-->
			<small>
				拖放JPG、PNG、WebP、AVIF或EXR格式的MatCap贴图文件到页面中，可以实时更换材质效果。
			</small>
			
			<!-- 可以添加更多中文说明（可选） -->
			<small style="display: block; margin-top: 20px;">
				使用鼠标拖拽旋转视角，右侧面板可调整颜色和曝光参数。
			</small>
		</div>

		<!-- 
			模块导入映射配置 (Import Maps)
			这是一个现代JavaScript功能，允许浏览器将模块标识符映射到实际URL
			这样我们可以使用简单的模块名而不是完整的URL路径
		-->
		<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核心库的WebGPU版本
			// * as THREE 表示将整个模块导入为THREE对象
			import * as THREE from 'three/webgpu';

			// 导入调试检查器（Inspector）工具
			// 这是一个可视化调试工具，可以查看场景结构和调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器 - 允许用户用鼠标控制相机旋转
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GLTF加载器 - 用于加载GLTF/GLB格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入EXR加载器 - 用于加载高动态范围（HDR）的EXR图像格式
			import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';

			// ========== 全局变量声明 ==========
			
			// mesh: 3D模型中的网格对象，包含几何体和材质
			let mesh;
			
			// renderer: 渲染器对象，负责将3D场景绘制到2D画布上
			let renderer;
			
			// scene: 场景对象，包含所有要渲染的3D对象（网格、灯光、相机等）
			let scene;
			
			// camera: 相机对象，定义观察3D场景的视角
			let camera;

			// API配置对象
			// 这个对象有两个作用：
			// 1. 存储应用程序的状态（颜色、曝光等）
			// 2. 作为GUI控件的数据源，当GUI控件的值改变时，会更新这个对象
			const API = {
				// 初始颜色值，0xffffff表示白色
				// 注意：Three.js中的颜色值通常使用十六进制表示
				color: 0xffffff,
				
				// 初始曝光值，1.0表示标准曝光
				// 曝光值影响场景的整体亮度，常用于HDR渲染
				exposure: 1.0
			};

			// ========== 初始化函数调用 ==========
			
			// 页面加载完成后立即调用init()函数
			// 这是整个应用程序的入口点
			init();

			/**
			 * 初始化函数 - 整个Three.js应用程序的启动点
			 * 这个函数负责创建和配置所有必要的Three.js组件：
			 * 1. 渲染器（Renderer）
			 * 2. 场景（Scene）
			 * 3. 相机（Camera）
			 * 4. 控制器（Controls）
			 * 5. 材质和纹理（Materials and Textures）
			 * 6. 3D模型（3D Models）
			 * 7. GUI界面（GUI Interface）
			 * 8. 事件监听器（Event Listeners）
			 */
			function init() {
				// ========== 1. 渲染器设置 ==========
				
				// 创建WebGPU渲染器实例
				// WebGPU是新一代图形API，相比WebGL有更好的性能和更现代的特性
				// { antialias: true } 启用抗锯齿，使边缘更加平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置像素比，window.devicePixelRatio获取设备的物理像素与CSS像素的比值
				// 在高DPI屏幕（如Retina显示屏）上，这个值通常是2.0
				// 设置正确的像素比可以避免在高分辨率屏幕上显示模糊
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口的完整大小
				// 这使得3D场景能够填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数会被重复调用（通常是每秒60次），实现流畅的动画效果
				// 这是requestAnimationFrame的Three.js封装
				renderer.setAnimationLoop( animate );
				
				// 创建并附加调试检查器
				// 调试检查器是一个可视化工具，允许开发者查看场景层次结构、调整参数等
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（通常是<canvas>元素）添加到网页的body中
				// 这样用户就可以在网页上看到渲染的3D场景了
				document.body.appendChild( renderer.domElement );

				// 色调映射（Tone Mapping）设置
				// 色调映射是将HDR（高动态范围）颜色转换到LDR（低动态范围）显示设备的过程
				
				// 使用ACES Filmic色调映射算法
				// ACES（Academy Color Encoding System）是电影行业标准的颜色编码系统
				// Filmic Tone Mapping模拟胶片相机的响应曲线，提供更自然的视觉效果
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置色调映射的曝光值
				// 曝光值控制场景的整体亮度
			 	renderer.toneMappingExposure = API.exposure;

				// ========== 2. 场景创建 ==========
				
				// 创建新的Three.js场景
				// 场景是所有3D对象的容器（网格、灯光、相机等）
				scene = new THREE.Scene();

				// ========== 3. 相机设置 ==========
				
				// 创建透视相机（Perspective Camera）
				// 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				camera = new THREE.PerspectiveCamera(
					40,                            // 视场角（Field of View，FOV）
					// 视场角决定相机能看到多宽的范围，单位是度
					// 40度是一个中等视野，既不会太窄也不会产生明显的鱼眼效果
					
					window.innerWidth / window.innerHeight,  // 宽高比（Aspect Ratio）
					// 宽高比应该是渲染区域的宽度除以高度
					// 这里使用窗口的宽高比，确保渲染不会变形
					
					1,                             // 近裁剪面（Near Clipping Plane）
					// 距离相机多近的物体开始被渲染
					// 物体距离相机小于这个值将不会被渲染
					
					100                            // 远裁剪面（Far Clipping Plane）
					// 距离相机多远的物体停止被渲染
					// 物体距离相机大于这个值将不会被渲染
				);
				
				// 设置相机在3D空间中的位置
				// 参数分别是X轴、Y轴、Z轴的坐标
				// 这里将相机放在Z轴正方向13个单位的位置，面向原点(0,0,0)
				camera.position.set( 0, 0, 13 );

				// ========== 4. 轨道控制器 ==========
				
				// 创建轨道控制器
				// 轨道控制器允许用户通过鼠标拖拽来旋转相机，模拟在物体周围"轨道"运动的效果
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 禁用缩放功能
				// 将enableZoom设置为false，用户不能使用鼠标滚轮或手势进行缩放
				controls.enableZoom = false;
				
				// 禁用平移功能
				// 将enablePan设置为false，用户不能平移（拖拽移动）场景
				controls.enablePan = false;

				// ========== 5. 材质贴图加载 ==========
				
				// 创建EXR加载器实例
				// EXR是一种高动态范围图像格式，支持更大的亮度范围和更丰富的颜色信息
				const loaderEXR = new EXRLoader();
				
				// 加载EXR格式的Matcap贴图
				// Matcap（Material Capture）贴图是一种特殊的纹理，用于模拟复杂材质效果
				// 它包含了材质在不同角度下的光照信息
				const matcap = loaderEXR.load( 'textures/matcaps/040full.exr' );

				// 创建标准的纹理加载器
				// TextureLoader用于加载常规的2D纹理图像（JPG、PNG等）
				const loader = new THREE.TextureLoader();

				// 加载法线贴图（Normal Map）
				// 法线贴图用于在不增加几何体复杂度的情况下，模拟表面细节和凹凸感
				// 它通过改变表面法线方向来影响光照计算，从而产生凹凸不平的视觉效果
				const normalmap = loader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );

				// ========== 6. 3D模型加载 ==========
				
				// 创建GLTF加载器并加载3D模型
				// GLTF（GL Transmission Format）是3D模型的开放标准格式
				new GLTFLoader().load( 
					// GLTF模型文件路径
					'models/gltf/LeePerrySmith/LeePerrySmith.glb',
					
					// 加载完成后的回调函数
					// 当模型文件完全加载并解析后，这个函数会被调用
					function ( gltf ) {
						// gltf.scene包含加载的完整3D场景
						// children[0]获取场景中的第一个子对象（通常是主要的网格对象）
						mesh = gltf.scene.children[ 0 ];
						
						// 调整模型在Y轴上的位置
						// 向下移动0.25个单位，使模型在视野中居中
						mesh.position.y = - 0.25;

						// 创建Matcap节点材质
						// MeshMatcapNodeMaterial是Three.js的节点材质系统的一部分
						// 节点材质使用可视化编程的方式构建着色器
						mesh.material = new THREE.MeshMatcapNodeMaterial( {
							// 设置材质的基础颜色
							// new THREE.Color().setHex(API.color) 从十六进制颜色值创建颜色对象
							color: new THREE.Color().setHex( API.color ),
							
							// 应用Matcap贴图
							// Matcap贴图决定了材质的视觉外观
							matcap: matcap,
							
							// 应用法线贴图
							// 法线贴图增加表面细节，使模型看起来更有立体感
							normalMap: normalmap
						} );

						// 将网格对象添加到场景中
						// 只有添加到场景中的对象才会被渲染器绘制
						scene.add( mesh );
					}
				);

				// ========== 7. GUI控制面板 ==========
				
				// 从调试检查器创建参数面板
				// 'Parameters'是面板的标题
				const gui = renderer.inspector.createParameters( '参数设置' );

				// 添加颜色选择器控件
				gui.addColor( API, 'color' )        // 绑定到API.color属性
					.listen()                       // 启用监听，当API.color改变时更新控件显示
					.onChange( function () {        // 值改变时的回调函数
						// 当用户通过GUI改变颜色时，更新材质的颜色
						mesh.material.color.set( API.color );
					} );

				// 添加曝光滑块控件
				gui.add( API, 'exposure', 0, 2 )    // 绑定到API.exposure属性，范围0到2
					.listen()                       // 启用监听
					.onChange( function () {        // 值改变时的回调函数
						// 当用户改变曝光值时，更新渲染器的曝光设置
						renderer.toneMappingExposure = API.exposure;
					} );

				// ========== 8. 拖拽功能初始化 ==========
				
				// 初始化拖放功能，允许用户拖拽图片文件到页面中更换Matcap贴图
				initDragAndDrop();

				// ========== 9. 窗口大小变化监听 ==========
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，onWindowResize函数会被调用
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，需要调整渲染器和相机的设置
			 * 以确保3D场景正确渲染且不变形
			 */
			function onWindowResize() {
				// 更新渲染器尺寸为新的窗口尺寸
				// 这确保Canvas元素始终填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 更新相机的宽高比
				// 宽高比必须与渲染区域的宽高比一致，否则渲染的图像会变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数（如宽高比）改变后，必须调用此方法来重新计算投影矩阵
				camera.updateProjectionMatrix();
			}

			/**
			 * 动画循环函数
			 * 这个函数被setAnimationLoop重复调用（通常是每秒60次）
			 * 它是Three.js应用程序的心跳，负责持续渲染场景
			 * 即使场景没有动画，也需要这个循环来响应用户交互和窗口变化
			 */
			function animate() {
				// 渲染场景
				// 这是最重要的函数调用，它将3D场景绘制到2D的Canvas元素上
				// 参数：要渲染的场景和使用的相机
				renderer.render( scene, camera );
			}

			// =================================================================
			// 拖拽功能相关函数
			// 这些函数实现了一个完整的拖放系统，允许用户通过拖拽图片文件来更换Matcap贴图
			// =================================================================

			/**
			 * 更新Matcap贴图的核心函数
			 * 这个函数负责用新的纹理替换当前的Matcap贴图
			 * 
			 * @param {THREE.Texture} texture - 新的贴图对象
			 * 这个参数可以是从文件加载的各种格式的纹理（JPG、PNG、EXR等）
			 */
			function updateMatcap( texture ) {
				// 检查当前材质是否已有Matcap贴图
				// 如果有，需要先释放（dispose）它，避免内存泄漏
				if ( mesh.material.matcap ) {
					// dispose()方法释放纹理占用的GPU内存
					// 这是一个重要的性能优化，避免无用的纹理占用显存
					mesh.material.matcap.dispose();
				}

				// 将新的纹理赋值给材质的matcap属性
				mesh.material.matcap = texture;
				
				// 标记纹理需要更新
				// 当纹理的源数据改变后，需要设置needsUpdate为true
				// 这样Three.js会在下一次渲染时上传新的纹理数据到GPU
				texture.needsUpdate = true;

				// 标记材质需要更新
				// 因为新贴图的颜色空间可能与旧贴图不同
				// 设置needsUpdate为true确保材质的所有属性和uniforms被重新编译
				mesh.material.needsUpdate = true;
			}

			/**
			 * 处理标准图片格式文件（JPG、PNG、WebP、AVIF）
			 * 这些格式可以通过浏览器的Image对象直接加载
			 * 
			 * @param {Event} event - FileReader的load事件对象
			 * event.target.result包含图片的DataURL（base64编码的图片数据）
			 */
			function handleJPG( event ) {
				// 定义图片加载完成的回调函数
				function imgCallback( event ) {
					// 从Image对象创建Three.js纹理
					// event.target是已加载完成的Image对象
					const texture = new THREE.Texture( event.target );
					
					// 设置纹理的颜色空间为sRGB
					// sRGB是标准的颜色空间，适用于大多数8位图片格式
					texture.colorSpace = THREE.SRGBColorSpace;
					
					// 调用updateMatcap函数应用新纹理
					updateMatcap( texture );
				}

				// 创建浏览器Image对象
				const img = new Image();
				
				// 设置图片加载完成时的回调函数
				img.onload = imgCallback;
				
				// 设置图片源为DataURL
				// event.target.result是FileReader读取文件后生成的DataURL
				img.src = event.target.result;
			}

			/**
			 * 处理EXR格式文件
			 * EXR是高动态范围格式，需要特殊处理
			 * 
			 * @param {Event} event - FileReader的load事件对象
			 * event.target.result包含EXR文件的ArrayBuffer（二进制数据）
			 */
			function handleEXR( event ) {
				// 获取EXR文件的二进制数据
				const contents = event.target.result;

				// 创建EXRLoader实例
				const loader = new EXRLoader();
				
				// 设置数据类型为半精度浮点数（HalfFloatType）
				// 半精度浮点数占用16位内存，比单精度浮点数（32位）更节省内存
				// 同时仍能表示HDR图像的大范围亮度值
				loader.setDataType( THREE.HalfFloatType );

				// 解析EXR文件数据
				// parse方法将二进制EXR数据转换为Three.js能理解的纹理数据格式
				const texData = loader.parse( contents );

				// 创建数据纹理（DataTexture）
				// DataTexture用于直接从JavaScript数组创建纹理
				// 与从Image创建的Texture不同，DataTexture可以包含浮点数数据
				const texture = new THREE.DataTexture();

				// 设置纹理尺寸
				texture.image.width = texData.width;      // 纹理宽度（像素）
				texture.image.height = texData.height;    // 纹理高度（像素）
				texture.image.data = texData.data;        // 纹理像素数据（Float32Array或Uint16Array）

				// 配置纹理的各种参数
				texture.format = texData.format;          // 纹理格式，通常是RGBAFormat
				texture.type = texData.type;              // 数据类型，这里是THREE.HalfFloatType
				texture.colorSpace = THREE.LinearSRGBColorSpace;  // 线性颜色空间，适合HDR图像
				texture.minFilter = THREE.LinearFilter;   // 纹理缩小时的过滤方式
				texture.magFilter = THREE.LinearFilter;   // 纹理放大时的过滤方式
				texture.generateMipmaps = false;          // 不生成Mipmaps（多层纹理）
				texture.flipY = false;                    // 不翻转Y轴（EXR文件的Y轴方向与Three.js默认不同）

				// 调用updateMatcap函数应用新纹理
				updateMatcap( texture );
			}

			/**
			 * 加载用户拖放的文件
			 * 根据文件扩展名决定使用哪种处理方式
			 * 
			 * @param {File} file - 用户拖拽的文件对象
			 * File对象包含文件名、大小、类型等信息
			 */
			function loadFile( file ) {
				// 获取文件名
				const filename = file.name;
				
				// 提取并转换为小写的文件扩展名
				// split('.')将文件名按点号分割成数组
				// pop()获取最后一个元素（扩展名）
				// toLowerCase()转换为小写，确保大小写不敏感
				const extension = filename.split( '.' ).pop().toLowerCase();

				// 根据文件扩展名选择不同的处理方式
				if ( extension === 'exr' ) {
					// 处理EXR文件（二进制格式）
					
					// 创建FileReader对象，用于读取文件内容
					const reader = new FileReader();
					
					// 设置文件读取完成时的回调函数
					reader.addEventListener( 'load', function ( event ) {
						// 调用handleEXR函数处理读取的数据
						handleEXR( event );
					} );
					
					// 以ArrayBuffer格式读取文件
					// ArrayBuffer是原始的二进制数据缓冲区
					reader.readAsArrayBuffer( file );

				} else {
					// 处理JPG、PNG等常规图片格式
					
					const reader = new FileReader();
					reader.addEventListener( 'load', function ( event ) {
						// 调用handleJPG函数处理读取的数据
						handleJPG( event );
					} );
					
					// 以DataURL格式读取文件
					// DataURL是base64编码的字符串，可以直接作为图片源
					reader.readAsDataURL( file );
				}
			}

			/**
			 * 初始化拖拽功能
			 * 为整个文档添加拖放事件监听器
			 * 用户可以将图片文件拖拽到页面的任何地方
			 */
			function initDragAndDrop() {
				// 监听dragover事件（当拖拽的元素经过可放置区域时触发）
				document.addEventListener( 'dragover', function ( event ) {
					// 阻止浏览器默认行为（通常是在新标签页打开文件）
					event.preventDefault();
					
					// 设置拖拽效果为"复制"
					// 这会在鼠标指针旁边显示一个"+"号，表示是复制操作
					event.dataTransfer.dropEffect = 'copy';
				} );

				// 监听drop事件（当用户释放拖拽的元素时触发）
				document.addEventListener( 'drop', function ( event ) {
					// 阻止浏览器默认行为
					event.preventDefault();

					// 获取拖拽的文件列表
					// event.dataTransfer.files是一个FileList对象
					// files[0]获取第一个文件（用户一次只能拖拽一个文件）
					loadFile( event.dataTransfer.files[ 0 ] );
				} );
			}
		</script>
	</body>
</html>