<!-- Three.js GLTF导出器演示 - 功能描述与技术要点详解
🌟 整体功能概述
这是一个基于Three.js的WebGL GLTF/GLB格式导出器演示程序。它创建了一个包含多种3D对象的复杂场景，并提供了完整的GLTF/GLB导出功能，允许用户将Three.js场景、对象或模型导出为标准3D格式文件。

🔧 主要功能模块
1. 场景构建功能
多元几何体展示：创建了20多种不同的3D几何体，包括球体、立方体、圆柱体、环面扭结等

材质系统：展示了基础材质、标准材质、兰伯特材质等多种材质类型

纹理应用：包含图片纹理、程序生成的渐变纹理、凹凸贴图等

灯光系统：环境光和定向光的配置与应用

相机系统：透视相机和正交相机的实现

2. GLTF/GLB导出功能
双格式支持：可导出为GLTF（JSON格式）或GLB（二进制格式）

灵活的导出选项：

TRS/矩阵变换选择

可见性过滤（仅导出可见对象）

纹理尺寸限制

多种导出模式：

导出整个场景

导出单个对象

导出多个对象集合

导出多个场景

3. 高级特性展示
实例化网格：高效渲染大量相同几何体的实例

压缩技术集成：KTX2纹理压缩和Meshopt网格压缩

层次结构：父子对象关系和组的概念

动画效果：相机自动环绕场景

4. 用户交互界面
GUI控制面板：使用lil-gui库创建的控制界面

实时参数调整：可在运行时修改导出设置

一键导出：提供多种预设导出模式

💻 核心技术要点
1. Three.js核心概念
Scene（场景）：3D对象的容器，可包含多个场景

Geometry（几何体）：定义了3D对象的形状和顶点数据

Material（材质）：定义了3D对象的外观（颜色、纹理、反射等）

Mesh（网格）：几何体+材质的组合，构成可渲染的3D对象

Camera（相机）：定义了观察3D场景的视角

Renderer（渲染器）：负责将3D场景渲染到2D画布

2. GLTF格式处理
GLTFExporter：Three.js提供的GLTF导出器

二进制vs文本：GLB（二进制）和GLTF（文本）的区别与选择

资源嵌入：GLB格式将所有资源（纹理、几何数据）嵌入单个文件

纹理处理：使用TextureUtils进行纹理优化和转换

3. 压缩技术
KTX2/Basis Universal：纹理压缩技术，大幅减少纹理文件大小

Meshopt：网格数据压缩，优化顶点和索引数据

KHR_mesh_quantization：网格量化扩展，减少精度以减小文件

4. 性能优化技术
实例化渲染：使用InstancedMesh高效渲染重复对象

缓冲区几何体：BufferGeometry替代传统Geometry，提高性能

纹理优化：自动纹理大小调整和格式转换

5. 现代Web开发技术
ES6模块化：使用import/export语法组织代码

Import Maps：浏览器原生模块解析

Blob API：客户端文件生成和下载

WebGL 2.0：现代图形API支持

🎯 技术特色亮点
1. 完整的导出工作流
text
Three.js场景 → GLTFExporter处理 → 格式转换 → 文件保存
2. 多层次场景结构
主场景包含多种类型的3D对象

父子层次关系（立方体包含子立方体）

组的概念（多个对象组成逻辑组）

多个独立场景（场景1和场景2）

3. 材质和纹理多样性
基础材质（无光照）

标准材质（PBR物理渲染）

线框材质

透明材质

渐变纹理（程序生成）

凹凸贴图

重复贴图

4. 导出控制灵活性
javascript
// 四种主要导出模式
exportGLTF(scene1);                // 导出单个场景
exportGLTF([scene1, scene2]);      // 导出多个场景
exportGLTF(sphere);                // 导出单个对象
exportGLTF([sphere, gridHelper]);  // 导出对象集合
5. 用户体验优化
实时预览：3D场景实时渲染

直观控制：GUI面板提供所有参数控制

直接下载：导出后自动触发文件下载

响应式设计：自适应窗口大小变化

📊 技术架构图
text
用户界面层
├── GUI控制面板 (lil-gui)
├── 3D场景渲染 (WebGL)
└── 导出按钮交互

业务逻辑层
├── 场景管理器
├── 导出控制器 (GLTFExporter)
├── 文件处理器
└── 动画控制器

数据层
├── 3D几何数据 (BufferGeometry)
├── 材质和纹理
├── 灯光和相机配置
└── 导出配置文件

