<!-- 代码功能描述和技术点分析
一、整体功能概述
这是一个基于Three.js WebGPU渲染器的交互式3D模型展示应用，专门用于演示各向异性材质在glTF模型上的渲染效果。用户可以在浏览器中360度查看一个具有各向异性反射特性的谷仓灯模型，模型表面会根据视角变化显示出类似拉丝金属的光泽效果。

二、核心功能模块
1. 3D场景渲染系统
实时渲染：使用WebGPU技术进行硬件加速的3D图形渲染

响应式设计：自动适配不同尺寸的浏览器窗口

抗锯齿处理：提供平滑的边缘渲染效果

色调映射：使用电影级ACES Filmic算法实现高质量色彩还原

2. 模型展示功能
glTF格式支持：加载标准的3D模型格式

各向异性材质渲染：展示KHR_materials_anisotropy扩展的材质效果

环境反射：模型表面实时反射HDR环境贴图

3. 用户交互系统
轨道控制器：支持鼠标拖拽旋转、滚轮缩放、平移操作

相机控制：预设最佳观察角度，同时允许用户自由调整

触摸支持：适配移动设备触屏操作

4. 环境与光照系统
HDR环境贴图：提供高质量的环境光照和反射背景

背景模糊效果：创造视觉层次感和景深效果

物理准确的光照：基于真实HDR图像的环境照明

三、主要技术点详解
1. WebGPU渲染技术
javascript
// 核心特性
- 下一代Web图形API，替代WebGL
- 更好的多线程支持，降低CPU开销
- 更直接的GPU控制，提升渲染性能
- 自动内存管理，简化开发复杂度
2. glTF + KHR_materials_anisotropy扩展
javascript
// 技术特点
- glTF: 开放的3D模型传输标准，支持PBR材质
- KHR_materials_anisotropy: 各向异性材质扩展
  - anisotropyStrength: 控制各向异性强度
  - anisotropyRotation: 控制各向异性方向
  - anisotropyTexture: 各向异性纹理贴图
3. HDR渲染管线
javascript
// 渲染流程
1. HDR环境贴图加载 → 2. 色调映射处理 → 3. 屏幕空间渲染
// 关键技术
- ACES Filmic色调映射：电影工业标准
- 曝光控制：1.35的曝光值优化视觉效果
- 等距柱状投影：360度环境映射
4. 异步资源加载
javascript
// 加载策略
- Promise.all并行加载：同时加载模型和纹理
- 路径管理：通过setPath统一资源路径
- 错误处理：内置的异步错误处理机制
5. 响应式3D渲染
javascript
// 自适应机制
window.addEventListener('resize', onWindowResize);
// 关键更新
- 相机宽高比更新
- 投影矩阵重新计算
- 渲染器尺寸调整
6. 交互控制系统
javascript
// OrbitControls功能
- 左键拖拽：旋转场景
- 右键拖拽：平移场景  
- 滚轮滚动：缩放场景
- 触摸手势：移动设备支持
四、技术架构特点
1. 模块化设计
text
├── 核心渲染模块 (WebGPURenderer)
├── 资源加载模块 (GLTFLoader + UltraHDRLoader)
├── 用户交互模块 (OrbitControls)
├── 场景管理模块 (Scene + Camera)
└── 动画循环模块 (setAnimationLoop)
2. 性能优化策略
按需渲染：仅在必要时更新渲染

资源复用：同一HDR贴图用于背景和环境

智能加载：并行加载减少等待时间

GPU优化：WebGPU的现代渲染管线

3. 跨平台兼容性
浏览器支持：支持现代浏览器

设备适配：桌面和移动端优化

分辨率适配：自动适配不同DPI屏幕

五、可视化渲染流程
text
开始
  ↓
初始化WebGPU渲染器
  ↓
创建3D场景和相机
  ↓
设置用户交互控制器
  ↓
[并行加载]
  ├── 加载HDR环境贴图
  └── 加载glTF模型
  ↓
配置场景环境：
  - 设置HDR背景
  - 应用环境贴图
  - 添加背景模糊
  ↓
