<!-- Three.js WebGPU MaterialX 加载器演示 - 功能与技术详解
一、项目概述
这是一个基于 Three.js WebGPU 渲染器 的 MaterialX 材质加载器演示应用。MaterialX 是由工业光魔（Industrial Light & Magic）开发的开放标准，用于在电影、视觉效果和游戏中描述材质和外观开发。本演示展示了 Three.js 如何加载、解析和渲染 MaterialX 格式的复杂材质。

二、核心功能
1. MaterialX 材质加载与渲染
多材质预览：同时加载和显示20+种不同类型的 MaterialX 材质

材质分类：

金属材质：黄铜、铬、铜、黄金、拉丝金属

自然材质：大理石、木材、玉石、砖墙

合成材质：塑料、汽车漆、天鹅绒

特殊效果：薄膜、透射、光泽等

实时渲染：所有材质在 WebGPU 管线中实时渲染

2. ShaderBall 测试模型系统
标准化测试对象：使用行业标准的 ShaderBall 模型进行材质预览

双网格系统：

Calibration_Mesh：校准网格，用于材质基础属性测试

Preview_Mesh：预览网格，展示完整材质效果

批量实例管理：支持多个模型同时显示，自动网格布局

3. 交互式可视化环境
3D 导航控制：完整的轨道控制器支持旋转、缩放、平移

网格显示控制：可独立切换校准网格和预览网格的可见性

响应式布局：模型自动排列成 6 列网格，适应不同屏幕尺寸

4. 高级视觉效果
HDR 环境照明：使用 2K HDR 环境贴图提供真实光照

透明材质支持：正确处理透明材质的渲染顺序

色调映射：线性色调映射控制整体曝光和对比度

三、主要技术点
1. WebGPU 渲染架构
现代图形 API：使用 WebGPU 替代 WebGL，提供更好的性能和功能

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

原生计算着色器支持：为复杂材质计算提供基础

2. Three.js 着色器语言（TSL）
声明式着色器编程：使用 TSL 编写地面网格材质

自动微分功能：

javascript
const fw = fwidth(coord); // 自动计算屏幕空间导数
节点式材质系统：MeshBasicNodeMaterial 支持节点连接

过程式纹理生成：代码生成网格图案，无需纹理贴图

3. MaterialX 加载器集成
格式解析：解析 MaterialX XML 格式的材质定义

节点图转换：将 MaterialX 节点图转换为 Three.js 材质节点

参数映射：自动映射 MaterialX 参数到 Three.js 着色器 uniforms

纹理处理：支持 MaterialX 中的纹理引用和变换

4. 异步资源管理
并行加载：同时加载多个 MaterialX 文件

进度管理：使用 Promise 链管理加载顺序

错误处理：内置加载失败处理机制

5. 智能场景管理
javascript
// 自动网格布局算法
const offsetX = (DIST_X * (COLUMN_COUNT - 1)) * -0.5;
const offsetZ = (DIST_Z * lineCount) * 0.5;
动态排列：根据模型数量自动计算最优布局

渲染顺序优化：透明材质特殊处理，防止渲染错误

6. 高级着色器技术
抗锯齿网格：使用 fwidth() 和 smoothstep() 实现屏幕空间抗锯齿

径向渐变衰减：中心到边缘的平滑过渡效果

世界坐标映射：基于世界坐标而非UV坐标的纹理映射

7. 模块化架构
ES6 模块系统：使用 import/export 组织代码

导入映射：通过 importmap 配置模块别名

插件化设计：各种加载器作为独立模块集成

四、技术栈详解
渲染管线
text
Three.js Core → WebGPU Backend → GPU Pipeline
     ↓
MaterialX Loader → Node Graph → TSL Compilation
     ↓
ShaderBall Model → Material Binding → Final Render
关键组件交互
渲染循环：requestAnimationFrame → render() → WebGPURenderer.render()

材质加载：MaterialXLoader.loadAsync() → 材质创建 → 模型绑定

用户输入：鼠标事件 → OrbitControls → 相机矩阵更新

响应式设计：resize 事件 → 相机/渲染器更新 → 重新布局

五、性能优化特点
实例化渲染：使用模型克隆而非重复创建几何体

共享资源：多个模型共享同一材质定义（按需实例化）

按需渲染：通过 setAnimationLoop 实现高效渲染循环

GPU 内存管理：WebGPU 自动管理资源生命周期

屏幕空间优化：基于屏幕大小的抗锯齿和细节层级