底层支持
├── Three.js核心库
├── 扩展加载器 (GLTFLoader, KTX2Loader)
├── 压缩解码器 (MeshoptDecoder)
└── 纹理工具 (TextureUtils) -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示页面功能和使用的技术 -->
		<title>three.js WebGL - GLTF模型导出器</title>
		<!-- 字符编码设置：使用UTF-8支持中文和国际字符 -->
		<meta charset="utf-8">
		<!-- 移动端视口设置：
		     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="main.css">
	</head>
	<body>
		<!-- 页面顶部信息栏：显示技术信息和链接 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL - GLTF模型导出器演示
			<br>
			<span style="font-size: 14px; color: #888;">
				这是一个展示three.js中GLTF/GLB格式导出功能的完整示例
			</span>
		</div>

		<!-- 导入映射表：定义模块的导入路径，让浏览器知道从哪里加载模块 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有逻辑代码 -->
		<script type="module">

			// ============================================================================
			// 模块导入部分：从指定路径导入所需的模块和库
			// ============================================================================
			
			// 导入three.js核心库的所有功能
			import * as THREE from 'three';

			// 导入GLTF导出器：用于将three.js场景导出为GLTF/GLB格式
			import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
			
			// 导入GLTF加载器：用于加载GLTF/GLB格式的模型文件
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入KTX2加载器：用于加载KTX2格式的压缩纹理（基于Basis Universal压缩）
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
			
			// 导入Meshopt解码器：用于解码Meshopt压缩的网格数据（减少文件大小）
			import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
			
			// 导入GUI库：创建用户界面控制面板（用于调整参数和触发导出）
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入纹理工具：提供WebGL纹理相关的实用功能
			import * as TextureUtils from 'three/addons/utils/WebGLTextureUtils.js';

			// ============================================================================
			// 核心函数：导出GLTF/GLB文件
			// ============================================================================
			
			/**
			 * 将Three.js场景或对象导出为GLTF/GLB格式文件
			 * 
			 * @param {THREE.Scene|THREE.Object3D|Array} input - 要导出的内容，可以是：
			 *     1. 单个场景对象（THREE.Scene）
			 *     2. 单个3D对象（THREE.Object3D或其子类）
			 *     3. 对象数组（多个场景或对象的集合）
			 * 
			 * 函数执行流程：
			 * 1. 创建GLTF导出器实例并配置
			 * 2. 设置导出选项（二进制格式、可见性过滤等）
			 * 3. 调用解析方法进行导出
			 * 4. 处理导出结果（保存文件或显示错误）
			 */
			function exportGLTF( input ) {

				// 创建GLTF导出器实例，并设置纹理处理工具
				// TextureUtils提供纹理处理功能，如纹理大小调整、格式转换等
				const gltfExporter = new GLTFExporter().setTextureUtils( TextureUtils );

				// 配置导出选项对象
				const options = {
					// trs: 控制如何存储变换信息
					// true: 使用位置(position)、旋转(rotation)、缩放(scale)分别存储（TRS方式）
					// false: 使用变换矩阵(matrix)存储（更紧凑但不易编辑）
					trs: params.trs,
					
					// onlyVisible: 是否只导出可见对象
					// true: 只导出visible属性为true的对象
					// false: 导出所有对象，无论是否可见
					onlyVisible: params.onlyVisible,
					
					// binary: 导出格式选择
					// true: 导出为二进制格式（GLB，单个文件，包含所有资源）
					// false: 导出为JSON格式（GLTF，可能包含外部资源文件）
					binary: params.binary,
					
					// maxTextureSize: 最大纹理尺寸限制
					// 如果纹理尺寸超过此值，会被自动缩小
					// 4096表示最大支持4096x4096像素的纹理
					maxTextureSize: params.maxTextureSize
				};

				// 执行导出操作
				// 参数1: 要导出的输入内容
				// 参数2: 成功回调函数（导出完成时调用）
				// 参数3: 错误回调函数（导出出错时调用）
				// 参数4: 导出选项配置
				gltfExporter.parse(
					input,
					
					// 成功回调函数：接收导出结果
					function ( result ) {

						// 判断导出结果的类型
						if ( result instanceof ArrayBuffer ) {
							// 如果结果是ArrayBuffer，说明导出了二进制格式（GLB）
							// 调用函数保存二进制文件
							saveArrayBuffer( result, 'scene.glb' );

						} else {
							// 如果结果是对象，说明导出了JSON格式（GLTF）
							// 将结果转换为格式化的JSON字符串（2个空格缩进）
							const output = JSON.stringify( result, null, 2 );
							
							// 在控制台输出JSON内容（便于调试）
							console.log( output );
							
							// 调用函数保存JSON文件
							saveString( output, 'scene.gltf' );

						}

					},
					
					// 错误回调函数：接收错误信息
					function ( error ) {

						// 在控制台输出错误信息
						console.log( '导出过程中发生错误:', error );

					},
					
					// 传递导出选项
					options
				);

			}

			// ============================================================================
			// 文件保存功能函数
			// ============================================================================
			
			// 创建一个隐藏的<a>标签元素，用于文件下载
			// 这是浏览器中触发文件下载的常用方法
			const link = document.createElement( 'a' );
			link.style.display = 'none';  // 隐藏元素（不显示在页面上）
			document.body.appendChild( link ); // 将元素添加到DOM中（Firefox兼容性需要）

			/**
			 * 通用文件保存函数
			 * 
			 * @param {Blob} blob - 要保存的数据，包装为Blob对象
			 * @param {string} filename - 保存的文件名
			 * 
			 * Blob（Binary Large Object）是浏览器中表示二进制数据的对象
			 * URL.createObjectURL()创建指向Blob的临时URL
			 */
			function save( blob, filename ) {

				// 创建指向Blob对象的URL（临时地址）
				link.href = URL.createObjectURL( blob );
				
				// 设置下载的文件名
				link.download = filename;
				
				// 模拟点击链接，触发浏览器下载
				link.click();

				// 注意：这里没有立即撤销URL（URL.revokeObjectURL()）
				// 因为在Firefox中，如果立即撤销URL，下载可能失败
				// 在实际应用中，可以添加一个延时来撤销URL，释放内存

			}

			/**
			 * 保存文本文件
			 * 
			 * @param {string} text - 要保存的文本内容
			 * @param {string} filename - 保存的文件名
			 */
			function saveString( text, filename ) {

				// 创建文本类型的Blob对象
				// type: 'text/plain' 表示纯文本文件
				save( new Blob( [ text ], { type: 'text/plain' } ), filename );

			}

			/**
			 * 保存二进制文件（如GLB格式）
			 * 
			 * @param {ArrayBuffer} buffer - 要保存的二进制数据
			 * @param {string} filename - 保存的文件名
			 */
			function saveArrayBuffer( buffer, filename ) {

				// 创建二进制数据类型的Blob对象
				// type: 'application/octet-stream' 表示通用二进制流
				save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );

			}

			// ============================================================================
			// 全局变量声明
			// ============================================================================
			
			// 容器元素：用于承载Three.js渲染器输出的canvas
			let container;
			
			// Three.js核心对象
			let camera, object, object2, material, geometry, scene1, scene2, renderer;
			
			// 特定对象的引用，便于在导出函数中单独访问
			let gridHelper, sphere, model, coffeemat; 

			// ============================================================================
			// 参数配置对象
			// 这些参数可以通过GUI界面进行调整，控制导出的行为
			// ============================================================================
			const params = {
				// 导出设置
				trs: false,                     // 是否使用TRS方式存储变换信息
				onlyVisible: true,              // 是否只导出可见对象
				binary: false,                  // 是否导出为二进制格式（GLB）
				maxTextureSize: 4096,           // 最大纹理尺寸限制（像素）
				
				// 导出操作函数（绑定到GUI按钮）
				exportScene1: exportScene1,              // 导出场景1
				exportScenes: exportScenes,              // 导出场景1和场景2
				exportSphere: exportSphere,              // 单独导出球体
				exportModel: exportModel,                // 单独导出ShaderBall模型
				exportObjects: exportObjects,            // 导出球体和网格辅助对象
				exportSceneObject: exportSceneObject,    // 导出场景1和网格辅助对象
				exportCompressedObject: exportCompressedObject, // 导出压缩模型（咖啡垫）
			};

			// ============================================================================
			// 初始化：程序入口点
			// ============================================================================
			init();

			/**
			 * 初始化函数 - 整个程序的启动点
			 * 负责创建场景、相机、灯光、几何体、材质、渲染器、GUI等所有内容
			 * 执行顺序：
			 * 1. 创建DOM容器
			 * 2. 创建渐变纹理
			 * 3. 创建场景和基础设置
			 * 4. 创建各种几何体和对象
			 * 5. 设置渲染器
			 * 6. 加载外部模型
			 * 7. 创建GUI控制面板
			 */
			function init() {

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

				// ------------------------------------------------------------------------
				// 2. 创建渐变纹理（编程生成，非图片文件）
				// ------------------------------------------------------------------------
				// 创建一个100x100像素的RGBA数据数组
				// 每个像素需要4个值（R,G,B,A），所以总长度是100*100*4=40000
				const data = new Uint8ClampedArray( 100 * 100 * 4 );

				// 双重循环遍历所有像素
				for ( let y = 0; y < 100; y ++ ) {
					for ( let x = 0; x < 100; x ++ ) {
						
						// 计算当前像素在数组中的起始位置（索引）
						// stride：步长，每个像素占4个数组元素
						const stride = 4 * ( 100 * y + x );

						// 设置颜色值（创建垂直渐变效果）：
						// R通道：从上到下从0渐变到255（红色逐渐增强）
						data[ stride ] = Math.round( 255 * y / 99 );
						// G通道：从上到下从255渐变到0（绿色逐渐减弱）
						data[ stride + 1 ] = Math.round( 255 - 255 * y / 99 );
						// B通道：固定为0（无蓝色）
						data[ stride + 2 ] = 0;
						// A通道（透明度）：固定为255（完全不透明）
						data[ stride + 3 ] = 255;
					}
				}

				// 使用像素数据创建数据纹理
				const gradientTexture = new THREE.DataTexture( 
					data,               // 像素数据数组
					100,                // 纹理宽度（像素）
					100,                // 纹理高度（像素）
					THREE.RGBAFormat    // 像素格式（RGBA四通道）
				);
				// 设置纹理过滤方式（放大和缩小都使用线性过滤，使渐变更平滑）
				gradientTexture.minFilter = THREE.LinearFilter;
				gradientTexture.magFilter = THREE.LinearFilter;
				// 标记纹理需要更新（将数据上传到GPU）
				gradientTexture.needsUpdate = true;

				// ------------------------------------------------------------------------
				// 3. 创建场景1和基础设置
				// ------------------------------------------------------------------------
				// 创建主场景对象
				scene1 = new THREE.Scene();
				// 设置场景名称（在导出时会保留此名称）
				scene1.name = '场景1';

				// 3.1 创建透视相机（模拟人眼视角，有近大远小的透视效果）
				camera = new THREE.PerspectiveCamera(
					45,                               // 视野角度（FOV，度）
					window.innerWidth / window.innerHeight, // 纵横比（宽高比）
					1,                                 // 近裁剪面（距离相机多近开始渲染）
					2000                               // 远裁剪面（距离相机多远停止渲染）
				);
				// 设置相机位置（X, Y, Z坐标）
				camera.position.set( 600, 400, 0 );
				// 设置相机名称
				camera.name = '透视相机';
				// 将相机添加到场景中（相机也是Object3D对象）
				scene1.add( camera );

				// 3.2 创建环境光（无方向，均匀照亮所有面）
				const ambientLight = new THREE.AmbientLight( 0xcccccc ); // 浅灰色光
				ambientLight.name = '环境光';
				scene1.add( ambientLight );

				// 3.3 创建定向光（有方向，产生阴影和明暗对比）
				const dirLight = new THREE.DirectionalLight( 
					0xffffff, // 白色光
					3         // 光照强度（默认是1）
				);
				// 设置光照目标位置
				dirLight.target.position.set( 0, 0, - 1 );
				// 将目标对象添加到光源（便于一起变换）
				dirLight.add( dirLight.target );
				// 设置光源看向的方向
				dirLight.lookAt( - 1, - 1, 0 );
				dirLight.name = '定向光';
				scene1.add( dirLight );

				// 3.4 创建网格辅助对象（地面参考网格）
				gridHelper = new THREE.GridHelper(
					2000,      // 网格尺寸（2000单位）
					20,        // 网格细分数量（20x20格）
					0xc1c1c1,  // 主网格线颜色（浅灰色）
					0x8d8d8d   // 次网格线颜色（深灰色）
				);
				// 将网格下移50单位（位于场景下方）
				gridHelper.position.y = - 50;
				gridHelper.name = '参考网格';
				scene1.add( gridHelper );

				// 3.5 创建坐标轴辅助对象（显示X/Y/Z轴方向）
				const axes = new THREE.AxesHelper( 500 ); // 轴长度500单位
				axes.name = '坐标轴';
				scene1.add( axes );

				// ------------------------------------------------------------------------
				// 4. 创建各种几何体和3D对象
				// ------------------------------------------------------------------------
				
				// 4.1 加载外部纹理图片（用于多个几何体）
				const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
				// 设置纹理重复模式（当UV坐标超过1时重复显示）
				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
				// 设置颜色空间（sRGB，符合显示器显示特性）
				mapGrid.colorSpace = THREE.SRGBColorSpace;

				// 4.2 二十面体（使用基础材质和纹理贴图）
				material = new THREE.MeshBasicMaterial( {
					color: 0xffffff,   // 材质基础颜色（白色）
					map: mapGrid       // 纹理贴图（UV网格图）
				} );
				// 创建二十面体几何体（半径75，细分级别0）
				object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 0 ), material );
				object.position.set( - 200, 0, 200 );
				object.name = '二十面体';
				scene1.add( object );

				// 4.3 八面体（线框模式，蓝色）
				material = new THREE.MeshBasicMaterial( {
					color: 0x0000ff,   // 蓝色
					wireframe: true    // 线框模式（只显示网格线）
				} );
				object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 1 ), material );
				object.position.set( 0, 0, 200 );
				object.name = '八面体';
				scene1.add( object );

				// 4.4 四面体（半透明红色）
				material = new THREE.MeshBasicMaterial( {
					color: 0xff0000,   // 红色
					transparent: true, // 启用透明度
					opacity: 0.5       // 不透明度50%
				} );
				object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
				object.position.set( 200, 0, 200 );
				object.name = '四面体';
				scene1.add( object );

				// 4.5 球体（使用标准材质，具有金属感和凹凸贴图）
				material = new THREE.MeshStandardMaterial( {
					color: 0xffff00,    // 黄色
					metalness: 0.5,     // 金属度（0-1，0为非金属，1为金属）
					roughness: 1.0,     // 粗糙度（0-1，0为光滑，1为粗糙）
					flatShading: true,  // 平面着色（每个面单独计算光照，有棱角感）
				} );
				// 应用之前创建的渐变纹理和凹凸贴图
				material.map = gradientTexture;  // 渐变贴图作为颜色贴图
				material.bumpMap = mapGrid;      // 网格纹理作为凹凸贴图（产生表面凹凸感）
				// 设置凹凸贴图强度（默认是1）
				material.bumpScale = 0.5;
				
				// 创建球体（半径70，宽度和高度细分各10段）
				sphere = new THREE.Mesh( new THREE.SphereGeometry( 70, 10, 10 ), material );
				sphere.position.set( 0, 0, 0 );
				sphere.name = '球体';
				scene1.add( sphere );

				// 4.6 圆柱体（平顶圆柱，锥形）
				material = new THREE.MeshStandardMaterial( {
					color: 0xff00ff,    // 紫色
					flatShading: true   // 平面着色
				} );
				object = new THREE.Mesh( new THREE.CylinderGeometry( 10, 80, 100 ), material );
				object.position.set( 200, 0, 0 );
				object.name = '圆锥柱';
				scene1.add( object );

				// 4.7 环面扭结（复杂的几何形状）
				material = new THREE.MeshStandardMaterial( {
					color: 0xff0000,    // 红色
					roughness: 1        // 完全粗糙
				} );
				object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 15, 40, 10 ), material );
				object.position.set( - 200, 0, 0 );
				object.name = '环面扭结';
				scene1.add( object );

				// 4.8 层次结构示例：父对象包含子对象
				// 加载木质纹理
				const mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
				material = new THREE.MeshStandardMaterial( { 
					map: mapWood,           // 木质纹理
					side: THREE.DoubleSide  // 双面渲染（内外都可见）
				} );

				// 父立方体
				object = new THREE.Mesh( new THREE.BoxGeometry( 40, 100, 100 ), material );
				object.position.set( - 200, 0, 400 );
				object.name = '父立方体';
				scene1.add( object );

				// 子立方体（附加到父立方体上，会继承父级的变换）
				object2 = new THREE.Mesh( new THREE.BoxGeometry( 40, 40, 40, 2, 2, 2 ), material );
				object2.position.set( 0, 0, 50 );
				object2.rotation.set( 0, 45, 0 ); // 旋转45度
				object2.name = '子立方体';
				object.add( object2 ); // 添加到父对象，不是场景

				// 4.9 组（Group）示例：将多个对象组织在一起
				const group1 = new THREE.Group();
				group1.name = '组1';
				scene1.add( group1 );

				// 子组
				const group2 = new THREE.Group();
				group2.name = '子组1';
				group2.position.set( 0, 50, 0 ); // 相对于父组偏移
				group1.add( group2 );

				// 组内的立方体
				object2 = new THREE.Mesh( new THREE.BoxGeometry( 30, 30, 30 ), material );
				object2.name = '组内立方体';
				object2.position.set( 0, 0, 400 );
				group2.add( object2 );

				// 4.10 线条示例（Line）：折线
				geometry = new THREE.BufferGeometry();
				let numPoints = 100;
				let positions = new Float32Array( numPoints * 3 );

				// 生成正弦波形状的顶点数据
				for ( let i = 0; i < numPoints; i ++ ) {
					positions[ i * 3 ] = i;                    // X坐标：递增
					positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20; // Y坐标：正弦波
					positions[ i * 3 + 2 ] = 0;               // Z坐标：固定为0
				}

				// 设置几何体的顶点属性
				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				// 创建线条对象（折线）
				object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
				object.position.set( - 50, 0, - 200 );
				object.name = '正弦线条';
				scene1.add( object );

				// 4.11 线条循环（LineLoop）：闭合多边形
				geometry = new THREE.BufferGeometry();
				numPoints = 5;
				const radius = 70;
				positions = new Float32Array( numPoints * 3 );

				// 生成正五边形的顶点（均匀分布在圆上）
				for ( let i = 0; i < numPoints; i ++ ) {
					const angle = i * Math.PI * 2 / numPoints; // 计算当前角度
					positions[ i * 3 ] = radius * Math.sin( angle );     // X坐标
					positions[ i * 3 + 1 ] = radius * Math.cos( angle ); // Y坐标
					positions[ i * 3 + 2 ] = 0;                         // Z坐标
				}

				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				// 创建线条循环对象（首尾相连）
				object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
				object.position.set( 0, 0, - 200 );
				object.name = '五边形';
				scene1.add( object );

				// 4.12 点云（Points）：大量点的集合
				numPoints = 100;
				const pointsArray = new Float32Array( numPoints * 3 );
				// 生成随机点位置
				for ( let i = 0; i < numPoints; i ++ ) {
					pointsArray[ 3 * i ] = - 50 + Math.random() * 100;     // X：-50到50
					pointsArray[ 3 * i + 1 ] = Math.random() * 100;        // Y：0到100
					pointsArray[ 3 * i + 2 ] = - 50 + Math.random() * 100; // Z：-50到50
				}

				const pointsGeo = new THREE.BufferGeometry();
				pointsGeo.setAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );

				// 点云材质，设置点的大小和颜色
				const pointsMaterial = new THREE.PointsMaterial( { 
					color: 0xffff00, // 黄色
					size: 5          // 点的大小（像素）
				} );
				
				// 创建点云对象
				const pointCloud = new THREE.Points( pointsGeo, pointsMaterial );
				pointCloud.name = '点云';
				pointCloud.position.set( - 200, 0, - 200 );
				scene1.add( pointCloud );

				// 4.13 正交相机（OrthographicCamera）
				// 正交相机没有透视效果，物体大小不随距离变化
				const height = 1000; // 视锥体高度
				const aspect = window.innerWidth / window.innerHeight; // 纵横比

				const cameraOrtho = new THREE.OrthographicCamera(
					- height * aspect, // 左边界
					height * aspect,   // 右边界
					height,            // 上边界
					- height,          // 下边界
					0,                 // 近裁剪面
					2000               // 远裁剪面
				);
				cameraOrtho.position.set( 600, 400, 0 );
				cameraOrtho.lookAt( 0, 0, 0 );
				scene1.add( cameraOrtho );
				cameraOrtho.name = '正交相机';

				// 使用兰伯特材质（对光照有反应，但无高光）
				material = new THREE.MeshLambertMaterial( {
					color: 0xffff00,   // 黄色
					side: THREE.DoubleSide // 双面渲染
				} );

				// 圆形几何体
				object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
				object.position.set( 200, 0, - 400 );
				object.name = '圆形';
				scene1.add( object );

				// 圆环几何体（环形）
				object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
				object.position.set( 0, 0, - 400 );
				object.name = '圆环';
				scene1.add( object );

				// 圆柱体（更多细分）
				object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
				object.position.set( - 200, 0, - 400 );
				object.name = '细分圆柱';
				scene1.add( object );

				// 旋转体（LatheGeometry）：通过旋转二维形状创建三维对象
				const lathePoints = [];
				// 生成旋转体的剖面点
				for ( let i = 0; i < 50; i ++ ) {
					lathePoints.push( new THREE.Vector2(
						Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, // X坐标（复杂的波形）
						( i - 5 ) * 2                                         // Y坐标（线性递增）
					) );
				}

				// 创建旋转体（类似花瓶形状）
				object = new THREE.Mesh( new THREE.LatheGeometry( lathePoints, 20 ), material );
				object.position.set( 200, 0, 400 );
				object.name = '旋转体';
				scene1.add( object );

				// 4.14 隐藏对象：用于测试onlyVisible导出选项
				material = new THREE.MeshBasicMaterial( {
					color: 0xff0000 // 红色
				} );
				object = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
				object.position.set( 0, 0, 0 );
				object.name = '隐藏立方体';
				object.visible = false; // 关键：设置为不可见
				scene1.add( object );

				// 4.15 加载外部GLTF模型（需要KHR_mesh_quantization扩展）
				// 这个模型使用了网格量化扩展，可以减小文件大小
				const loader = new GLTFLoader();
				loader.load( 'models/gltf/ShaderBall.glb', function ( gltf ) {
					// 加载成功回调
					model = gltf.scene; // 获取模型场景
					model.scale.setScalar( 50 ); // 缩放50倍
					model.position.set( 200, - 40, - 200 );
					scene1.add( model );
					model.name = 'ShaderBall模型';
				}, undefined, function ( error ) {
					// 加载失败回调
					console.error( '模型加载失败:', error );
				} );

				// 4.16 实例化网格（InstancedMesh）示例
				// 实例化允许大量相同几何体高效渲染，共享几何体和材质
				material = new THREE.MeshBasicMaterial( {
					color: 0xffffff, // 白色（颜色通过实例属性设置）
				} );
				
				// 创建实例化网格：50个实例，共享同一个立方体几何体
				object = new THREE.InstancedMesh( 
					new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 ), // 几何体
					material,                                     // 材质
					50                                            // 实例数量
				);
				
				const matrix = new THREE.Matrix4(); // 变换矩阵
				const color = new THREE.Color();    // 颜色对象
				
				// 为每个实例设置不同的变换矩阵和颜色
				for ( let i = 0; i < 50; i ++ ) {
					// 设置随机位置（-50到50范围内）
					matrix.setPosition( 
						Math.random() * 100 - 50, 
						Math.random() * 100 - 50, 
						Math.random() * 100 - 50 
					);
					// 为当前实例设置变换矩阵
					object.setMatrixAt( i, matrix );
					
					// 根据HSL颜色模型设置颜色（彩虹色渐变）
					// HSL: 色相(H)从0到1变化，饱和度(S)固定1，亮度(L)固定0.5
					object.setColorAt( i, color.setHSL( i / 50, 1, 0.5 ) );
				}
				
				// 注意：实例化网格需要手动更新
				object.instanceMatrix.needsUpdate = true;
				if ( object.instanceColor ) object.instanceColor.needsUpdate = true;
				
				object.position.set( 400, 0, 200 );
				object.name = '实例化立方体';
				scene1.add( object );

				// 4.17 创建场景2（第二个独立场景）
				scene2 = new THREE.Scene();
				object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
				object.position.set( 0, 0, 0 );
				object.name = '场景2立方体';
				scene2.name = '场景2';
				scene2.add( object );

				// ------------------------------------------------------------------------
				// 5. 设置WebGL渲染器
				// ------------------------------------------------------------------------
				renderer = new THREE.WebGLRenderer( { 
					antialias: true // 启用抗锯齿（边缘更平滑）
				} );
				
				// 设置设备像素比（适配高分辨率屏幕）
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环（替代requestAnimationFrame）
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射（ACES Filmic，电影级色调映射）
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置曝光度
				renderer.toneMappingExposure = 1;
				
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

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

				// ------------------------------------------------------------------------
				// 7. 加载使用压缩技术的模型（展示高级特性）
				// ------------------------------------------------------------------------
				// 创建KTX2加载器（用于Basis Universal压缩纹理）
				const ktx2Loader = new KTX2Loader()
					.setTranscoderPath( 'jsm/libs/basis/' )  // 设置转码器文件路径
					.detectSupport( renderer ); // 检测当前设备/浏览器对KTX2的支持情况
				
				// 创建GLTF加载器，设置基础路径
				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/' );
				
				// 配置加载器支持压缩技术
				gltfLoader.setKTX2Loader( ktx2Loader ); // 设置KTX2加载器处理压缩纹理
				gltfLoader.setMeshoptDecoder( MeshoptDecoder ); // 设置Meshopt解码器处理压缩网格
				
				// 加载咖啡垫模型（该模型使用了KTX2和Meshopt压缩）
				gltfLoader.load( 'coffeemat.glb', function ( gltf ) {
					// 加载成功回调
					gltf.scene.position.x = 400;
					gltf.scene.position.z = - 200;
					scene1.add( gltf.scene );
					coffeemat = gltf.scene; // 保存引用，便于单独导出
					coffeemat.name = '咖啡垫模型（压缩）';
				}, undefined, function ( error ) {
					// 加载失败回调
					console.error( '压缩模型加载失败:', error );
				} );

				// ------------------------------------------------------------------------
				// 8. 创建GUI控制面板
				// ------------------------------------------------------------------------
				const gui = new GUI();
				
				// 8.1 创建"设置"文件夹，包含导出参数
				let folder = gui.addFolder( '导出设置' );
				folder.add( params, 'trs' )
					.name( '使用TRS方式' )
				
				folder.add( params, 'onlyVisible' )
					.name( '仅导出可见对象' )
				
				folder.add( params, 'binary' )
					.name( '二进制格式(GLB)' )
				
				folder.add( params, 'maxTextureSize', 2, 8192 )
					.name( '最大纹理尺寸' )
					.step( 1 )

				// 8.2 创建"导出操作"文件夹，包含各种导出按钮
				folder = gui.addFolder( '导出操作' );
				folder.add( params, 'exportScene1' )
					.name( '导出场景1' )
				
				folder.add( params, 'exportScenes' )
					.name( '导出所有场景' )
				
				folder.add( params, 'exportSphere' )
					.name( '单独导出球体' )
				
				folder.add( params, 'exportModel' )
					.name( '导出ShaderBall模型' )
				
				folder.add( params, 'exportObjects' )
					.name( '导出球体和网格' )
				
				folder.add( params, 'exportSceneObject' )
					.name( '导出场景和对象' )
				
				folder.add( params, 'exportCompressedObject' )
					.name( '导出咖啡垫模型' )

				// 默认展开GUI面板
				gui.open();

			}

			// ============================================================================
			// 导出功能的具体实现函数
			// 这些函数都调用exportGLTF，但传递不同的参数
			// ============================================================================

			/** 
			 * 导出场景1 
			 * 演示如何导出整个场景
			 */
			function exportScene1() {
				exportGLTF( scene1 );
			}

			/** 
			 * 导出所有场景（场景1和场景2） 
			 * 演示如何导出多个场景（作为数组传递）
			 */
			function exportScenes() {
				exportGLTF( [ scene1, scene2 ] );
			}

			/** 
			 * 单独导出球体对象 
			 * 演示如何导出单个对象（不是整个场景）
			 */
			function exportSphere() {
				exportGLTF( sphere );
			}

			/** 
			 * 导出ShaderBall模型 
			 * 演示如何导出来自外部文件的模型
			 */
			function exportModel() {
				exportGLTF( model );
			}

			/** 
			 * 导出球体和参考网格 
			 * 演示如何导出多个对象的集合
			 */
			function exportObjects() {
				exportGLTF( [ sphere, gridHelper ] );
			}

			/** 
			 * 导出场景1和参考网格 
			 * 演示混合导出（场景+单独对象）
			 */
			function exportSceneObject() {
				exportGLTF( [ scene1, gridHelper ] );
			}

			/** 
			 * 导出咖啡垫模型（压缩模型） 
			 * 演示如何导出使用压缩技术加载的模型
			 */
			function exportCompressedObject() {
				exportGLTF( [ coffeemat ] );
			}

			// ============================================================================
			// 实用函数
			// ============================================================================

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

				// 更新透视相机的纵横比（保持正确比例）
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵（必须调用，否则渲染不正确）
				camera.updateProjectionMatrix();

				// 调整渲染器大小，匹配新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 每一帧都会调用此函数，用于更新场景和渲染
			 */
			function animate() {

				// 基于时间的动画参数（单位：秒）
				const timer = Date.now() * 0.0001; // 每10000毫秒（10秒）循环一次

				// 让相机绕Y轴旋转（圆形轨迹）
				// Math.cos(timer)和Math.sin(timer)产生圆形运动
				camera.position.x = Math.cos( timer ) * 800; // X坐标：800*cos(角度)
				camera.position.z = Math.sin( timer ) * 800; // Z坐标：800*sin(角度)
				// Y坐标保持不变（400），相机在固定高度环绕

				// 相机始终看向场景中心点(0,0,0)
				camera.lookAt( scene1.position );
				
				// 渲染场景（将3D场景绘制到2D画布上）
				renderer.render( scene1, camera );

			}

		</script>

	</body>
</html>