<!-- 代码功能与技术点详解
一、主要功能概述
这是一个基于Three.js和WebGPU的3D模型展示网页，专门用于演示如何使用压缩技术高效加载和渲染glTF格式的3D模型。

核心功能：
3D场景渲染 - 在浏览器中创建交互式3D环境

glTF模型加载 - 加载标准3D模型文件

压缩纹理支持 - 使用KTX2/Basis技术压缩纹理

压缩几何体支持 - 使用Meshopt技术压缩网格数据

用户交互 - 支持鼠标/触摸控制查看3D模型

响应式布局 - 自动适应不同屏幕尺寸

二、技术架构与主要技术点
1. 渲染引擎：WebGPU
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
WebGPU是下一代Web图形API，替代传统的WebGL

优势：

更接近现代GPU架构（Metal、Vulkan、DirectX 12）

更低的CPU开销，更高的并行处理能力

更好的内存管理和多线程支持

支持计算着色器等高级功能

异步初始化：需要等待renderer.init()完成

2. 3D模型格式：glTF（GL Transmission Format）
Khronos Group制定的标准：类似于3D领域的JPEG

优势：

专为Web传输优化，文件结构紧凑

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

包含场景图、动画、相机、灯光等信息

可扩展性强，支持各种扩展

文件类型：.gltf（JSON + 外部资源）或.glb（二进制单文件）

3. 纹理压缩：KTX2 + Basis Universal
javascript
const ktx2Loader = new KTX2Loader()
    .setTranscoderPath('jsm/libs/basis/')
    .detectSupport(renderer);
KTX2：Khronos纹理格式第2版，支持GPU原生纹理压缩

Basis Universal：超级压缩纹理技术

工作原理：

将纹理压缩为通用中间格式

运行时根据GPU能力转码为适合的压缩格式（如ASTC、ETC2、BC7等）

大幅减少纹理内存占用（通常减少4-10倍）

支持检测：detectSupport()自动检测GPU支持的压缩格式

4. 几何体压缩：Meshopt（Mesh Optimizer）
javascript
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
loader.setMeshoptDecoder(MeshoptDecoder);
Meshopt算法：专门优化3D网格数据的压缩算法

压缩效果：

顶点数据：减少30-50%

索引数据：减少60-80%

不影响渲染性能，运行时快速解压

无损失压缩：解压后数据与原始数据完全相同

5. 模块化加载体系
javascript
// Import Map配置
"imports": {
    "three": "../build/three.webgpu.js",
    "three/addons/": "./jsm/"
}
ES6模块系统：现代JavaScript模块化标准

Import Maps：浏览器原生模块路径映射，无需打包工具

按需加载：只导入需要的功能模块

6. 交互控制系统
javascript
const controls = new OrbitControls(camera, renderer.domElement);
OrbitControls：轨道控制器

交互方式：

鼠标左键拖拽：旋转视图

鼠标右键拖拽：平移视图

鼠标滚轮：缩放视图

触摸屏：支持多点触控

限制设置：minDistance和maxDistance控制缩放范围

7. 渲染管线配置
javascript
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 1;
色调映射（Tone Mapping）：将HDR颜色转换到显示器的LDR范围

Reinhard算法：经典色调映射算法，保留细节

抗锯齿：antialias: true开启边缘平滑

物理正确光照：使用power（流明）单位设置光照强度

8. 响应式与性能优化
javascript
// 设备像素比适配
renderer.setPixelRatio(window.devicePixelRatio);

// 窗口大小变化响应
window.addEventListener('resize', onWindowResize);
Retina/高DPI屏支持：自动适配设备像素比

自适应布局：窗口大小变化时自动调整

动画循环：setAnimationLoop替代requestAnimationFrame

