<!-- Three.js PLY导出器应用 - 功能描述与技术分析
🎯 总体功能概述
这是一个基于Three.js的WebGL三维应用，主要功能是展示如何将3D模型导出为PLY格式文件。应用创建了一个包含立方体、灯光和地面的3D场景，用户可以通过交互界面将立方体模型以不同格式（ASCII、二进制大端/小端）导出为PLY文件。

📋 核心功能模块
1. 三维场景渲染系统
场景搭建：创建完整的3D环境，包括天空背景、雾效、灯光系统

交互控制：通过轨道控制器实现鼠标/触摸屏对相机的旋转、缩放、平移

实时渲染：60fps的连续渲染，保持流畅的视觉体验

2. PLY格式导出功能
三种导出格式：

ASCII格式：纯文本，人类可读，适合调试

二进制大端格式：跨平台兼容，适合网络传输

二进制小端格式：PC平台优化，性能最好

完整数据导出：包括顶点坐标、面索引、顶点颜色等几何数据

3. 用户交互界面
GUI控制面板：提供三个导出按钮，用户一键操作

实时预览：可旋转、缩放查看要导出的3D模型

响应式设计：自适应不同屏幕尺寸和设备

4. 文件下载系统
无服务器下载：纯前端实现文件生成和下载

自动命名：导出文件自动命名并触发浏览器下载

🔧 主要技术点详解
1. Three.js核心架构
场景图（Scene Graph）系统
javascript
// 层次化的对象管理
Scene
├── HemisphereLight（环境光）
├── DirectionalLight（平行光）
├── PlaneGeometry（地面）
├── GridHelper（网格辅助线）
└── BoxGeometry（立方体-待导出对象）
渲染管线配置
透视相机：模拟人眼视角的3D投影

WebGL渲染器：硬件加速的3D图形渲染

阴影系统：基于Shadow Map的动态阴影

2. 模块化导入系统
ES6模块导入
javascript
// 使用Import Maps进行路径映射
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 避免全局污染，提高代码可维护性
3. PLY格式处理技术
PLY文件结构
text
ply
format ascii 1.0           # 或 binary_little_endian/big_endian
element vertex 8           # 8个顶点（立方体）
property float x
property float y
property float z
property uchar red         # 顶点颜色
property uchar green
property uchar blue
element face 12            # 12个三角形面（立方体6个面×2个三角形）
property list uchar int vertex_index
end_header
...数据部分...
顶点数据处理
javascript
// 顶点颜色生成算法：根据坐标值映射到颜色
// 正坐标 -> 灰色(0.5)，负坐标 -> 黑色(0)
// 这在导出的PLY文件中会保存为顶点颜色属性
4. 二进制数据处理
字节序（Endianness）处理
大端序（Big Endian）：最高有效字节在前，网络标准

小端序（Little Endian）：最低有效字节在前，x86/x64架构标准

javascript
// PLYExporter内部处理字节序
if ( binary && littleEndian ) {
    // 小端序数据写入
} else {
    // 大端序数据写入（默认）
}
5. 前端文件下载技术
Blob URL技术
javascript
// 内存中生成文件，避免服务器交互
const blob = new Blob([data], { type: mimeType });
const url = URL.createObjectURL(blob);
link.href = url;
link.download = filename;
link.click();  // 触发下载
MIME类型设置
text/plain：ASCII文本文件

application/octet-stream：通用二进制文件

6. 图形用户界面技术
lil-gui库集成
轻量级GUI库（仅5KB）

声明式API，简化控件创建

自动布局和样式

7. 性能优化技术
渲染优化
视锥体裁剪：只渲染可见物体

阴影相机优化：限制阴影计算范围

抗锯齿：提高视觉质量

内存管理
BufferAttribute：高效存储几何数据

Object3D层级：合理的场景组织

事件监听清理：防止内存泄漏