六、扩展性和可维护性
易于扩展
添加新材质：只需将 MaterialX 文件放入对应目录

自定义模型：可替换 ShaderBall 为任意 GLTF 模型

新增功能：模块化设计便于添加新加载器或渲染效果

调试支持
内置检查器：Three.js Inspector 提供场景调试

实时参数调整：GUI 控制面板支持运行时修改

错误反馈：详细的控制台日志和错误处理

七、应用场景
材质开发预览：游戏和电影行业的材质艺术家

技术验证：验证 MaterialX 标准的兼容性和表现

教育演示：计算机图形学教学中的材质系统示例

性能测试：WebGPU 与传统 WebGL 的对比测试

跨平台测试：不同浏览器和设备的 WebGPU 兼容性测试

八、技术亮点总结
前沿标准：结合 MaterialX（材质标准）和 WebGPU（图形API标准）

生产级质量：支持行业标准的材质定义和测试流程

完全开源：基于 Three.js 生态系统，完全可定制

跨平台：支持所有现代浏览器的 WebGPU 实现

高性能：利用现代 GPU 特性，实现实时复杂材质渲染 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示在浏览器标签页上的文本 -->
		<title>Three.js WebGPU - MaterialX 材质加载器演示</title>
		<!-- 字符编码设置：使用UTF-8支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止用户手动缩放 -->
		<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">
		<style>
			/* 自定义CSS样式：调整dat.gui控件中属性名的宽度 */
			/* !important 确保样式优先级最高 */
			.dg .property-name {
				width: 20% !important;
			}
		</style>
	</head>
	<body>

		<!-- 页面顶部信息区域，包含logo、标题和描述 -->
		<div id="info">
			<!-- Three.js官方链接，点击logo跳转到three.js官网 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener noreferrer" class="logo-link" title="访问Three.js官方网站">
				<!-- 此处通常通过CSS设置背景图片显示logo -->
			</a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener noreferrer">Three.js</a>
				<!-- 副标题：当前页面功能描述 -->
				<span>MaterialX 材质加载器演示</span>
			</div>

			<!-- 页面功能详细描述 -->
			<small>
				这是一个展示Three.js MaterialX加载器的演示页面。<br>
				MaterialX是一个开放的标准，用于电影、视觉效果和游戏中的材质和外观开发。<br>
				本页面展示了如何加载和渲染各种MaterialX Standard Surface材质。
			</small>
			
			
		</div>

		<!-- 导入映射配置：定义JavaScript模块的别名和路径 -->
		<!-- 这允许我们在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模块 -->
		<script type="module">

			// ========== 模块导入部分 ==========
			
			// 导入Three.js的WebGPU渲染器及相关功能
			// 使用importmap中定义的别名"three/webgpu"
			import * as THREE from 'three/webgpu';

			// 导入Three.js着色器语言（TSL）的功能函数
			// Fn: 定义着色器函数
			// length: 计算向量长度
			// fract: 获取小数部分
			// vec4: 创建四维向量
			// positionWorld: 世界空间中的位置坐标
			// smoothstep: 平滑插值函数
			// max: 取最大值
			// abs: 取绝对值
			// float: 浮点数类型
			// fwidth: 计算屏幕空间导数（用于抗锯齿）
			import { Fn, length, fract, vec4, positionWorld, smoothstep, max, abs, float, fwidth } from 'three/tsl';

			// 导入轨道控制器：用于通过鼠标控制相机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入HDR（高动态范围）加载器：用于加载HDR环境贴图
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
			// 导入GLTF加载器：用于加载GLTF格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			// 导入MaterialX加载器：核心功能，加载MaterialX材质文件
			import { MaterialXLoader } from 'three/addons/loaders/MaterialXLoader.js';

			// 导入调试器/检查器：用于创建GUI控制面板
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 常量定义部分 ==========
			
			// 远程MaterialX示例文件的基地址
			// 指向MaterialX官方GitHub仓库的示例文件
			const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
			
			// 本地MaterialX示例文件的相对路径
			const LOCAL_SAMPLE_PATH = 'materialx/';
			
			// 远程MaterialX示例文件列表
			// 这些是MaterialX标准库中预定义的材质示例
			// 注释掉的文件表示暂时不加载
			const samples = [
				'standard_surface_brass_tiled.mtlx',      // 瓷砖黄铜材质
				'standard_surface_brick_procedural.mtlx', // 程序化砖墙材质
				'standard_surface_carpaint.mtlx',         // 汽车油漆材质
				//'standard_surface_chess_set.mtlx',      // 国际象棋套装材质（注释）
				'standard_surface_chrome.mtlx',           // 铬金属材质
				'standard_surface_copper.mtlx',           // 铜材质
				//'standard_surface_default.mtlx',        // 默认材质（注释）
				//'standard_surface_glass.mtlx',          // 玻璃材质（注释）
				//'standard_surface_glass_tinted.mtlx',   // 有色玻璃材质（注释）
				'standard_surface_gold.mtlx',             // 黄金材质
				//'standard_surface_greysphere.mtlx',     // 灰色球体材质（注释）
				//'standard_surface_greysphere_calibration.mtlx', // 灰色球体校准材质（注释）
				'standard_surface_jade.mtlx',             // 玉石材质
				//'standard_surface_look_brass_tiled.mtlx', // 瓷砖黄铜外观（注释）
				//'standard_surface_look_wood_tiled.mtlx', // 瓷砖木材外观（注释）
				'standard_surface_marble_solid.mtlx',     // 固体大理石材质
				'standard_surface_metal_brushed.mtlx',    // 拉丝金属材质
				'standard_surface_plastic.mtlx',          // 塑料材质
				//'standard_surface_thin_film.mtlx',      // 薄膜材质（注释）
				'standard_surface_velvet.mtlx',           // 天鹅绒材质
				'standard_surface_wood_tiled.mtlx'        // 瓷砖木材材质
			];

			// 本地MaterialX示例文件列表
			// 这些是可能用于测试特定功能的材质文件
			const localSamples = [
				'heightnormal.mtlx',                    // 高度转法线贴图测试
				'conditional_if_float.mtlx',            // 浮点数条件语句测试
				'image_transform.mtlx',                 // 图像变换测试
				'color3_vec3_cm_test.mtlx',             // 颜色向量转换测试
				'rotate2d_test.mtlx',                   // 2D旋转测试
				'rotate3d_test.mtlx',                   // 3D旋转测试
				'heighttonormal_normal_input.mtlx',     // 高度转法线输入测试
				'roughness_test.mtlx',                  // 粗糙度测试
				'opacity_test.mtlx',                    // 透明度测试
				'opacity_only_test.mtlx',               // 仅透明度测试
				'specular_test.mtlx',                   // 高光测试
				'ior_test.mtlx',                        // 折射率测试
				'combined_test.mtlx',                   // 组合测试
				'texture_opacity_test.mtlx',            // 纹理透明度测试
				'transmission_test.mtlx',               // 透射测试
				'transmission_only_test.mtlx',          // 仅透射测试
				'transmission_rough.mtlx',              // 粗糙透射测试
				'thin_film_rainbow_test.mtlx',          // 薄膜彩虹效果测试
				'thin_film_ior_clamp_test.mtlx',        // 薄膜折射率限制测试
				'sheen_test.mtlx',                      // 光泽测试
			];

			// ========== 全局变量声明 ==========
			
			// 场景、相机、渲染器三大核心对象
			let camera;     // 相机：定义观察者的视角
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D屏幕
			
			// 控制器和预制模型
			let controls;   // 轨道控制器：用户交互控制
			let prefab;     // 预制模型：ShaderBall模型的模板，会被多次克隆使用
			
			// 模型数组：存储所有加载的ShaderBall模型实例
			const models = [];

			// ========== 初始化调用 ==========
			
			// 页面加载完成后立即执行初始化函数
			init();

			/**
			 * 主初始化函数
			 * 负责设置Three.js的核心组件：场景、相机、渲染器、控制器等
			 * 这是整个应用的启动入口
			 */
			function init() {

				// ========== 创建DOM容器 ==========
				
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中
				document.body.appendChild( container );

				// ========== 创建WebGPU渲染器 ==========
				
				// 创建WebGPU渲染器实例，启用抗锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比，适配高DPI显示屏
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置色调映射为线性模式，控制HDR到LDR的转换
				renderer.toneMapping = THREE.LinearToneMapping;
				// 设置曝光值，影响整体亮度
				renderer.toneMappingExposure = .5;
				// 创建并附加调试器/检查器，用于GUI控制
				renderer.inspector = new Inspector();
				// 设置渲染循环，参数render是每帧调用的函数
				renderer.setAnimationLoop( render );
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// ========== 创建相机 ==========
				
				// 创建透视相机，参数：
				// 45 - 视野角度（FOV），单位度
				// window.innerWidth / window.innerHeight - 宽高比
				// 0.25 - 近裁剪平面（离相机最近的可渲染距离）
				// 200 - 远裁剪平面（离相机最远的可渲染距离）
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 200 );
				// 设置相机初始位置（x, y, z坐标）
				camera.position.set( 10, 10, 20 );

				// ========== 创建场景 ==========
				
				// 创建主场景对象
				scene = new THREE.Scene();
				// 设置场景背景颜色为白色
				scene.background = new THREE.Color( 0xffffff );

				// ========== 创建地面网格平面 ==========
				
				// 创建一个基于节点的材质，允许使用TSL编写着色器逻辑
				const material = new THREE.MeshBasicNodeMaterial();

				/**
				 * 创建XZ平面网格图案的TSL函数
				 * 这是一个着色器函数，用于生成网格图案
				 * @param {float} gridSize - 网格大小，控制网格的密度
				 * @param {float} dotWidth - 点（网格交叉点）的宽度
				 * @param {float} lineWidth - 网格线的宽度
				 * @returns {float} - 网格图案的强度值（0-1）
				 */
				const gridXZ = Fn( ( [ gridSize = float( 1.0 ), dotWidth = float( 0.1 ), lineWidth = float( 0.02 ) ] ) => {

					// 将世界坐标除以网格大小，得到基于网格的坐标
					const coord = positionWorld.xz.div( gridSize );
					// 取坐标的小数部分，创建重复的网格图案
					const grid = fract( coord );

					// 计算屏幕空间导数，用于自动抗锯齿
					// fwidth计算相邻像素间的变化率
					const fw = fwidth( coord );
					// 平滑因子，基于变化率的一半
					const smoothing = max( fw.x, fw.y ).mul( 0.5 );

					// 创建网格交叉点的圆点
					// 计算到每个单元格中心的距离（在X和Y方向取最大值）
					const squareDist = max( abs( grid.x.sub( 0.5 ) ), abs( grid.y.sub( 0.5 ) ) );
					// 使用smoothstep创建平滑的圆点边缘
					const dots = smoothstep( dotWidth.add( smoothing ), dotWidth.sub( smoothing ), squareDist );

					// 创建网格线
					// 计算到垂直线和水平线的距离
					const lineX = smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), abs( grid.x.sub( 0.5 ) ) );
					const lineZ = smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), abs( grid.y.sub( 0.5 ) ) );
					// 合并垂直线和水平线
					const lines = max( lineX, lineZ );

					// 返回圆点和网格线的组合（取最大值）
					return max( dots, lines );

				} );

				/**
				 * 创建径向渐变TSL函数
				 * 用于创建从中心向外衰减的渐变效果
				 * @param {float} radius - 渐变开始半径
				 * @param {float} falloff - 渐变衰减范围
				 * @returns {float} - 渐变值（0-1）
				 */
				const radialGradient = Fn( ( [ radius = float( 10.0 ), falloff = float( 1.0 ) ] ) => {

					// 计算当前点到世界原点的距离
					const distance = length( positionWorld );
					// 使用smoothstep创建平滑的径向渐变
					// 在半径处开始渐变，在半径-falloff处结束渐变
					return smoothstep( radius, radius.sub( falloff ), distance );

				} );

				// 创建网格图案：1.0单位网格，0.03点宽，0.005线宽
				const gridPattern = gridXZ( 1.0, 0.03, 0.005 );
				// 基础颜色：白色，完全透明
				const baseColor = vec4( 1.0, 1.0, 1.0, 0.0 );
				// 网格颜色：灰色，完全不透明
				const gridColor = vec4( 0.5, 0.5, 0.5, 1.0 );

				// 混合基础颜色和网格颜色
				// 使用网格图案作为混合因子
				const mixedColor = gridPattern.mix( baseColor, gridColor );
				// 应用径向渐变：从30单位开始，20单位衰减范围
				const finalColor = mixedColor.mul( radialGradient( 30.0, 20.0 ) );
				
				// 将最终颜色节点设置为材质的颜色
				material.colorNode = finalColor;
				// 启用材质透明度
				material.transparent = true;

				// 创建圆形几何体作为地面，半径40单位
				const plane = new THREE.Mesh( new THREE.CircleGeometry( 40 ), material );
				// 旋转平面使其水平（绕X轴旋转-90度）
				plane.rotation.x = - Math.PI / 2;
				// 设置渲染顺序为-1，确保地面在其他对象之前渲染
				plane.renderOrder = - 1;
				// 将地面添加到场景
				scene.add( plane );

				// ========== 创建轨道控制器 ==========
				
				// 创建轨道控制器实例，传入相机和渲染器的DOM元素
				controls = new OrbitControls( camera );
				// 连接控制器到渲染器的canvas元素
				controls.connect( renderer.domElement );
				// 启用阻尼效果，使相机移动有惯性感
				controls.enableDamping = true;
				// 设置相机与目标点的最小距离
				controls.minDistance = 2;
				// 设置相机与目标点的最大距离
				controls.maxDistance = 40;

				// ========== 加载HDR环境贴图和模型 ==========
				
				// 创建HDRLoader实例
				new HDRLoader()
					// 设置HDR纹理文件的路径
					.setPath( 'textures/equirectangular/' )
					// 异步加载HDR文件
					.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {

						// 设置HDR纹理的映射方式为等距柱状投影
						// 这种方式适合作为环境贴图
						texture.mapping = THREE.EquirectangularReflectionMapping;

						// 将HDR纹理设置为场景的环境贴图
						// 这会为所有材质提供基于图像的照明（IBL）
						scene.environment = texture;

						// 异步加载GLTF模型（ShaderBall）
						// ShaderBall是一个用于材质预览的标准测试模型
						prefab = ( await new GLTFLoader().loadAsync( './models/gltf/ShaderBall.glb' ) ).scene;

						// ========== 加载远程MaterialX示例 ==========
						
						// 遍历远程示例文件列表
						for ( const sample of samples ) {
							// 异步加载每个MaterialX示例
							// 使用await确保顺序加载
							await addSample( sample, SAMPLE_PATH );
						}

						// ========== 加载本地MaterialX示例 ==========
						
						// 遍历本地示例文件列表
						for ( const sample of localSamples ) {
							// 异步加载每个本地MaterialX示例
							await addSample( sample, LOCAL_SAMPLE_PATH );
						}

						// ========== 添加GUI控制界面 ==========
						
						// 所有模型加载完成后，创建图形用户界面
						addGUI();

					} );

				// ========== 事件监听器 ==========
				
				// 监听窗口大小变化事件
				// 当窗口大小改变时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 更新模型排列布局
			 * 将多个ShaderBall模型排列成网格布局
			 * 使场景中的模型有序排列，便于查看和比较
			 */
			function updateModelsAlign() {

				// 布局参数
				const COLUMN_COUNT = 6; // 每行的模型数量（列数）
				const DIST_X = 3;       // X轴方向（水平）的间距
				const DIST_Z = 3;       // Z轴方向（垂直）的间距

				// 计算总行数
				// Math.floor(models.length / COLUMN_COUNT) 计算完整行数
				// - 1.5 是为了调整垂直居中
				const lineCount = Math.floor( models.length / COLUMN_COUNT ) - 1.5;

				// 计算布局偏移量，使整个网格在场景中居中
				// X轴偏移：使网格水平居中
				const offsetX = ( DIST_X * ( COLUMN_COUNT - 1 ) ) * - .5;
				// Z轴偏移：使网格垂直居中
				const offsetZ = ( DIST_Z * lineCount ) * .5;

				// 遍历所有模型，为每个模型计算位置
				for ( let i = 0; i < models.length; i ++ ) {

					// 获取当前模型
					const model = models[ i ];

					// 计算X坐标：
					// i % COLUMN_COUNT - 计算当前模型在第几列（0-5）
					// 乘以列间距DIST_X，加上偏移量offsetX
					model.position.x = ( ( i % COLUMN_COUNT ) * DIST_X ) + offsetX;
					
					// 计算Z坐标：
					// Math.floor(i / COLUMN_COUNT) - 计算当前模型在第几行
					// 乘以行间距DIST_Z，负号使模型向下排列（Three.js中Z轴正向指向屏幕内）
					// 加上偏移量offsetZ
					model.position.z = ( Math.floor( i / COLUMN_COUNT ) * - DIST_Z ) + offsetZ;
					
					// Y坐标保持为0，所有模型在同一水平面上

				}

			}

			/**
			 * 添加MaterialX示例模型
			 * 加载MaterialX材质文件并将其应用到ShaderBall模型
			 * @param {string} sample - MaterialX示例文件名
			 * @param {string} path - 文件所在路径（远程或本地）
			 * @returns {Promise<void>} - 异步函数，返回Promise
			 */
			async function addSample( sample, path ) {

				// 克隆预制的ShaderBall模型
				// clone()方法创建模型的一个独立副本
				const model = prefab.clone();

				// 将新模型添加到模型数组
				models.push( model );
				// 将模型添加到场景中
				scene.add( model );

				// 更新所有模型的排列布局
				updateModelsAlign();

				// ========== 加载并应用MaterialX材质 ==========
				
				// 异步加载MaterialX材质文件
				const material = await new MaterialXLoader()
					// 设置文件路径
					.setPath( path )
					// 异步加载指定的MaterialX文件
					.loadAsync( sample )
					// 处理加载结果
					.then( ( { materials } ) => {
						// materials是一个对象，包含文件中定义的所有材质
						// Object.values(materials) 获取所有材质值的数组
						// .pop() 取出最后一个材质（通常MaterialX文件只有一个材质）
						return Object.values( materials ).pop();
					} );

				// ========== 应用材质到模型的不同部分 ==========
				
				// 获取模型中的"校准网格"对象
				// ShaderBall模型通常包含多个子网格，用于不同的测试目的
				const calibrationMesh = model.getObjectByName( 'Calibration_Mesh' );
				// 将加载的MaterialX材质应用到校准网格
				calibrationMesh.material = material;

				// 获取模型中的"预览网格"对象
				const previewMesh = model.getObjectByName( 'Preview_Mesh' );
				// 将同样的材质应用到预览网格
				previewMesh.material = material;

				// ========== 处理透明材质 ==========
				
				// 如果材质是透明的，需要调整渲染顺序
				// 确保透明对象按正确的顺序渲染（从后到前）
				if ( material.transparent ) {
					// 校准网格先渲染（顺序值越小越先渲染）
					calibrationMesh.renderOrder = 1;
					// 预览网格后渲染
					previewMesh.renderOrder = 2;
				}

			}

			/**
			 * 添加GUI（图形用户界面）控制面板
			 * 创建调试控制面板，允许用户切换不同网格的可见性
			 */
			function addGUI() {

				// 使用渲染器的检查器创建一个参数面板
				// 'MaterialX Loader' 是面板的标题
				const gui = renderer.inspector.createParameters( 'MaterialX Loader' );

				/**
				 * GUI控制API对象
				 * 包含用户可以控制的所有参数
				 */
				const API = {
					showCalibrationMesh: true,  // 控制校准网格是否显示
					showPreviewMesh: true       // 控制预览网格是否显示
				};

				// ========== 添加校准网格控制开关 ==========
				
				// 在GUI中添加一个控制开关
				gui.add( API, 'showCalibrationMesh' )
					.name( '显示校准网格' )  // 在GUI中显示的标签
					.onChange( function ( value ) {
						// 当开关状态改变时，调用setVisibility函数
						// 更新所有名为'Calibration_Mesh'的对象的可见性
						setVisibility( 'Calibration_Mesh', value );
					} );

				// ========== 添加预览网格控制开关 ==========
				
				gui.add( API, 'showPreviewMesh' )
					.name( '显示预览网格' )
					.onChange( function ( value ) {
						// 更新所有名为'Preview_Mesh'的对象的可见性
						setVisibility( 'Preview_Mesh', value );
					} );

			}

			/**
			 * 设置场景中特定名称对象的可见性
			 * 用于批量控制多个同名对象的显示/隐藏
			 * @param {string} name - 要控制的对象的名称
			 * @param {boolean} visible - 是否可见（true显示，false隐藏）
			 */
			function setVisibility( name, visible ) {

				// 遍历场景中的所有对象
				// traverse()方法递归遍历场景树中的所有子对象
				scene.traverse( function ( node ) {

					// 检查当前节点是否是网格对象
					if ( node.isMesh ) {

						// 检查网格对象的名称是否匹配目标名称
						if ( node.name == name ) {
							// 设置该网格的可见性
							node.visible = visible;
						}

					}

				} );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器的设置
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 必须在更改相机参数后调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器的尺寸
				// 使渲染输出与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 渲染循环函数
			 * 每一帧都会被调用，是Three.js动画的核心
			 * 负责更新控制器状态并渲染场景
			 */
			function render() {

				// 更新轨道控制器
				// 如果启用了阻尼效果，这里会更新相机的平滑移动
				controls.update();
				
				// 渲染场景
				// 将3D场景通过相机视角渲染到2D画布上
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>