三、工作流程
1. 初始化阶段
text
创建相机 → 创建场景 → 创建光源 → 初始化WebGPU渲染器 → 设置控制器
2. 资源加载阶段
text
配置KTX2加载器 → 配置Meshopt解码器 → 创建GLTF加载器 → 加载模型文件
3. 渲染阶段
text
动画循环 → 更新控制器 → 渲染场景 → 显示结果
四、技术优势
性能方面
WebGPU的高效渲染：更低的CPU开销，更高的GPU利用率

纹理压缩：大幅减少内存占用和带宽需求

几何体压缩：减少下载时间和内存使用

异步加载：不阻塞主线程，保持页面响应

兼容性方面
渐进增强：虽然使用WebGPU，但Three.js提供WebGL回退

格式自适应：自动选择GPU支持的最佳纹理压缩格式

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

开发体验
模块化架构：清晰的组织结构，易于维护

现代JavaScript：使用ES6+特性，代码更简洁

丰富生态系统：Three.js庞大的插件和工具链

五、典型应用场景
产品3D展示：电子商务网站的商品展示

建筑设计可视化：建筑模型在线浏览

教育应用：3D模型教学展示

游戏资产预览：游戏开发中的模型查看器

数字孪生：物理实体的3D数字复制

六、文件结构要求
text
项目目录/
├── index.html                    # 主HTML文件
├── example.css                   # 样式文件
├── build/                        # Three.js构建文件
│   └── three.webgpu.js          # WebGPU版本的Three.js
├── jsm/                          # Three.js插件目录
│   ├── loaders/                 # 加载器
│   ├── controls/                # 控制器
│   └── libs/                    # 第三方库
│       └── basis/               # Basis转码器文件
└── models/                       # 3D模型资源
    └── gltf/
        └── coffeemat.glb        # 示例glTF模型 -->