🚀 关键技术亮点
1. 纯前端3D数据处理
无需后端服务器，完全在浏览器中处理3D数据

利用WebGL和JavaScript进行高效几何计算

2. 跨格式兼容性
同时支持文本和二进制格式

支持不同字节序，确保跨平台兼容

3. 响应式设计
自动适应窗口大小变化

保持3D场景比例不变形

4. 用户体验优化
实时3D预览与交互

一键式导出操作

进度无需等待（本地即时处理）

📁 文件结构与数据流
text
用户操作
    ↓
GUI按钮点击
    ↓
调用对应导出函数
    ↓
PLYExporter处理3D数据
    ↓
生成文件内容（字符串或二进制）
    ↓
创建Blob对象
    ↓
生成临时URL
    ↓
触发浏览器下载
    ↓
保存为本地文件
🎨 视觉效果技术
光照模型
Phong着色：计算每个像素的光照

多光源系统：环境光+定向光模拟自然光照

材质系统
顶点颜色材质：支持每个顶点独立颜色

阴影材质：启用阴影投射和接收

后处理效果
雾效（Fog）：增强场景深度感

抗锯齿（Antialiasing）：平滑边缘锯齿

🔍 应用场景
3D模型预览工具：在线查看3D模型并导出

格式转换演示：展示不同PLY格式的区别

Three.js教学示例：学习3D Web开发和模型导出

