<!-- Three.js WebGPU 宽线渲染演示 - 功能与技术点详解
一、核心功能概述
1. 主功能：3D宽线渲染
宽线（Fat Lines）渲染：与传统WebGL线条（固定1像素宽度）不同，此演示展示可变宽度的3D线条渲染，线条宽度可在1-10个单位间调节

双模式对比：同时实现两种线条渲染技术：

WebGPU Line2：新型宽线渲染技术，支持高质量抗锯齿

传统Line：标准线条渲染，用于技术对比

2. 视觉效果特性
彩虹渐变曲线：基于HSL色彩空间生成色彩渐变的3D曲线

3D希尔伯特曲线：使用空间填充算法生成复杂的三维几何形状

画中画（PiP）渲染：主场景透明背景 + 小视口灰色背景的双重视角展示

交互式参数调整：实时调节线条外观的所有参数

3. 用户交互功能
3D场景控制：鼠标拖拽旋转、滚轮缩放、平移操作

实时参数调节：通过GUI面板调整所有渲染参数

A/B对比：随时切换两种线条渲染技术

性能监控：实时显示帧率（FPS）和渲染性能

二、主要技术点详解
1. WebGPU渲染技术
javascript
// 核心：使用Three.js的WebGPU后端
renderer = new THREE.WebGPURenderer({ antialias: true });
现代图形API：替代WebGL的新一代图形接口

性能优势：更好的多线程支持、更低的CPU开销

功能增强：原生支持计算着色器、存储缓冲区等高级特性

2. TSL（Three.js Shader Language）
javascript
import { color } from 'three/tsl';
backgroundNode = color(0x222222);
着色器编程新范式：在JavaScript中编写着色器代码

节点化设计：通过连接节点构建着色器图

类型安全：编译时类型检查和优化

3. 宽线渲染实现
javascript
// 关键组件：Line2 + Line2NodeMaterial
line = new Line2(geometry, matLine);
matLine = new THREE.Line2NodeMaterial({
    linewidth: 5,           // 可调节线宽
    vertexColors: true,     // 顶点颜色支持
    dashed: false,          // 虚线功能
    alphaToCoverage: true   // 高级抗锯齿
});
几何体扩展：LineGeometry专为宽线优化，包含额外数据

材质系统：Line2NodeMaterial支持复杂线条效果

抗锯齿技术：Alpha-to-coverage实现高质量边缘平滑

4. 3D曲线生成算法
javascript
// 希尔伯特曲线生成
const points = GeometryUtils.hilbert3D(center, size, iterations, ...axes);

// Catmull-Rom曲线插值
const spline = new THREE.CatmullRomCurve3(points);
希尔伯特曲线：空间填充曲线，创建有趣的3D形状

曲线平滑：Catmull-Rom样条插值，生成平滑路径

顶点颜色渐变：基于曲线参数t的HSL颜色映射

5. 画中画渲染技术
javascript
// 关键技术：视口和裁剪测试
renderer.setScissorTest(true);
renderer.setScissor(x, y, width, height);
renderer.setViewport(x, y, width, height);
renderer.clearDepth();  // 关键：清除深度缓冲区
多相机渲染：同一场景用两个不同相机渲染

视口管理：精确控制渲染区域

深度缓冲区处理：确保小视口渲染在顶层

背景分离：主场景透明，小视口有背景色

6. 虚线效果实现
javascript
// 虚线参数控制
matLine.dashed = true;
matLine.dashSize = 1;    // 虚线片段长度
matLine.gapSize = 1;     // 间隔长度
matLine.scale = 1;       // 整体缩放
matLine.dashOffset = 0;  // 起始偏移
基于距离的着色：使用computeLineDistances()计算线距离

参数化控制：所有虚线参数可实时调整

双材质同步：WebGPU和传统线条保持相同虚线效果

7. 交互控制系统
javascript
// 轨道控制器
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;  // 惯性效果

