<!-- 代码功能概述
这是一个基于 Three.js WebGPU 渲染器 的线框渲染演示示例，主要展示宽线框渲染技术，允许用户实时调整线条样式参数，并提供了双视口对比展示功能。

核心功能：
宽线框渲染：展示可调节宽度的线框渲染（传统WebGL线宽固定为1像素）

实时参数调整：通过GUI界面动态调整线条样式

双视口显示：主视口全屏显示 + 右下角小视口预览

两种渲染方式对比：WebGPU宽线 vs 传统gl.LINE线框

交互式控制：鼠标控制摄像机旋转、缩放和平移

主要技术点详解
1. WebGPU 渲染技术
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
下一代图形API：替代WebGL，提供更好的性能和现代GPU功能支持

原生GPU计算：更接近底层硬件，减少CPU开销

并行渲染优化：更好地利用现代GPU的并行处理能力

抗锯齿支持：antialias: true 实现边缘平滑

2. 宽线框渲染系统
a. WireframeGeometry2 几何体
javascript
const geometry = new WireframeGeometry2( geo );
专用线框几何体：专门为宽线渲染优化的数据结构

边信息提取：从原始网格提取所有边并重新组织

支持线宽：允许超过1像素的线宽渲染

b. Line2NodeMaterial 材质
javascript
matLine = new THREE.Line2NodeMaterial({
    color: 0x4080ff,
    linewidth: 5,  // 可调节线宽
    dashed: false  // 支持虚线
});
节点材质系统：基于TSL（Three.js Shader Language）的可编程材质

动态线宽：在世界空间或屏幕空间中定义线宽

虚线支持：可调节的虚线样式（线段长度、间隙比例）

3. 双视口渲染技术
a. 剪裁测试（Scissor Test）
javascript
renderer.setScissorTest(true);
renderer.setScissor(20, posY, insetWidth, insetHeight);
区域限制渲染：只更新指定矩形区域的像素

性能优化：减少不必要的渲染计算

叠加显示：小视口叠加在主场景之上

b. 深度缓冲管理
javascript
renderer.clearDepth(); // 重要！确保小视口显示在顶层
深度测试重置：清除深度缓冲，避免小视口被遮挡

渲染顺序控制：确保小视口内容总是显示在最前面

4. 两种线框渲染方式对比
特性	WebGPU 宽线 (WireframeGeometry2)	传统线条 (gl.LINE)
线宽	可调节 (1-10像素或世界单位)	固定1像素
渲染质量	高质量，支持抗锯齿	低质量，锯齿明显
虚线效果	内置支持，可调节参数	需要特殊材质
性能	优化后的WebGPU管线	传统WebGL管线
兼容性	需要支持WebGPU的浏览器	广泛支持
5. 交互控制系统
a. 轨道控制器 (OrbitControls)
javascript
controls = new OrbitControls(camera, renderer.domElement);
鼠标交互：左键旋转、右键平移、滚轮缩放

约束限制：minDistance和maxDistance控制缩放范围

平滑动画：内置缓动效果，操作更流畅

b. 调试检查器 (Inspector)
javascript
renderer.inspector = new Inspector();
实时调试：查看和修改场景对象属性

性能监控：帧率、内存使用等统计信息

场景导航：树状结构展示所有场景对象

6. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自适应布局：自动适应窗口大小变化

摄像机更新：纵横比实时调整，防止图像拉伸

渲染器重置：Canvas尺寸动态更新

7. 虚线效果实现
a. 距离计算
javascript
wireframe.computeLineDistances();
线段长度测量：计算每条边的总长度

虚线分段依据：基于线段长度均匀分布虚线段

b. 参数化控制
javascript
matLine.dashSize = 2;  // 虚线长度
matLine.gapSize = 1;   // 间隙长度
matLine.scale = 1;     // 整体缩放
比例可调：支持多种虚线/间隙比例（2:1, 1:1, 1:2）

实时更新：参数改变立即反映在渲染结果上