原型验证工具：快速验证3D数据处理流程 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示为浏览器标签页标题 -->
		<title>Three.js WebGL - PLY格式导出器示例</title>
		<!-- 字符编码声明：指定文档使用UTF-8编码，支持多语言字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置（Viewport）：
			- width=device-width：视口宽度等于设备宽度
			- user-scalable=no：禁止用户缩放页面（固定比例）
			- minimum-scale=1.0：最小缩放比例为1.0（不缩小）
			- maximum-scale=1.0：最大缩放比例为1.0（不放大）
			这些设置确保在不同设备上保持一致的视觉体验
		-->
		<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="main.css"：样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			页面信息显示区域：
			- id="info"：为div元素设置唯一标识符，用于CSS样式或JavaScript操作
			- 包含一个指向three.js官网的超链接，target="_blank"表示在新标签页打开
			- rel="noopener"：安全属性，防止新打开的页面访问原页面的window对象
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL - PLY格式导出器演示
		</div>

		<!-- 
			模块导入映射（Import Maps）：
			- 现代JavaScript模块系统功能，用于定义模块路径别名
			- 允许在import语句中使用简短的模块名而不是完整路径
			- 提高代码可读性和可维护性
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module"：声明这是一个ES6模块，支持import/export语法
			- 模块化脚本默认在严格模式下运行
			- 模块有独立的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ==================== 模块导入部分 ====================
			
			// 导入Three.js核心库的所有功能
			// * as THREE：将所有导出内容打包到THREE命名空间对象中
			import * as THREE from 'three';
			
			// 从附加模块导入轨道控制器
			// OrbitControls：允许用户用鼠标/触摸屏旋转、缩放、平移相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 从附加模块导入PLY导出器
			// PLYExporter：将Three.js几何体导出为PLY（多边形文件格式）格式
			// PLY格式常用于存储3D扫描数据和点云数据
			import { PLYExporter } from 'three/addons/exporters/PLYExporter.js';
			
			// 导入轻量级GUI库
			// GUI：创建图形用户界面，用于参数调整和功能控制
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ==================== 全局变量声明 ====================
			
			// scene：Three.js场景对象，包含所有3D对象（网格、灯光、相机等）
			let scene;
			
			// camera：相机对象，定义用户查看3D场景的视角
			let camera;
			
			// renderer：WebGL渲染器，负责将3D场景绘制到HTML canvas元素上
			let renderer;
			
			// exporter：PLY导出器实例，用于将3D模型导出为文件
			let exporter;
			
			// mesh：主要的三维网格对象（这里是一个立方体），将被导出
			let mesh;

			// ==================== 导出参数配置对象 ====================
			
			// params：GUI控制面板的参数对象
			// 每个属性对应一个导出函数，将在GUI中创建对应的按钮
			const params = {
				// ASCII格式导出：纯文本格式，人类可读，但文件较大
				exportASCII: exportASCII,
				
				// 二进制大端格式导出：
				// - 二进制格式：文件较小，加载较快
				// - 大端（Big Endian）：高位字节在前，跨平台兼容性好
				// 常用于网络传输和某些处理器架构
				exportBinaryBigEndian: exportBinaryBigEndian,
				
				// 二进制小端格式导出：
				// - 小端（Little Endian）：低位字节在前
				// PC（x86/x64架构）常用格式，性能较好
				exportBinaryLittleEndian: exportBinaryLittleEndian
			};

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

			// ==================== 函数定义部分 ====================

			/**
			 * 初始化函数 - 应用的主要设置和配置
			 * 功能概述：
			 * 1. 创建并配置3D场景的基本组件（场景、相机、渲染器）
			 * 2. 设置场景环境（灯光、地面、雾效）
			 * 3. 创建立方体网格并设置其属性和材质
			 * 4. 添加用户交互控件（轨道控制器、GUI面板）
			 * 5. 设置窗口大小变化响应
			 * 
			 * 执行流程：从上到下依次创建和配置各个组件
			 */
			function init() {
				// ---------- 1. 相机创建与配置 ----------
				// 创建透视投影相机（Perspective Camera）
				// 参数说明：
				// - 45：垂直视野角度（FOV），单位度，45°提供自然的视角
				// - window.innerWidth / window.innerHeight：宽高比，保持画面比例
				// - 0.1：近裁剪面距离，距离相机0.1单位以内的物体不可见
				// - 100：远裁剪面距离，距离相机100单位以外的物体不可见
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
				
				// 设置相机初始位置
				// 参数：x, y, z坐标
				// (4, 2, 4)：从右上方俯视场景中心
				camera.position.set(4, 2, 4);

				// ---------- 2. 场景创建与配置 ----------
				// 创建主场景对象，所有3D对象都将添加到此场景中
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用十六进制颜色值：0xa0a0a0表示浅灰色
				scene.background = new THREE.Color(0xa0a0a0);
				
				// 添加雾效（Fog），增强场景深度感
				// 参数说明：
				// - 0xa0a0a0：雾的颜色，与背景色相同
				// - 4：近雾距离，距离相机4单位开始出现雾效
				// - 20：远雾距离，距离相机20单位完全被雾覆盖
				scene.fog = new THREE.Fog(0xa0a0a0, 4, 20);

				// ---------- 3. 导出器初始化 ----------
				// 创建PLY导出器实例，准备导出3D模型
				exporter = new PLYExporter();

				// ---------- 4. 光照系统设置 ----------
				
				// 创建半球光（Hemisphere Light）
				// 模拟环境光照（天空光和地面反射光）
				// 参数说明：
				// - 0xffffff：天空颜色（白色）
				// - 0x444444：地面颜色（深灰色）
				// - 3：光照强度，值越大越亮
				const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3);
				// 设置光源位置：在场景正上方20单位处
				hemiLight.position.set(0, 20, 0);
				// 将光源添加到场景中
				scene.add(hemiLight);

				// 创建平行光（Directional Light）
				// 模拟太阳光，所有光线平行照射
				// 参数说明：
				// - 0xffffff：白光
				// - 3：光照强度
				const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
				// 设置光源位置：在场景上方偏前的位置
				directionalLight.position.set(0, 20, 10);
				// 启用阴影投射，使物体能产生阴影
				directionalLight.castShadow = true;
				
				// 配置阴影相机的视锥体（Frustum）范围
				// 定义阴影计算区域，优化性能
				// top/bottom/left/right：定义阴影相机的边界
				directionalLight.shadow.camera.top = 2;
				directionalLight.shadow.camera.bottom = -2;
				directionalLight.shadow.camera.left = -2;
				directionalLight.shadow.camera.right = 2;
				// 将平行光添加到场景中
				scene.add(directionalLight);

				// ---------- 5. 地面和辅助网格 ----------
				
				// 创建地面平面
				// 使用平面几何体（PlaneGeometry）
				// 参数：宽度40单位，高度40单位
				const ground = new THREE.Mesh(
					// 几何体：定义形状
					new THREE.PlaneGeometry(40, 40),
					// 材质：定义外观
					new THREE.MeshPhongMaterial({ 
						color: 0xcbcbcb,      // 浅灰色
						depthWrite: false     // 禁用深度写入，防止地面影响其他物体的深度测试
					})
				);
				// 旋转平面：默认平面是垂直的，需要旋转-90度使其水平
				// Math.PI等于180度，Math.PI/2等于90度
				ground.rotation.x = -Math.PI / 2;
				// 使地面能够接收其他物体投射的阴影
				ground.receiveShadow = true;
				// 将地面添加到场景
				scene.add(ground);

				// 创建网格辅助线（Grid Helper）
				// 帮助判断物体位置和场景尺度
				// 参数说明：
				// - 40：网格总大小（40x40单位）
				// - 20：网格细分数量（20x20个格子）
				// - 0x000000：主网格线颜色（黑色）
				// - 0x000000：次网格线颜色（黑色）
				const grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000);
				// 设置网格材质透明度为20%，使其半透明
				grid.material.opacity = 0.2;
				// 启用材质透明属性
				grid.material.transparent = true;
				// 将网格添加到场景
				scene.add(grid);

				// ---------- 6. 创建可导出的立方体网格 ----------
				
				// 创建立方体几何体（Box Geometry）
				// 默认尺寸：1x1x1单位
				const geometry = new THREE.BoxGeometry();
				
				// 创建Phong材质（模拟光滑表面光照）
				// vertexColors: true 启用顶点颜色，每个顶点可以有不同的颜色
				const material = new THREE.MeshPhongMaterial({ vertexColors: true });

				// 设置顶点颜色：根据顶点位置坐标值
				// 获取顶点位置属性数组的副本（不修改原始数据）
				// geometry.getAttribute('position').array：获取所有顶点的x,y,z坐标
				const colors = geometry.getAttribute('position').array.slice();
				
				// 遍历所有顶点数据（每3个值代表一个顶点的x,y,z坐标）
				// colors.length：顶点坐标值的总数（顶点数×3）
				for (let i = 0, l = colors.length; i < l; i++) {
					// 根据坐标值设置颜色：
					// - 坐标值 > 0：设置为0.5（中等灰色）
					// - 坐标值 <= 0：设置为0（黑色）
					// 这样立方体不同面的顶点会有不同的颜色
					if (colors[i] > 0) colors[i] = 0.5;
					else colors[i] = 0;
				}
				
				// 将颜色数据设置为几何体的颜色属性
				// BufferAttribute参数：
				// - colors：颜色数据数组
				// - 3：每个顶点需要的数值数量（r,g,b三个颜色分量）
				// - false：不进行归一化（值范围0-1，已经是归一化的）
				geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3, false));

				// 使用带顶点颜色的几何体和材质创建立方体网格
				mesh = new THREE.Mesh(geometry, material);
				// 启用阴影投射：立方体可以在其他物体上产生阴影
				mesh.castShadow = true;
				// 设置立方体位置：y轴上移0.5单位，使其在地面上方
				mesh.position.y = 0.5;
				// 将立方体添加到场景
				scene.add(mesh);

				// ---------- 7. 渲染器创建与配置 ----------
				
				// 创建WebGL渲染器
				// antialias: true 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比，适应高分辨率屏幕（如Retina显示屏）
				// window.devicePixelRatio：设备物理像素与CSS像素的比例
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了旧的requestAnimationFrame方法
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 启用阴影映射，使场景中的阴影生效
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的canvas元素（即3D画布）添加到HTML文档body中
				document.body.appendChild(renderer.domElement);

				// ---------- 8. 用户交互控制 ----------
				
				// 创建轨道控制器（Orbit Controls）
				// 参数：
				// - camera：要控制的相机对象
				// - renderer.domElement：事件监听的DOM元素（canvas）
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制器的目标点（旋转中心）
				// 设置为立方体的中心位置(0, 0.5, 0)
				controls.target.set(0, 0.5, 0);
				
				// 更新控制器状态，应用初始设置
				controls.update();

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

				// ---------- 10. GUI控制面板创建 ----------
				
				// 创建GUI实例
				const gui = new GUI();
				
				// 在GUI中添加三个导出按钮
				// 每个按钮绑定到params对象中的相应函数
				
				// ASCII格式导出按钮
				gui.add(params, 'exportASCII')
				   .name('导出PLY（ASCII格式）');  // 设置按钮显示文本
				
				// 二进制大端格式导出按钮
				gui.add(params, 'exportBinaryBigEndian')
				   .name('导出PLY（二进制大端格式）');
				
				// 二进制小端格式导出按钮
				gui.add(params, 'exportBinaryLittleEndian')
				   .name('导出PLY（二进制小端格式）');
				
				// 默认展开GUI面板
				gui.open();
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 功能：当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
			 * 确保3D场景始终正确显示，不会变形
			 */
			function onWindowResize() {
				// 更新相机的宽高比为新窗口尺寸的比例
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 必须在更改相机参数后调用此方法，使更改生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸为新窗口尺寸
				// 这将自动调整canvas元素的大小
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 功能：每一帧被渲染器自动调用
			 * 这是Three.js应用的核心循环，用于连续更新和渲染场景
			 * 帧率通常为60fps（每秒60帧）
			 */
			function animate() {
				// 渲染场景：将3D场景绘制到2D canvas上
				// 参数：
				// - scene：要渲染的场景对象
				// - camera：用于渲染的相机视角
				renderer.render(scene, camera);
			}

			/**
			 * 导出为ASCII格式PLY文件
			 * 功能：将立方体网格导出为ASCII（文本）格式的PLY文件
			 * 特点：
			 * - 文件内容为纯文本，可以用文本编辑器打开查看
			 * - 包含顶点坐标、面索引、顶点颜色等信息
			 * - 文件体积较大，但兼容性最好
			 * 
			 * PLY文件结构：
			 * 1. 文件头（定义数据格式和结构）
			 * 2. 顶点数据（x,y,z坐标，r,g,b颜色等）
			 * 3. 面数据（顶点索引，定义三角形面片）
			 */
			function exportASCII() {
				// 调用PLY导出器的parse方法
				// 参数：
				// - mesh：要导出的网格对象
				// - 回调函数：导出完成后的处理函数
				exporter.parse(mesh, function (result) {
					// result：导出的PLY文件内容（字符串格式）
					// 调用saveString函数将内容保存为文件
					saveString(result, '立方体.ply');  // 文件名改为中文
				});
				// 注意：这里没有指定选项，默认使用ASCII格式
			}

			/**
			 * 导出为二进制大端格式PLY文件
			 * 功能：将立方体网格导出为二进制格式的PLY文件（大端字节序）
			 * 特点：
			 * - 文件为二进制格式，不能用文本编辑器直接查看
			 * - 文件体积小，加载速度快
			 * - 大端字节序：高位字节在前，网络传输标准格式
			 */
			function exportBinaryBigEndian() {
				exporter.parse(mesh, function (result) {
					// result：导出的PLY文件内容（ArrayBuffer二进制格式）
					saveArrayBuffer(result, '立方体_二进制大端.ply');
				}, { 
					// 导出选项：
					binary: true  // 启用二进制模式，默认使用大端字节序
				});
			}

			/**
			 * 导出为二进制小端格式PLY文件
			 * 功能：将立方体网格导出为二进制格式的PLY文件（小端字节序）
			 * 特点：
			 * - 小端字节序：低位字节在前，x86/x64处理器原生格式
			 * - 在PC平台上处理速度更快
			 */
			function exportBinaryLittleEndian() {
				exporter.parse(mesh, function (result) {
					saveArrayBuffer(result, '立方体_二进制小端.ply');
				}, { 
					binary: true,       // 启用二进制模式
					littleEndian: true  // 使用小端字节序
				});
			}

			// ==================== 文件下载功能 ====================
			
			// 创建隐藏的<a>标签元素，用于触发文件下载
			// 这是一种常见的实现文件下载的技术
			const link = document.createElement('a');
			// 隐藏链接，不在页面上显示
			link.style.display = 'none';
			// 将链接添加到文档body中
			document.body.appendChild(link);

			/**
			 * 通用文件保存函数
			 * 功能：通过创建临时URL触发浏览器下载
			 * 
			 * 工作原理：
			 * 1. 使用URL.createObjectURL()创建指向内存中Blob对象的URL
			 * 2. 设置<a>标签的href属性为该URL
			 * 3. 设置download属性指定下载文件名
			 * 4. 模拟点击<a>标签触发下载
			 * 5. 浏览器自动处理文件下载
			 * 
			 * @param {Blob} blob - 要保存的文件数据，Blob（二进制大对象）类型
			 * @param {string} filename - 保存的文件名，用户下载时将使用此名称
			 */
			function save(blob, filename) {
				// 创建指向Blob对象的临时URL
				// 这个URL只在当前文档会话中有效
				link.href = URL.createObjectURL(blob);
				
				// 设置download属性，告诉浏览器这是一个下载链接
				// 而不是普通的导航链接
				link.download = filename;
				
				// 模拟鼠标点击事件，触发浏览器下载
				link.click();
				
				// 注意：这里没有释放创建的Object URL
				// 在实际应用中，可以考虑在下载完成后调用URL.revokeObjectURL()释放内存
			}

			/**
			 * 保存文本文件
			 * 功能：将文本字符串保存为文件
			 * 
			 * @param {string} text - 要保存的文本内容（如PLY ASCII格式内容）
			 * @param {string} filename - 保存的文件名
			 */
			function saveString(text, filename) {
				// 创建Blob对象：
				// - [text]：将文本转换为数组（Blob构造函数接受数组参数）
				// - { type: 'text/plain' }：设置MIME类型为纯文本
				save(new Blob([text], { type: 'text/plain' }), filename);
			}

			/**
			 * 保存二进制文件
			 * 功能：将二进制数据保存为文件
			 * 
			 * @param {ArrayBuffer} buffer - 要保存的二进制数据
			 * @param {string} filename - 保存的文件名
			 */
			function saveArrayBuffer(buffer, filename) {
				// 创建Blob对象：
				// - [buffer]：将ArrayBuffer包装在数组中
				// - { type: 'application/octet-stream' }：设置MIME类型为通用二进制流
				save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
			}

			// ==================== 应用结束 ====================
			
			// 注意：代码执行到这里，初始化已经完成
			// 但动画循环（animate函数）会持续运行，直到页面关闭
			// 用户可以通过GUI按钮触发导出功能
			
		</script>
		<!-- 
			脚本执行流程总结：
			1. 导入所有必要的模块
			2. 声明全局变量
			3. 定义配置对象
			4. 调用init()初始化应用
			5. init()函数依次创建和配置所有组件
			6. 设置事件监听和GUI
			7. 动画循环开始运行
			8. 用户交互触发导出功能时，调用相应函数
			9. 导出函数调用PLYExporter，然后通过隐藏的<a>标签触发下载
		-->
	</body>
</html>