// GUI控制面板
gui = new GUI();
gui.add(param, '线宽', 1, 10).onChange(updateLineWidth);
惯性控制：模拟物理运动的相机控制

参数绑定：GUI控件直接绑定到渲染参数

实时反馈：参数修改立即反映在渲染结果中

8. 性能优化技术
javascript
// 避免重复创建对象
const point = new THREE.Vector3();
const lineColor = new THREE.Color();

// 资源生命周期管理
window.addEventListener('beforeunload', cleanupResources);
对象复用：避免在循环中频繁创建对象

资源清理：页面卸载时正确释放GPU资源

内存管理：及时处理不再需要的几何体和材质

9. 响应式设计
javascript
// 窗口大小变化处理
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应布局：自动适应不同屏幕尺寸

比例保持：相机宽高比动态调整

像素比处理：支持高DPI显示设备

三、技术架构亮点
1. 模块化设计
text
应用结构：
├── 初始化模块 (init)
├── 渲染循环模块 (animate)
├── 事件处理模块 (resize, GUI callbacks)
├── 资源管理模块 (cleanup)
└── 工具函数模块
2. 可扩展性
易于添加新效果：基于TSL的材质系统便于扩展

支持多种线条类型：框架已支持实线、虚线，可扩展其他模式

GUI系统可扩展：轻松添加新的控制参数

3. 错误处理与健壮性
兼容性检查：检测WebGPU支持情况

优雅降级：提供用户友好的错误提示

资源泄漏防护：完整的清理机制

四、应用场景
1. 数据可视化
科学数据3D轨迹展示

网络拓扑图可视化

时间序列数据的空间表示

2. CAD与工程绘图
技术图纸的3D预览

建筑信息模型（BIM）可视化

机械设计线条渲染

3. 游戏与创意编程
艺术线条生成

动态轨迹可视化

特效线条渲染

4. 教育与演示
数学曲线可视化

图形学教学示例

技术对比演示

五、技术优势总结
性能卓越：利用WebGPU的现代图形架构

质量优秀：支持高质量抗锯齿和宽线渲染

交互丰富：完整的参数控制和3D交互

兼容性好：优雅的错误处理和降级策略

易于扩展：模块化设计便于功能扩展