8. 材质系统对比
材质类型	用途	特点
Line2NodeMaterial	WebGPU宽线	可编程节点材质，支持宽线、虚线
LineBasicMaterial	传统实线	简单实线，固定1像素宽
LineDashedMaterial	传统虚线	虚线效果，但线宽仍为1像素
9. 二十面体几何体
javascript
let geo = new THREE.IcosahedronGeometry(20, 1);
柏拉图立体：规则的二十面体，20个三角形面

线框清晰：几何结构简单，线框效果明显

对称性好：适合展示旋转和不同角度的线框

10. 渲染循环优化
javascript
function animate() {
    // 双阶段渲染
    // 1. 主场景渲染
    // 2. 小视口渲染
}
单次循环双渲染：高效利用GPU资源

智能清除策略：主场景自动清除，小视口手动控制

摄像机同步：两个摄像机视角完全一致

技术架构优势
1. 模块化设计
ES6模块导入，清晰的依赖关系

功能分离：渲染、控制、UI各自独立

2. 可扩展性
易于添加新的线框样式

支持更多几何体类型

GUI系统可扩展更多控制参数

3. 用户体验
实时反馈：参数调整立即生效

对比展示：双视口直观比较

交互友好：自然的摄像机控制

4. 性能考虑
WebGPU的高效渲染

剪裁测试减少渲染区域

合理的对象复用

适用场景
技术演示：展示WebGPU和宽线渲染能力

教育用途：学习Three.js高级渲染技术

原型开发：快速测试线框渲染效果

参数研究：探索不同线框样式对视觉效果的影响