将模型添加到场景
  ↓
进入渲染循环：
  1. 处理用户输入
  2. 更新控制器状态
  3. 渲染场景到画布
  ↓
持续运行直到页面关闭
六、应用场景和价值
1. 教育演示价值
实时展示各向异性材质效果

帮助理解PBR材质系统

演示WebGPU的渲染能力

2. 技术验证平台
验证glTF扩展兼容性

测试WebGPU性能

展示现代Web 3D技术栈

3. 产品展示应用
可用于电商产品3D展示

工业设计可视化

建筑渲染预览

4. 开发学习资源
Three.js最佳实践示例

现代JavaScript模块化开发

异步资源管理范例

七、技术亮点总结
前沿技术栈：结合WebGPU、glTF、HDR等最新Web 3D技术

视觉效果优秀：电影级色调映射和高质量材质渲染

用户体验良好：流畅的交互和自适应的界面

代码结构清晰：模块化设计，易于理解和扩展

性能优化到位：并行加载、响应式设计、GPU加速

标准兼容性好：遵循glTF和WebGPU开放标准 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的标题
			本示例演示Three.js WebGPU渲染器加载带各向异性材质的glTF模型
		-->
		<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": 指定链接文件为CSS样式表
			- rel="stylesheet": 定义当前文档与链接文档的关系为样式表
			- href="example.css": 样式表文件路径，用于页面布局和样式
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 
			信息展示区域：
			- id="info": 用于CSS样式选择和JavaScript操作
			- class="invert": 反转颜色类，通常用于深色背景上的浅色文字
			这个div包含Three.js链接、示例标题和资源信息
		-->
		<div id="info" class="invert">
			<!-- 
				Three.js Logo链接：
				- href: 指向Three.js官方网站
				- target="_blank": 在新标签页打开链接
				- rel="noopener": 安全属性，防止新页面访问原页面的window对象
				- class="logo-link": CSS类，通常用于设置Logo背景图片
				这是一个空链接，通常通过CSS添加Three.js的Logo图片
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器：用于标题的整体布局 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：点击跳转到Three.js官网
					- 使用中文文本"Three.js 3D图形库"
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js 3D图形库</a>
				<!-- 
					副标题：使用span标签包裹，表示内联文本
					- 显示当前示例的具体内容："glTF模型 + 各向异性材质渲染"
				-->
				<span style="font-size: 12px;">glTF模型 + 各向异性材质渲染</span>
			</div>

			<!-- 
				资源信息和版权说明区域：
				- 使用<small>标签表示次要信息
				- 包含使用的技术规范和资源来源
			-->
			<small>
				<!-- 各向异性材质扩展规范链接 -->
				使用技术规范：
				<a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_anisotropy" target="_blank" rel="noopener">
					KHR_materials_anisotropy各向异性材质扩展
				</a>
				<br>
				<!-- 3D模型来源信息 -->
				演示模型：
				<a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/AnisotropyBarnLamp" target="_blank" rel="noopener">
					谷仓灯各向异性示例模型
				</a>
				来自glTF官方示例库
				<br>
				<!-- HDR环境贴图来源信息 -->
				环境贴图：
				<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">
					皇家滨海大道HDR贴图
				</a>
				来自HDRI Haven高清贴图库
			</small>
		</div>

		<!-- 
			导入映射(Import Map)配置：
			- 现代JavaScript模块系统特性，允许重写模块导入路径
			- type="importmap": 定义模块导入映射关系
			- 作用：将模块名映射到实际的文件路径，简化import语句
		-->
		<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渲染器核心库
			// import * as THREE: 导入所有导出内容并命名为THREE对象
			// from 'three/webgpu': 从importmap配置的路径加载WebGPU版本
			import * as THREE from 'three/webgpu';

			// 导入Three.js的插件/附加组件
			// 1. OrbitControls: 轨道控制器，提供鼠标/触摸控制相机旋转、平移、缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 2. GLTFLoader: glTF格式3D模型加载器，glTF是Khronos Group的开放3D传输格式
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 3. UltraHDRLoader: HDR（高动态范围）图像加载器，支持UltraHDR格式
			// HDR贴图用于提供高质量的环境光照和反射
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';

			// 全局变量声明（将在init函数中初始化）
			let renderer,   // WebGPU渲染器实例，负责将3D场景渲染到Canvas
				scene,     // 3D场景对象，包含所有要渲染的物体、灯光、相机等
				camera,    // 相机对象，定义观察3D场景的视角
				controls;  // 轨道控制器实例，用于用户交互控制相机

			// 调用初始化函数，启动整个应用程序
			// 注意：由于init是异步函数，会立即执行但可能不会立即完成
			init();

			// 异步初始化函数 - 应用程序的入口点
			// async关键字表示这是一个异步函数，可以在内部使用await等待异步操作
			async function init() {
				// ============ 第1步：创建并配置WebGPU渲染器 ============
				// 创建WebGPURenderer实例，传入配置对象
				// { antialias: true } 开启抗锯齿，平滑几何体边缘
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				// 设置设备像素比：匹配屏幕的物理像素和CSS像素比例
				// window.devicePixelRatio: 获取设备的物理像素与CSS像素的比值
				// 设置后可以在高DPI屏幕（如Retina显示屏）上获得更清晰的图像
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				// window.innerWidth/innerHeight: 获取浏览器视口的宽度和高度（不含滚动条）
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// animate函数将被每一帧调用（通常是60次/秒）
				// 这是Three.js的渲染循环机制，替代传统的requestAnimationFrame
				renderer.setAnimationLoop(animate);
				
				// 设置色调映射(Tone Mapping)
				// 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
				// THREE.ACESFilmicToneMapping: 电影级色调映射算法，提供电影感的视觉效果
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置色调映射曝光值
				// 1.35: 曝光强度，值越大场景越亮
				renderer.toneMappingExposure = 1.35;
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement: 渲染器创建的<canvas>元素
				document.body.appendChild(renderer.domElement);
				// ============ 第1步结束 ============

				// ============ 第2步：创建3D场景 ============
				// 创建场景对象，它是所有3D对象（网格、灯光、相机等）的容器
				// 场景有背景、环境光、雾效等全局属性
				scene = new THREE.Scene();
				// ============ 第2步结束 ============

				// ============ 第3步：创建并设置透视相机 ============
				// 创建透视相机(PerspectiveCamera)，模拟人眼视角
				// 参数说明：
				// 1. 40: 视野角度(Field of View)，单位是度，决定相机视角的宽度
				// 2. window.innerWidth/window.innerHeight: 宽高比，匹配窗口比例
				// 3. 0.01: 近裁切面，距离相机多近的物体会被裁切（不渲染）
				// 4. 10: 远裁切面，距离相机多远的物体会被裁切（不渲染）
				// 远近裁切面之间的物体才会被渲染
				camera = new THREE.PerspectiveCamera(
					40, 
					window.innerWidth / window.innerHeight, 
					0.01, 
					10
				);
				
				// 设置相机在3D空间中的位置
				// camera.position.set(x, y, z): 设置相机坐标
				// (-0.35, -0.2, 0.35): 在3D空间中的具体位置，根据场景和模型调整
				camera.position.set(-0.35, -0.2, 0.35);
				// ============ 第3步结束 ============

				// ============ 第4步：创建并配置轨道控制器 ============
				// 创建轨道控制器，连接相机和渲染器的canvas元素
				// 允许用户通过鼠标/触摸控制相机
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制目标点：相机围绕哪个点旋转
				// (0, -0.08, 0.11): 3D空间中的目标点坐标，通常是场景中心或模型中心
				controls.target.set(0, -0.08, 0.11);
				
				// 设置相机与目标点的最小距离：限制缩放时不能太近
				controls.minDistance = 0.1;
				
				// 设置相机与目标点的最大距离：限制缩放时不能太远
				controls.maxDistance = 2;
				
				// 更新控制器内部状态，应用所有设置
				controls.update();
				// ============ 第4步结束 ============

				// ============ 第5步：创建资源加载器并设置路径 ============
				// 创建UltraHDRLoader实例并设置HDR贴图的根目录路径
				// setPath(): 设置基础路径，后续加载文件时使用相对路径
				const hdrLoader = new UltraHDRLoader().setPath('textures/equirectangular/');
				
				// 创建GLTFLoader实例并设置glTF模型文件的根目录路径
				const gltfLoader = new GLTFLoader().setPath('models/gltf/');
				// ============ 第5步结束 ============

				// ============ 第6步：并行加载HDR贴图和GLTF模型 ============
				// 使用Promise.all并行加载多个资源，提高加载效率
				// await: 等待所有Promise完成，返回结果数组
				// [texture, gltf]: 解构数组，分别获取HDR贴图和GLTF模型
				const [texture, gltf] = await Promise.all([
					// 加载HDR环境贴图
					// loadAsync(): 异步加载方法，返回Promise
					// 'royal_esplanade_2k.hdr.jpg': HDR贴图文件名
					hdrLoader.loadAsync('royal_esplanade_2k.hdr.jpg'),
					
					// 加载glTF模型文件
					// 'AnisotropyBarnLamp.glb': glTF二进制格式文件（.glb）
					// 包含模型几何体、材质、纹理、动画等所有数据
					gltfLoader.loadAsync('AnisotropyBarnLamp.glb'),
				]);
				// ============ 第6步结束 ============

				// ============ 第7步：配置环境设置 ============
				// 设置HDR贴图的映射方式
				// THREE.EquirectangularReflectionMapping: 等距柱状投影反射映射
				// 将2D的HDR贴图映射到3D球体上，用于环境反射和背景
				texture.mapping = THREE.EquirectangularReflectionMapping;

				// 将HDR贴图设置为场景背景
				// 背景是渲染时在所有物体后面显示的内容
				scene.background = texture;
				
				// 设置背景模糊度：0.0表示清晰，1.0表示完全模糊
				// 0.5: 中等模糊度，创建景深效果
				scene.backgroundBlurriness = 0.5;
				
				// 将HDR贴图设置为环境贴图
				// 环境贴图用于物体的环境反射和光照计算
				// 金属和光滑表面会反射环境贴图的内容
				scene.environment = texture;
				// ============ 第7步结束 ============

				// ============ 第8步：将加载的3D模型添加到场景中 ============
				// gltf.scene: GLTFLoader加载后返回的对象中的scene属性
				// 包含模型的所有网格、灯光、相机等
				// scene.add(): 将模型添加到主场景中
				scene.add(gltf.scene);
				// ============ 第8步结束 ============

				// ============ 第9步：添加窗口大小调整事件监听 ============
				// 监听浏览器窗口的resize事件
				// 当用户调整浏览器大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
				// ============ 初始化完成 ============
			}

			// 窗口大小调整事件处理函数
			// 当浏览器窗口大小改变时调用，确保3D场景正确适配新窗口尺寸
			function onWindowResize() {
				// 更新相机的宽高比以匹配新的窗口比例
				// 防止图像拉伸变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// updateProjectionMatrix(): 当相机参数改变后必须调用此方法
				// 重新计算相机的投影变换矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				// 使canvas的大小与窗口新尺寸保持一致
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// 动画循环函数 - 每一帧都会调用
			// 这是Three.js渲染循环的核心，负责更新和渲染场景
			function animate() {
				// 使用渲染器将场景从相机的视角渲染出来
				// 参数：
				// 1. scene: 要渲染的3D场景
				// 2. camera: 渲染时使用的相机视角
				renderer.render(scene, camera);
				
				// 注意：在典型的Three.js应用中，这里可能还会包含：
				// 1. controls.update(): 更新控制器状态（如果启用了阻尼动画）
				// 2. 更新模型动画
				// 3. 物理模拟更新
				// 4. 其他每帧需要更新的逻辑
				// 但在这个简单示例中，只需要渲染静态场景
			}
		</script>
	</body>
</html>