<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：包含技术栈和功能说明
			- three.js：使用的3D图形库
			- webgpu：使用的图形渲染API（下一代Web图形API，替代WebGL）
			- glTF：3D模型格式标准（GL传输格式）
			- compressed：表示使用压缩技术
		-->
		<title>基于three.js与WebGPU的glTF压缩模型展示</title>
		<!-- 
			字符编码设置：
			- utf-8：国际通用编码，支持中文字符
			- 确保中文内容正常显示
		-->
		<meta charset="utf-8">
		<!-- 
			视口（viewport）设置，用于响应式网页设计：
			- width=device-width：视口宽度等于设备宽度
			- user-scalable=no：禁止用户手动缩放（在3D应用中保持固定比例）
			- minimum-scale=1.0：最小缩放比例为1倍（禁止缩小）
			- maximum-scale=1.0：最大缩放比例为1倍（禁止放大）
			- 这些设置确保了3D场景在不同设备上保持一致的视觉体验
		-->
		<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"：样式表文件路径
			- 用于控制页面布局、颜色、字体等视觉样式
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			信息展示区域（id="info"）：
			- 用于显示应用标题、描述和logo链接
			- 通常固定在页面某个位置（如顶部或角落）
			- CSS中可能设置其位置为绝对定位
		-->
		<div id="info">
			<!-- 
				three.js官方logo链接：
				- href：指向three.js官网，方便用户访问了解更多
				- target="_blank"：在新标签页打开链接
				- rel="noopener"：安全设置，防止新页面通过window.opener访问原页面
				- class="logo-link"：CSS类名，可能设置背景图片为three.js logo
				- 空内容：logo通过CSS背景图片显示
			-->
			<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元素包裹，便于单独样式控制
					- 描述当前示例的核心功能：glTF模型加载与压缩扩展
					- 通常以较小字体或不同颜色显示
				-->
				<span>glTF模型加载与压缩扩展支持</span>
			</div>

			<!-- 
				详细描述文本（使用small标签）：
				- small标签表示旁注、细则、免责声明等内容
				- 在此用于提供更详细的技术说明
				- 内容说明本示例加载的glTF模型使用了KTX2/Basis纹理压缩和Meshopt几何体压缩
			-->
			<small>
				本示例演示了使用KTX2/Basis纹理压缩和Meshopt几何体压缩扩展加载glTF模型。
			</small>
		</div>

		<!-- 
			importmap（导入映射）：
			- 浏览器原生支持的模块路径映射系统
			- 允许为JavaScript模块定义别名
			- 使import语句更简洁，避免冗长的相对路径
			- type="importmap"：指定此script标签内容为导入映射
		-->
		<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模块
			- 模块化JavaScript，支持import/export语法
			- 拥有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// 导入Three.js核心库的WebGPU版本
			// 使用import * as THREE语法导入所有导出内容到THREE命名空间
			import * as THREE from 'three/webgpu';

			// 导入GLTF模型加载器
			// 用于加载glTF/GLB格式的3D模型文件
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入KTX2加载器
			// KTX2是Khronos纹理格式版本2，支持GPU纹理压缩
			// Basis Universal是其中的超级压缩纹理技术
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
			
			// 导入Meshopt解码器
			// Meshopt是mesh optimizer的缩写，用于3D网格数据压缩
			// .module.js表示这是一个ES模块版本
			import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
			
			// 导入轨道控制器
			// 提供鼠标/触摸交互，实现旋转、缩放、平移3D场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 全局变量声明（但作用域仍限于本模块）
			// 相机：定义观察3D场景的视角
			let camera;
			// 场景：包含所有3D对象（模型、灯光、相机等）的容器
			let scene;
			// 渲染器：负责将3D场景渲染到2D画布上
			let renderer;

			// 调用初始化函数，启动应用
			init();

			// 异步初始化函数
			// async关键字表示函数内部可以使用await进行异步操作
			async function init() {

				// ---------- 相机设置 ----------
				// 创建透视相机（Perspective Camera）：
				// - 模拟人眼视角，物体近大远小
				// - 参数1（50）：视野角度（Field of View），单位度，越大看到的范围越广
				// - 参数2（window.innerWidth / window.innerHeight）：宽高比，保持与窗口一致
				// - 参数3（1）：近裁剪面，比这个距离近的物体不显示
				// - 参数4（20）：远裁剪面，比这个距离远的物体不显示
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20 );
				// 设置相机初始位置：x=2, y=2, z=2（三维坐标系中的点）
				camera.position.set( 2, 2, 2 );

				// ---------- 场景设置 ----------
				// 创建3D场景对象，所有可视对象都将添加到此场景中
				scene = new THREE.Scene();
				// 设置场景背景颜色为浅灰色（十六进制颜色码0xEEEEEE）
				scene.background = new THREE.Color( 0xEEEEEE );

				// ---------- 灯光设置 ----------
				// 创建点光源（Point Light）：
				// - 从单个点向所有方向发射光线
				// - 参数0xffffff表示白色光（十六进制颜色）
				const light = new THREE.PointLight( 0xffffff );
				// 设置光源功率（亮度）为1300流明
				// 这是物理正确的光照单位，与three.js的物理渲染管线配合使用
				light.power = 1300;
				// 将光源添加为相机的子对象
				// 这样光源会跟随相机移动，类似手电筒效果
				camera.add( light );
				// 将相机（包含其子对象光源）添加到场景中
				scene.add( camera );

				// ---------- 渲染器设置 ----------
				// 创建WebGPU渲染器实例：
				// - WebGPU是下一代Web图形API，替代WebGL
				// - 提供更好的性能和更现代的GPU功能访问
				// - { antialias: true }：启用抗锯齿，平滑边缘锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比：
				// - window.devicePixelRatio获取设备物理像素与CSS像素的比率
				// - 在高DPI屏幕（如Retina显示屏）上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器输出画布的大小为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数：
				// - 替代传统的requestAnimationFrame
				// - animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 设置色调映射（Tone Mapping）：
				// - 将HDR（高动态范围）颜色值转换为显示器的LDR（低动态范围）
				// - THREE.ReinhardToneMapping是常用的色调映射算法
				renderer.toneMapping = THREE.ReinhardToneMapping;
				// 设置色调映射曝光值：
				// - 控制整体亮度，1.0表示标准曝光
				renderer.toneMappingExposure = 1;
				// 将渲染器的DOM元素（canvas画布）添加到网页body中
				// 这样3D内容才能显示在页面上
				document.body.appendChild( renderer.domElement );

				// ---------- 渲染器初始化 ----------
				// 等待WebGPU渲染器初始化完成
				// WebGPU需要异步初始化，包括获取GPU设备、创建上下文等
				await renderer.init();

				// ---------- 控制器设置 ----------
				// 创建轨道控制器实例：
				// - 参数1：控制的相机对象
				// - 参数2：事件监听的DOM元素（通常是渲染器的画布）
				const controls = new OrbitControls( camera, renderer.domElement );
				// 设置相机与目标点的最小距离限制
				// 防止相机离目标太近（这里设为3个单位）
				controls.minDistance = 3;
				// 设置相机与目标点的最大距离限制
				// 防止相机离目标太远（这里设为6个单位）
				controls.maxDistance = 6;
				// 更新控制器内部状态
				// 必须在更改控制器参数后调用，应用新的设置
				controls.update();

				// ---------- 加载器配置 ----------
				// 创建并配置KTX2加载器
				// await等待加载器完全准备好（包括转码器加载）
				const ktx2Loader = await new KTX2Loader()
					// 设置Basis Universal转码器路径
					// Basis是将纹理压缩为通用格式的技术，需要特定的转码器文件
					.setTranscoderPath( 'jsm/libs/basis/' )
					// 检测渲染器支持的纹理格式
					// 不同GPU支持不同的压缩纹理格式，需要自动选择最佳格式
					.detectSupport( renderer );

				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				// 为GLTF加载器设置KTX2加载器
				// 这样GLTF加载器遇到KTX2纹理时会使用配置好的KTX2Loader处理
				loader.setKTX2Loader( ktx2Loader );
				// 为GLTF加载器设置Meshopt解码器
				// 这样GLTF加载器遇到Meshopt压缩的几何体时能正确解压
				loader.setMeshoptDecoder( MeshoptDecoder );
				
				// 加载glTF模型文件
				// 参数1：模型文件路径（coffeemat.glb - 咖啡杯垫模型）
				// 参数2：加载完成后的回调函数
				loader.load( 'models/gltf/coffeemat.glb', function ( gltf ) {
					// 从加载结果中获取场景对象
					// gltf.scene包含模型的所有网格、材质、变换等
					const gltfScene = gltf.scene;
					// 调整模型位置：沿Y轴向下移动0.8个单位
					// 通常用于将模型放在"地面"上
					gltfScene.position.y = - .8;
					// 调整模型缩放：设置为原始大小的1%
					// setScalar方法将所有轴设置为相同的缩放值
					gltfScene.scale.setScalar( .01 );

					// 将加载的模型场景添加到主场景中
					// 此时模型才会在3D场景中显示
					scene.add( gltfScene );

				} );

				// ---------- 事件监听器 ----------
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时触发
				window.addEventListener( 'resize', onWindowResize );

			}

			// 窗口大小变化处理函数
			function onWindowResize() {
				// 更新相机宽高比为新的窗口宽高比
				// 确保3D场景不会拉伸变形
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵
				// 更改相机参数后必须调用此方法，使新设置生效
				camera.updateProjectionMatrix();

				// 更新渲染器大小为新的窗口大小
				// 使3D渲染画布填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// 动画循环函数
			// 每一帧都会被渲染器调用（通常每秒60次）
			function animate() {
				// 渲染3D场景：
				// - 参数1：要渲染的场景对象
				// - 参数2：用于渲染的相机视角
				// 这一行代码执行以下操作：
				// 1. 清空画布
				// 2. 计算每个物体的位置、旋转等变换
				// 3. 执行着色器程序
				// 4. 将3D场景绘制到2D画布上
				renderer.render( scene, camera );
			}

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