性能对比：比较WebGPU与传统WebGL的渲染差异 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：Three.js WebGPU 宽线框渲染示例
			这个示例展示了使用WebGPU渲染器实现的宽线框效果，支持动态调整线宽和虚线样式
		-->
		<title>Three.js WebGPU - 宽线框渲染</title>
		
		<!-- 
			字符编码设置：UTF-8确保支持中文字符和特殊符号
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置：
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放（为了更好的3D体验）
			- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
			这些设置确保3D场景在不同设备上保持一致的显示效果
		-->
		<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">
	</head>

	<body>
		<!-- 
			主渲染容器：
			这个div元素将承载Three.js WebGPU渲染器输出的canvas元素
			所有3D图形都会在这个容器内渲染显示
		-->
		<div id="container"></div>

		<!-- 
			信息面板：
			显示Three.js标志、标题和说明信息
			这个面板通常位于页面角落，提供必要的说明和链接
		-->
		<div id="info">
			<!-- 
				Three.js Logo链接：
				- href: 指向Three.js官方网站
				- target="_blank": 在新标签页打开
				- rel="noopener": 安全设置，防止新页面访问原页面的window对象
				- class="logo-link": 样式类，可能包含背景图片显示Three.js Logo
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题区域：包含Three.js链接和当前示例标题 -->
			<div class="title-wrapper">
				<!-- Three.js主链接：点击跳转到Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 当前示例标题：显示示例的具体内容 -->
				<span>宽线渲染示例</span>
			</div>

			<!-- 
				示例描述：
				简要说明这个示例的功能和特点
				<small>标签表示较小的文本，通常用于辅助说明
			-->
			<small>
				本示例演示了宽线框渲染效果，支持动态调整线宽、虚线样式等参数。
			</small>
			
			<!-- 
				功能说明列表：
				详细列出示例的主要功能和技术特点
			-->
			<small>
				<br><br>
				<b>主要功能：</b><br>
				1. WebGPU渲染器支持<br>
				2. 宽线框渲染（可调节线宽）<br>
				3. 虚线效果支持<br>
				4. 实时参数调整界面<br>
				5. 双视口显示（主视图+小预览窗口）
			</small>
			

		</div>

		<!-- 
			模块导入映射表 (Import Map)：
			这是现代JavaScript模块系统的配置部分，定义了模块的别名和路径
			允许我们在代码中使用简洁的模块名称，而不需要写完整的相对路径
			
			作用：
			1. three: 指向Three.js的WebGPU版本构建文件
			2. three/webgpu: 同样的WebGPU版本，提供备用导入路径
			3. three/tsl: Three.js着色器语言模块，用于节点材质系统
			4. three/addons/: Three.js插件和附加组件的目录
			
			注意：这些路径是相对于当前HTML文件的
		-->
		<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核心模块
			// THREE对象包含所有Three.js的核心类和功能
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）的颜色函数
			// TSL是Three.js的节点材质系统，用于创建可编程材质
			import { color } from 'three/tsl';

			// 导入调试检查器
			// Inspector提供实时调试界面，可以查看和修改场景中的对象属性
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器
			// OrbitControls允许用户通过鼠标交互控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入WebGPU专用的线框类
			// Wireframe是针对WebGPU优化的线框渲染对象
			import { Wireframe } from 'three/addons/lines/webgpu/Wireframe.js';
			
			// 导入线框几何体2
			// WireframeGeometry2是支持宽线渲染的几何体类型
			import { WireframeGeometry2 } from 'three/addons/lines/WireframeGeometry2.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// 渲染相关变量
			let wireframe;      // WebGPU宽线框对象（使用WireframeGeometry2）
			let renderer;       // WebGPU渲染器实例
			let scene;          // 3D场景对象，包含所有要渲染的物体
			let camera;         // 主摄像机，用于主视口渲染
			let camera2;        // 辅助摄像机，用于小视口渲染
			let controls;       // 用户交互控制器
			let backgroundNode; // 背景颜色节点（用于TSL节点材质系统）
			
			// 传统线框对象
			let wireframe1;     // 传统线框对象（使用THREE.LineSegments）
			
			// 材质对象
			let matLine;        // WebGPU宽线材质（Line2NodeMaterial）
			let matLineBasic;   // 基础线框材质（传统渲染方式）
			let matLineDashed;  // 虚线线框材质（传统渲染方式）
			
			// 用户界面
			let gui;            // 调试GUI界面实例
			
			// 视口尺寸变量
			let insetWidth;     // 小视口宽度
			let insetHeight;    // 小视口高度

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

			// ============================================
			// 初始化函数定义
			// ============================================
			
			/**
			 * 初始化函数
			 * 这是整个3D应用的核心初始化流程，按顺序执行以下步骤：
			 * 1. 创建WebGPU渲染器并配置
			 * 2. 创建3D场景和摄像机
			 * 3. 创建用户交互控制器
			 * 4. 创建3D对象和材质
			 * 5. 设置事件监听器
			 * 6. 初始化用户界面
			 */
			function init() {

				// --------------------------------------------------
				// 1. 创建和配置WebGPU渲染器
				// --------------------------------------------------
				
				// 创建WebGPURenderer实例
				// antialias: true 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比
				// 这确保在高DPI设备（如Retina显示器）上获得清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置清除颜色（背景色）
				// 参数1: RGB颜色值（0x000000 = 黑色）
				// 参数2: 透明度（0.0 = 完全透明，1.0 = 完全不透明）
				renderer.setClearColor( 0x000000, 0.0 );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用，实现连续渲染
				renderer.setAnimationLoop( animate );
				
				// 附加调试检查器到渲染器
				// 这允许我们通过Inspector工具调试场景
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas）添加到页面中
				// 这样用户才能在页面上看到3D图形
				document.body.appendChild( renderer.domElement );

				// --------------------------------------------------
				// 2. 创建3D场景和摄像机
				// --------------------------------------------------
				
				// 创建3D场景
				// Scene是所有3D对象的容器，类似一个舞台
				scene = new THREE.Scene();

				// 创建主摄像机（透视投影）
				// 参数说明：
				// 参数1: 视野角度（FOV）40度 - 较小的值产生类似望远镜的效果，较大的值产生广角效果
				// 参数2: 纵横比 - 宽度除以高度，自动适应窗口比例
				// 参数3: 近裁剪面 - 距离摄像机1个单位以内的物体不会被渲染
				// 参数4: 远裁剪面 - 距离摄像机1000个单位以外的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
				
				// 设置摄像机初始位置
				// 参数: (x, y, z) 坐标
				// 这里设置在(-50, 0, 50)的位置，从斜上方观察物体
				camera.position.set( -50, 0, 50 );

				// 创建第二个摄像机（用于小视口渲染）
				// 初始纵横比设为1（正方形），后面会根据实际尺寸调整
				camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
				
				// 复制主摄像机的位置到第二个摄像机
				// 这样两个摄像机初始视角完全一致
				camera2.position.copy( camera.position );

				// --------------------------------------------------
				// 3. 创建用户交互控制器
				// --------------------------------------------------
				
				// 创建轨道控制器
				// 将摄像机与渲染器的DOM元素关联，实现鼠标控制
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置摄像机与目标点的最小距离
				// 防止摄像机过于接近物体
				controls.minDistance = 10;
				
				// 设置摄像机与目标点的最大距离
				// 防止摄像机过于远离物体
				controls.maxDistance = 500;

				// --------------------------------------------------
				// 4. 创建背景节点（用于小视口）
				// --------------------------------------------------
				
				// 创建TSL颜色节点
				// 这是Three.js节点材质系统的一部分，用于创建可编程材质
				// 这里创建一个深灰色(0x222222)的背景颜色节点
				backgroundNode = color( 0x222222 );

				// --------------------------------------------------
				// 5. 创建WebGPU宽线框对象（第一种渲染方式）
				// --------------------------------------------------
				
				// 第一步：创建基础几何体
				// 创建一个二十面体（Icosahedron），半径为20，细分级别为1
				// 二十面体是柏拉图立体之一，有20个三角形面
				let geo = new THREE.IcosahedronGeometry( 20, 1 );
				
				// 第二步：将基础几何体转换为宽线框几何体
				// WireframeGeometry2是专门为宽线渲染设计的几何体类型
				// 它从原始几何体提取边信息，并转换为适合线框渲染的格式
				const geometry = new WireframeGeometry2( geo );

				// 第三步：创建宽线材质
				// Line2NodeMaterial是基于节点材质的线框材质，支持高级特性：
				// - 可调节的线宽（不仅是1像素）
				// - 虚线效果
				// - 各种线端样式
				matLine = new THREE.Line2NodeMaterial( {
					color: 0x4080ff,       // 线条颜色：蓝色 (RGB: 64, 128, 255)
					linewidth: 5,          // 线宽：5个单位（世界单位或像素，取决于渲染设置）
					dashed: false          // 是否启用虚线模式：初始为false（实线）
				} );

				// 第四步：创建宽线框对象并添加到场景
				wireframe = new Wireframe( geometry, matLine );
				
				// 计算线段的距离
				// 这对于虚线效果很重要，因为虚线模式需要知道每条线的总长度
				// 这样才能正确计算虚线的分段
				wireframe.computeLineDistances();
				
				// 设置对象缩放（这里保持原始大小）
				wireframe.scale.set( 1, 1, 1 );
				
				// 将线框对象添加到场景中
				scene.add( wireframe );

				// --------------------------------------------------
				// 6. 创建传统线框对象（第二种渲染方式）
				// --------------------------------------------------
				
				// 传统线框渲染使用WebGL的gl.LINE原语
				// 注意：传统方式线宽固定为1像素，无法调节
				
				// 第一步：重新使用之前的几何体，但转换为传统线框几何体
				// WireframeGeometry是Three.js传统的线框几何体类型
				geo = new THREE.WireframeGeometry( geo );

				// 第二步：创建传统线框材质
				// LineBasicMaterial：基础线条材质，只能渲染实线
				matLineBasic = new THREE.LineBasicMaterial( { color: 0x4080ff } );
				
				// LineDashedMaterial：虚线材质
				// 参数说明：
				// scale: 2 - 虚线缩放因子
				// dashSize: 1 - 虚线段的长度
				// gapSize: 1 - 间隙的长度
				matLineDashed = new THREE.LineDashedMaterial( { 
					scale: 2, 
					dashSize: 1, 
					gapSize: 1 
				} );

				// 第三步：创建传统线框对象
				// LineSegments用于渲染线段集合
				wireframe1 = new THREE.LineSegments( geo, matLineBasic );
				
				// 计算线段距离（同样用于虚线效果）
				wireframe1.computeLineDistances();
				
				// 初始设置为不可见（默认显示WebGPU宽线框）
				wireframe1.visible = false;
				
				// 添加到场景
				scene.add( wireframe1 );

				// --------------------------------------------------
				// 7. 设置窗口大小变化监听器
				// --------------------------------------------------
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新计算摄像机参数和渲染器尺寸
				window.addEventListener( 'resize', onWindowResize );
				
				// 立即调用一次，确保初始尺寸正确
				onWindowResize();

				// --------------------------------------------------
				// 8. 初始化图形用户界面（GUI）
				// --------------------------------------------------
				
				// 创建调试和控制面板
				// 允许用户实时调整渲染参数
				initGui();

			}

			// ============================================
			// 窗口大小变化处理函数
			// ============================================
			
			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时自动调用
			 * 主要任务：
			 * 1. 更新摄像机纵横比
			 * 2. 更新渲染器尺寸
			 * 3. 重新计算小视口尺寸
			 */
			function onWindowResize() {

				// 1. 更新主摄像机纵横比
				// 使用当前窗口的宽高比确保图像不变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 必须调用updateProjectionMatrix()来应用新的纵横比
				// 否则摄像机仍会使用旧的投影矩阵
				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();

			}

			// ============================================
			// 动画循环函数
			// ============================================
			
			/**
			 * 动画循环函数
			 * 这是渲染循环的核心，每一帧都会被调用
			 * 实现双视口渲染：
			 * 1. 首先渲染主场景（全屏）
			 * 2. 然后在小视口渲染带背景的相同场景
			 */
			function animate() {

				// ======================
				// 第一部分：主场景渲染
				// ======================
				
				// 设置清除颜色为透明黑色
				// 这样如果页面有背景色或背景图，会显示出来
				renderer.setClearColor( 0x000000, 0 );
				
				// 设置渲染视口为整个窗口
				// 参数: (x, y, width, height)
				// 从左上角(0,0)开始，填充整个窗口
				renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
				
				// 启用自动清除
				// 每一帧开始渲染前自动清除颜色缓冲和深度缓冲
				renderer.autoClear = true;
				
				// 移除场景背景（使用透明背景）
				scene.backgroundNode = null;
				
				// 设置场景名称（用于调试）
				scene.name = '主场景';
				
				// 执行渲染
				// 使用主摄像机和当前场景状态
				renderer.render( scene, camera );

				// ======================
				// 第二部分：小视口渲染
				// ======================
				
				// 计算小视口在屏幕上的位置
				// 位于窗口右下角，离底部20像素，离右侧20像素
				const posY = window.innerHeight - insetHeight - 20;
				
				// 重要：清除深度缓冲
				// 这确保小视口的内容绘制在主场景内容的上面
				// 否则小视口可能被主场景的深度测试遮挡
				renderer.clearDepth();
				
				// 启用剪裁测试
				// 剪裁测试限制渲染只发生在指定的矩形区域内
				// 这是实现小视口的关键技术
				renderer.setScissorTest( true );
				
				// 设置剪裁区域
				// 只有这个矩形区域内的像素会被更新
				renderer.setScissor( 20, posY, insetWidth, insetHeight );
				
				// 设置视口
				// 渲染器的绘图区域设置为剪裁区域
				renderer.setViewport( 20, posY, insetWidth, insetHeight );

				// 同步第二个摄像机到主摄像机
				// 确保小视口显示与主视口完全相同的视角
				camera2.position.copy( camera.position );
				camera2.quaternion.copy( camera.quaternion );

				// 禁用自动清除
				// 我们不想清除之前渲染的主场景，只是在小视口区域添加内容
				renderer.autoClear = false;
				
				// 设置小视口的背景颜色
				// 使用之前创建的深灰色背景节点
				scene.backgroundNode = backgroundNode;
				
				// 更新场景名称
				scene.name = '小视口预览 [剪裁区域]';
				
				// 渲染小视口
				// 使用第二个摄像机和带有背景的场景
				renderer.render( scene, camera2 );

				// 禁用剪裁测试
				// 恢复正常的全屏渲染状态，为下一帧做准备
				renderer.setScissorTest( false );

			}

			// ============================================
			// GUI界面初始化函数
			// ============================================
			
			/**
			 * 初始化图形用户界面
			 * 创建调试面板，允许用户实时调整渲染参数
			 * 面板包含以下控制项：
			 * 1. 线条类型切换（WebGPU宽线 vs 传统线条）
			 * 2. 线宽调整（仅WebGPU宽线有效）
			 * 3. 虚线效果开关
			 * 4. 虚线缩放调整
			 * 5. 虚线/间隙比例选择
			 */
			function initGui() {

				// 创建GUI参数面板
				// 标题为"渲染设置"
				gui = renderer.inspector.createParameters( '渲染设置' );

				// 定义可调参数对象
				// 这些值将绑定到GUI控制项
				const param = {
					'线条类型': 0,            // 0=WebGPU宽线，1=传统线条
					'线宽(像素)': 5,          // 线宽范围1-10像素
					'虚线效果': false,        // 是否启用虚线
					'虚线缩放': 1,            // 虚线缩放比例0.5-1.0
					'虚线/间隙': 1            // 0=2:1，1=1:1，2=1:2
				};

				// --------------------------------------
				// 控制项1：线条类型选择
				// --------------------------------------
				gui.add( param, '线条类型', { 
					'WebGPU宽线': 0, 
					'传统线条(gl.LINE)': 1 
				}).onChange( function ( val ) {
					// 当用户改变线条类型时触发
					switch ( val ) {
						case 0: // 选择WebGPU宽线
							wireframe.visible = true;    // 显示宽线框
							wireframe1.visible = false;  // 隐藏传统线框
							break;
						case 1: // 选择传统线条
							wireframe.visible = false;   // 隐藏宽线框
							wireframe1.visible = true;   // 显示传统线框
							break;
					}
				} );

				// --------------------------------------
				// 控制项2：线宽调整
				// --------------------------------------
				gui.add( param, '线宽(像素)', 1, 10 ).onChange( function ( val ) {
					// 更新WebGPU宽线材质的线宽
					// 注意：传统线条的线宽是固定的，无法调节
					matLine.linewidth = val;
				} );

				// --------------------------------------
				// 控制项3：虚线效果开关
				// --------------------------------------
				gui.add( param, '虚线效果' ).onChange( function ( val ) {
					// 更新WebGPU宽线材质的虚线设置
					matLine.dashed = val;
					
					// 切换传统线框的材质
					// 根据虚线开关选择对应的材质
					wireframe1.material = val ? matLineDashed : matLineBasic;
				} );

				// --------------------------------------
				// 控制项4：虚线缩放调整
				// --------------------------------------
				gui.add( param, '虚线缩放', 0.5, 1, 0.1 ).onChange( function ( val ) {
					// 更新WebGPU宽线材质的虚线缩放
					matLine.scale = val;
					
					// 同时更新传统虚线材质的缩放
					matLineDashed.scale = val;
				} );

				// --------------------------------------
				// 控制项5：虚线/间隙比例选择
				// --------------------------------------
				gui.add( param, '虚线/间隙', { 
					'2 : 1 (线段长:间隙长)': 0, 
					'1 : 1 (等长)': 1, 
					'1 : 2 (线段短:间隙长)': 2 
				}).onChange( function ( val ) {
					// 根据用户选择的比例更新材质参数
					switch ( val ) {
						case 0: // 2:1比例（线段长度是间隙的两倍）
							// 更新WebGPU宽线材质
							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;
					}
				} );

			}

		</script>

	</body>

</html>