用户友好：完整的中文界面和直观控制 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元信息定义 -->
		<!-- 标题：显示页面主要功能，中文翻译为"Three.js WebGPU - 宽线渲染" -->
		<title>Three.js WebGPU - 宽线渲染演示</title>
		<!-- 字符编码设置：UTF-8确保支持中文等Unicode字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：控制移动端显示效果 -->
		<!-- width=device-width：宽度等于设备宽度 -->
		<!-- user-scalable=no：禁止用户手动缩放 -->
		<!-- minimum-scale=1.0, 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>
		<!-- 3D场景渲染容器：WebGPU渲染器会将canvas元素插入到这里 -->
		<div id="container"></div>
		
		<!-- 页面底部信息栏：显示Three.js链接和当前功能描述 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> 
			- WebGPU宽线渲染技术演示<br>
			<small>使用Three.js WebGPU渲染器和TSL着色器语言</small>
		</div>

		<!-- 模块导入映射表：定义JavaScript模块的路径别名 -->
		<!-- 作用：简化模块导入语句，避免使用相对路径 -->
		<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版本）
			// * as THREE：将整个模块作为THREE对象导入，包含所有Three.js类和方法
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入color函数：用于在着色器中创建颜色节点
			// TSL是Three.js的着色器语言，允许在JavaScript中编写着色器代码
			import { color } from 'three/tsl';

			// 导入性能统计模块：显示FPS、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入GUI控制库：lil-gui，用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入轨道控制器：允许用户用鼠标拖拽、缩放旋转相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入WebGPU专用的Line2类：支持宽线渲染的线条对象
			// 与传统Line不同，Line2支持可调节宽度的线条（fat lines）
			import { Line2 } from 'three/addons/lines/webgpu/Line2.js';
			
			// 导入LineGeometry类：专门为宽线优化的几何体
			import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
			
			// 导入几何体工具集：包含各种几何体生成和操作函数
			// * as GeometryUtils：导入所有工具函数
			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';

			// ========== 全局变量声明部分 ==========
			
			// 渲染相关变量
			let line,          // WebGPU宽线对象（Line2实例）
			    renderer,      // WebGPU渲染器实例
			    scene,         // 场景对象，包含所有3D对象
			    camera,        // 主相机（透视相机）
			    camera2,       // 小视口相机（用于画中画效果）
			    controls,      // 轨道控制器实例
			    backgroundNode; // TSL颜色节点（用于小视口背景）
			
			// 线条相关变量
			let line1;         // 传统线条对象（用于对比）
			
			// 材质相关变量
			let matLine,       // WebGPU宽线材质（Line2NodeMaterial）
			    matLineBasic,  // 基础线条材质（传统LineBasicNodeMaterial）
			    matLineDashed; // 虚线材质（传统LineDashedNodeMaterial）
			
			// UI相关变量
			let stats,         // 性能统计对象
			    gui;           // GUI控制面板对象
			
			// 小视口尺寸变量
			let insetWidth,    // 小视口宽度
			    insetHeight;   // 小视口高度

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

			/**
			 * 主初始化函数
			 * 职责：初始化所有Three.js组件、创建场景、设置事件监听器
			 */
			function init() {
				// ---------- 1. 初始化WebGPU渲染器 ----------
				// 创建WebGPURenderer实例，开启抗锯齿
				renderer = new THREE.WebGPURenderer({ antialias: true });
				// 设置设备像素比：确保在高DPI屏幕上的清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置清除颜色：黑色，完全透明（alpha=0）
				renderer.setClearColor(0x000000, 0.0);
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数：每一帧都会调用animate函数
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到body中
				document.body.appendChild(renderer.domElement);

				// ---------- 2. 创建场景 ----------
				// Scene对象是3D对象的容器，管理所有要渲染的物体
				scene = new THREE.Scene();

				// ---------- 3. 创建相机 ----------
				// 创建主透视相机（PerspectiveCamera）
				// 参数说明：40-视野角度（FOV），宽高比，近裁剪面，远裁剪面
				camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
				// 设置相机初始位置：X轴-40，Y轴0，Z轴60
				camera.position.set(-40, 0, 60);

				// 创建小视口相机（用于画中画效果）
				// 初始宽高比设为1（正方形），后续会根据窗口大小调整
				camera2 = new THREE.PerspectiveCamera(40, 1, 1, 1000);
				// 复制主相机的位置，确保两者视角一致
				camera2.position.copy(camera.position);

				// ---------- 4. 创建轨道控制器 ----------
				// OrbitControls允许用户通过鼠标交互控制相机
				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true;      // 启用阻尼效果：移动有惯性，更自然
				controls.dampingFactor = 0.05;      // 阻尼系数（默认值）
				controls.minDistance = 10;          // 最小缩放距离：相机不能比这个更接近目标
				controls.maxDistance = 500;         // 最大缩放距离：相机不能比这个更远离目标
				controls.enablePan = true;          // 启用平移（默认开启）
				controls.autoRotate = false;        // 禁用自动旋转（默认关闭）

				// ---------- 5. 创建TSL背景节点 ----------
				// 使用TSL的color函数创建深灰色背景节点（#222222）
				// 这个节点将用于小视口的背景，区别于主场景的透明背景
				backgroundNode = color(0x222222);

				// ---------- 6. 生成线条数据 ----------
				// 6.1 创建数据数组
				const positions = []; // 存储顶点位置数据 [x1,y1,z1, x2,y2,z2, ...]
				const colors = [];    // 存储顶点颜色数据 [r1,g1,b1, r2,g2,b2, ...]

				// 6.2 生成3D希尔伯特曲线点集
				// 希尔伯特曲线是空间填充曲线，用于创建有趣的3D形状
				// 参数说明：
				// - 中心点 (0,0,0)
				// - 边长 20.0
				// - 迭代次数 1
				// - 轴索引 0,1,2,3,4,5,6,7（定义曲线方向）
				const points = GeometryUtils.hilbert3D(
					new THREE.Vector3(0, 0, 0), 20.0, 1, 
					0, 1, 2, 3, 4, 5, 6, 7
				);

				// 6.3 创建Catmull-Rom样条曲线
				// 将离散的希尔伯特点连接成平滑曲线
				// Catmull-Rom曲线通过所有控制点，适合创建平滑路径
				const spline = new THREE.CatmullRomCurve3(points);
				
				// 6.4 计算曲线分段数
				// 每个原始点生成12个分段点，确保曲线足够平滑
				const divisions = Math.round(12 * points.length);
				
				// 6.5 临时变量（避免重复创建对象）
				const point = new THREE.Vector3();     // 用于存储曲线上的点
				const lineColor = new THREE.Color();   // 用于计算颜色

				// 6.6 遍历曲线，生成顶点数据
				for (let i = 0, l = divisions; i < l; i++) {
					// 计算归一化的曲线参数 t ∈ [0, 1]
					const t = i / l;

					// 获取曲线上t位置的点坐标
					spline.getPoint(t, point);
					// 将点坐标添加到positions数组
					positions.push(point.x, point.y, point.z);

					// 根据t值计算HSL颜色（创建彩虹渐变效果）
					// HSL参数：色相(t), 饱和度(1.0), 亮度(0.5)
					// THREE.SRGBColorSpace：使用sRGB颜色空间（标准显示色彩）
					lineColor.setHSL(t, 1.0, 0.5, THREE.SRGBColorSpace);
					// 将颜色值添加到colors数组
					colors.push(lineColor.r, lineColor.g, lineColor.b);
				}

				// ---------- 7. 创建WebGPU宽线对象 ----------
				// 7.1 创建LineGeometry（专为宽线优化的几何体）
				const geometry = new LineGeometry();
				// 设置顶点位置数据（浮点数组）
				geometry.setPositions(positions);
				// 设置顶点颜色数据（浮点数组）
				geometry.setColors(colors);

				// 7.2 创建Line2NodeMaterial（WebGPU宽线材质）
				matLine = new THREE.Line2NodeMaterial({
					color: 0xffffff,           // 基础颜色（白色，但会被顶点颜色覆盖）
					linewidth: 5,              // 线宽：5个单位（世界单位或像素）
					vertexColors: true,        // 启用顶点颜色：使用colors数组中的颜色
					dashed: false,             // 是否虚线：初始为实线
					alphaToCoverage: true,     // Alpha-to-coverage：改善透明边缘的抗锯齿
					worldUnits: false,         // 线宽单位：false=像素单位，true=世界单位
					transparent: false,        // 是否透明：false（不透明）
					depthTest: true,           // 深度测试：启用（正确处理遮挡）
					depthWrite: true           // 深度写入：启用
				});

				// 7.3 创建Line2对象（WebGPU宽线）
				line = new Line2(geometry, matLine);
				// 计算线距离：用于虚线效果和距离相关的着色
				line.computeLineDistances();
				// 设置缩放：无缩放
				line.scale.set(1, 1, 1);
				// 将线条添加到场景中
				scene.add(line);

				// ---------- 8. 创建传统线条对象（用于对比） ----------
				// 8.1 创建BufferGeometry（传统几何体）
				const geo = new THREE.BufferGeometry();
				// 设置position属性（顶点位置）
				geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
				// 设置color属性（顶点颜色）
				geo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

				// 8.2 创建基础线条材质
				matLineBasic = new THREE.LineBasicNodeMaterial({ 
					vertexColors: true,  // 启用顶点颜色
					linewidth: 1         // 线宽（传统材质线宽限制较大）
				});
				
				// 8.3 创建虚线材质
				matLineDashed = new THREE.LineDashedNodeMaterial({ 
					vertexColors: true,  // 启用顶点颜色
					scale: 2,            // 虚线缩放因子
					dashSize: 1,         // 虚线片段长度
					gapSize: 1,          // 间隔长度
					dashOffset: 0        // 虚线偏移量
				});

				// 8.4 创建传统线条对象
				line1 = new THREE.Line(geo, matLineBasic);
				// 计算线距离（用于虚线）
				line1.computeLineDistances();
				// 初始状态：隐藏传统线条，显示WebGPU宽线
				line1.visible = false;
				// 将传统线条添加到场景
				scene.add(line1);

				// ---------- 9. 设置事件监听器 ----------
				// 监听窗口大小变化事件，确保响应式布局
				window.addEventListener('resize', onWindowResize);
				// 立即调用一次，初始化尺寸
				onWindowResize();

				// ---------- 10. 初始化性能统计 ----------
				// 创建Stats.js实例
				stats = new Stats();
				// Stats.js默认显示FPS（帧率）
				// 可以通过stats.showPanel(0-2)切换显示：0=FPS, 1=MS（渲染时间）, 2=MB（内存）
				document.body.appendChild(stats.dom);

				// ---------- 11. 初始化GUI控制面板 ----------
				initGui();
			}

			/**
			 * 窗口大小变化处理函数
			 * 职责：调整渲染器、相机和视口尺寸，保持正确显示
			 */
			function onWindowResize() {
				// 1. 更新主相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用）
				camera.updateProjectionMatrix();

				// 2. 更新渲染器尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 3. 计算小视口尺寸
				// 小视口为正方形，占窗口高度的1/4
				insetWidth = window.innerHeight / 4;
				insetHeight = window.innerHeight / 4;

				// 4. 更新小视口相机
				camera2.aspect = insetWidth / insetHeight;
				camera2.updateProjectionMatrix();
				
				// 5. 更新渲染器像素比（如果设备像素比变化）
				renderer.setPixelRatio(window.devicePixelRatio);
			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用，负责更新和渲染场景
			 * @param {number} time - 自页面加载以来的时间（毫秒），可用于基于时间的动画
			 * @param {number} frame - 帧对象（WebXR中常用）
			 */
			function animate(time, frame) {
				// 1. 更新性能统计显示
				stats.update();

				// ========== 渲染主场景 ==========
				
				// 2. 设置主场景清除颜色（透明）
				renderer.setClearColor(0x000000, 0);
				
				// 3. 设置主视口：整个窗口
				renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
				
				// 4. 更新轨道控制器（处理鼠标/触摸输入）
				controls.update();
				
				// 5. 启用自动清除：渲染前清除颜色和深度缓冲区
				renderer.autoClear = true;
				
				// 6. 禁用主场景背景（透明）
				scene.backgroundNode = null;
				
				// 7. 渲染主场景
				renderer.render(scene, camera);

				// ========== 渲染小视口（画中画） ==========
				
				// 8. 计算小视口位置：右下角，距离底部20像素
				const posY = window.innerHeight - insetHeight - 20;

				// 9. 清除深度缓冲区（关键步骤！）
				// 确保小视口渲染在主场景之上，不受主场景深度影响
				renderer.clearDepth();

				// 10. 启用裁剪测试（Scissor Test）
				// 限制渲染区域，只在小视口范围内绘制
				renderer.setScissorTest(true);
				// 设置裁剪区域：左上角(20, posY)，宽高为insetWidth×insetHeight
				renderer.setScissor(20, posY, insetWidth, insetHeight);
				// 设置视口：与裁剪区域一致
				renderer.setViewport(20, posY, insetWidth, insetHeight);

				// 11. 同步小视口相机与主相机
				// 确保两者视角完全相同
				camera2.position.copy(camera.position);
				camera2.quaternion.copy(camera.quaternion);

				// 12. 禁用自动清除
				// 保留主场景内容，只在小视口区域绘制
				renderer.autoClear = false;
				
				// 13. 设置小视口背景色（深灰色）
				scene.backgroundNode = backgroundNode;
				
				// 14. 渲染小视口
				renderer.render(scene, camera2);

				// 15. 禁用裁剪测试
				// 恢复正常的渲染范围
				renderer.setScissorTest(false);
			}

			/**
			 * 初始化GUI控制面板
			 * 职责：创建交互式控制面板，允许用户调整渲染参数
			 */
			function initGui() {
				// 1. 创建GUI实例
				gui = new GUI({
					title: '线条渲染控制面板',  // 面板标题
					width: 300,               // 面板宽度
					autoPlace: true           // 自动放置到页面中
				});

				// 2. 定义GUI参数对象
				// 这些参数将与GUI控件绑定，用户修改时会更新相应值
				const param = {
					'线条类型': 0,              // 0=WebGPU宽线，1=传统线条
					'使用世界单位': false,        // 线宽单位：false=像素，true=世界单位
					'线宽': 5,                  // 线条宽度（1-10）
					'Alpha抗锯齿': true,        // Alpha-to-coverage抗锯齿
					'虚线模式': false,          // 是否启用虚线
					'虚线偏移': 0,              // 虚线起始偏移量
					'虚线缩放': 1,              // 虚线模式整体缩放
					'虚线/间隔': 1              // 虚线片段与间隔比例
				};

				// 3. 添加"线条类型"下拉选择框
				const lineTypeCtrl = gui.add(param, '线条类型', { 
					'WebGPU宽线': 0, 
					'传统线条': 1 
				});
				lineTypeCtrl.onChange(function (val) {
					// 根据选择显示/隐藏对应的线条对象
					switch (parseInt(val)) {
						case 0:  // 显示WebGPU宽线，隐藏传统线条
							line.visible = true;
							line1.visible = false;
							break;
						case 1:  // 显示传统线条，隐藏WebGPU宽线
							line.visible = false;
							line1.visible = true;
							break;
						default:
							console.warn('未知的线条类型:', val);
					}
				});
				// 添加说明
				lineTypeCtrl.name('线条类型').onFinishChange(function() {
					console.log('线条类型已切换');
				});

				// 4. 添加"使用世界单位"复选框
				const worldUnitsCtrl = gui.add(param, '使用世界单位');
				worldUnitsCtrl.onChange(function (val) {
					// 切换线宽单位模式
					matLine.worldUnits = val;
					// 标记材质需要更新（重要！）
					matLine.needsUpdate = true;
				});
				worldUnitsCtrl.name('世界单位模式').onFinishChange(function() {
					console.log('世界单位模式:', param['使用世界单位'] ? '开启' : '关闭');
				});

				// 5. 添加"线宽"滑块
				const widthCtrl = gui.add(param, '线宽', 1, 10)
					.step(0.1);  // 步进值0.1
				widthCtrl.onChange(function (val) {
					// 更新线宽
					matLine.linewidth = parseFloat(val);
				});
				widthCtrl.name('线条宽度').onFinishChange(function() {
					console.log('线宽设置为:', param['线宽']);
				});

				// 6. 添加"Alpha抗锯齿"复选框
				const alphaCtrl = gui.add(param, 'Alpha抗锯齿');
				alphaCtrl.onChange(function (val) {
					// 切换Alpha-to-coverage抗锯齿
					matLine.alphaToCoverage = val;
				});
				alphaCtrl.name('Alpha抗锯齿').onFinishChange(function() {
					console.log('Alpha抗锯齿:', param['Alpha抗锯齿'] ? '开启' : '关闭');
				});

				// 7. 添加"虚线模式"复选框
				const dashedCtrl = gui.add(param, '虚线模式');
				dashedCtrl.onChange(function (val) {
					// 切换虚线模式
					matLine.dashed = val;
					// 同时切换传统线条的材质
					line1.material = val ? matLineDashed : matLineBasic;
				});
				dashedCtrl.name('虚线模式').onFinishChange(function() {
					console.log('虚线模式:', param['虚线模式'] ? '开启' : '关闭');
				});

				// 8. 添加"虚线缩放"滑块
				const dashScaleCtrl = gui.add(param, '虚线缩放', 0.5, 2, 0.1);
				dashScaleCtrl.onChange(function (val) {
					// 同时更新两种材质的虚线缩放
					matLine.scale = parseFloat(val);
					matLineDashed.scale = parseFloat(val);
				});
				dashScaleCtrl.name('虚线缩放').onFinishChange(function() {
					console.log('虚线缩放:', param['虚线缩放']);
				});

				// 9. 添加"虚线偏移"滑块
				const dashOffsetCtrl = gui.add(param, '虚线偏移', 0, 5, 0.1);
				dashOffsetCtrl.onChange(function (val) {
					// 同时更新两种材质的虚线偏移
					matLine.dashOffset = parseFloat(val);
					matLineDashed.dashOffset = parseFloat(val);
				});
				dashOffsetCtrl.name('虚线偏移').onFinishChange(function() {
					console.log('虚线偏移:', param['虚线偏移']);
				});

				// 10. 添加"虚线/间隔"比例下拉框
				const dashRatioCtrl = gui.add(param, '虚线/间隔', { 
					'2:1（虚线长）': 0, 
					'1:1（相等）': 1, 
					'1:2（间隔长）': 2 
				});
				dashRatioCtrl.onChange(function (val) {
					// 根据选择设置虚线片段和间隔的长度
					switch (parseInt(val)) {
						case 0:  // 虚线:间隔 = 2:1
							matLine.dashSize = 2;
							matLine.gapSize = 1;
							matLineDashed.dashSize = 2;
							matLineDashed.gapSize = 1;
							break;
						case 1:  // 虚线:间隔 = 1:1
							matLine.dashSize = 1;
							matLine.gapSize = 1;
							matLineDashed.dashSize = 1;
							matLineDashed.gapSize = 1;
							break;
						case 2:  // 虚线:间隔 = 1:2
							matLine.dashSize = 1;
							matLine.gapSize = 2;
							matLineDashed.dashSize = 1;
							matLineDashed.gapSize = 2;
							break;
						default:
							console.warn('未知的虚线比例:', val);
					}
				});
				dashRatioCtrl.name('虚线/间隔比例').onFinishChange(function() {
					console.log('虚线比例已更新');
				});

				// 11. 添加重置按钮
				gui.add({
					'重置所有设置': function() {
						// 恢复所有参数到默认值
						param['线条类型'] = 0;
						param['使用世界单位'] = false;
						param['线宽'] = 5;
						param['Alpha抗锯齿'] = true;
						param['虚线模式'] = false;
						param['虚线偏移'] = 0;
						param['虚线缩放'] = 1;
						param['虚线/间隔'] = 1;
						
						// 更新GUI显示
						gui.controllers.forEach(controller => {
							controller.updateDisplay();
						});
						
						// 应用重置的设置
						lineTypeCtrl.onChange(param['线条类型']);
						worldUnitsCtrl.onChange(param['使用世界单位']);
						widthCtrl.onChange(param['线宽']);
						alphaCtrl.onChange(param['Alpha抗锯齿']);
						dashedCtrl.onChange(param['虚线模式']);
						dashScaleCtrl.onChange(param['虚线缩放']);
						dashOffsetCtrl.onChange(param['虚线偏移']);
						dashRatioCtrl.onChange(param['虚线/间隔']);
						
						console.log('所有设置已重置为默认值');
					}
				}, '重置所有设置').name('重置设置');

				// 12. 添加折叠面板（可选功能）
				const advancedFolder = gui.addFolder('高级设置');
				advancedFolder.add({
					'显示性能面板': function() {
						stats.dom.style.display = stats.dom.style.display === 'none' ? 'block' : 'none';
					},
					'切换画中画': function() {
						// 这里可以添加切换画中画显示/隐藏的逻辑
						console.log('画中画切换功能');
					}
				}, '显示性能面板').name('显示/隐藏性能面板');
				
				// 默认展开GUI面板
				gui.open();
				// 默认关闭高级设置折叠面板
				advancedFolder.close();
			}

			// ========== 页面卸载清理 ==========
			// 防止内存泄漏
			window.addEventListener('beforeunload', function() {
				// 移除事件监听器
				window.removeEventListener('resize', onWindowResize);
				
				// 清理Three.js资源
				if (renderer) {
					renderer.setAnimationLoop(null);
					renderer.dispose();
				}
				
				// 清理GUI
				if (gui) {
					gui.destroy();
				}
				
				// 清理场景
				if (scene) {
					scene.traverse(function(object) {
						if (object.geometry) object.geometry.dispose();
						if (object.material) {
							if (Array.isArray(object.material)) {
								object.material.forEach(m => m.dispose());
							} else {
								object.material.dispose();
							}
						}
					});
				}
			});

			// ========== 错误处理 ==========
			// 全局错误捕获
			window.addEventListener('error', function(event) {
				console.error('Three.js应用错误:', event.error);
				
				// 在页面上显示错误信息（用户友好）
				const errorDiv = document.createElement('div');
				errorDiv.style.cssText = `
					position: fixed;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					background: rgba(255,0,0,0.8);
					color: white;
					padding: 20px;
					border-radius: 10px;
					z-index: 10000;
					max-width: 80%;
					text-align: center;
				`;
				errorDiv.innerHTML = `
					<h3>渲染错误</h3>
					<p>${event.message || '未知错误'}</p>
					<p>请检查浏览器控制台获取详细信息</p>
					<button onclick="this.parentElement.remove()" style="margin-top:10px; padding:5px 15px;">
						关闭
					</button>
				`;
				document.body.appendChild(errorDiv);
			});

			// WebGPU兼容性检查
			if (!navigator.gpu) {
				alert('您的浏览器不支持WebGPU。请使用Chrome 113+、Edge 113+或Firefox Nightly等现代浏览器。');
			}
		</script>
		
		<!-- 内联样式：确保基本布局 -->
		<style>
			/* 全局样式重置 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			/* 页面基础样式 */
			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
				overflow: hidden; /* 隐藏滚动条，全屏3D效果 */
				background: #1a1a1a; /* 深色背景 */
				color: #e0e0e0;
			}

			
			#info a {
				color: #4dabf7; /* Three.js品牌蓝色 */
				text-decoration: none;
				font-weight: bold;
			}
			
			#info a:hover {
				color: #74c0fc;
				text-decoration: underline;
			}
			
			#info small {
				display: block;
				margin-top: 4px;
				font-size: 12px;
				color: #aaa;
			}
			
			/* 画中画小视口边框 */
			canvas {
				display: block;
			}
			
			/* 性能统计面板位置 */
			.ds-stats {
				position: absolute !important;
				left: auto !important;
				right: 20px !important;
				top: 20px !important;
				opacity: 0.9;
			}
			
			/* GUI面板样式调整 */
			.lil-gui {
				--width: 300px;
				--font-size: 12px;
				--font-family: monospace;
				--title-background-color: #2a2a2a;
				--background-color: rgba(40, 40, 40, 0.9);
				--text-color: #e0e0e0;
				--widget-color: #4dabf7;
			}
		</style>
	</body>
</html>