<!-- Three.js WebGPU 轮廓效果示例 - 功能详解与技术分析
一、整体功能概述
这是一个基于Three.js WebGPU版本的交互式3D场景演示，核心功能是动态物体轮廓高亮效果。用户可以通过鼠标悬停选择3D物体，被选中的物体会显示可自定义的轮廓光晕。该示例展示了现代Web 3D图形技术的完整工作流程。

二、核心功能模块
1. 3D场景构建与渲染
场景管理：创建包含多种3D对象的完整场景（树模型、随机球体、地板、圆环体）

相机系统：透视相机配合轨道控制器，提供自由视角浏览

光照系统：环境光+方向光的组合照明，支持动态阴影

材质系统：多种材质类型（Phong、Lambert）实现不同的视觉效果

2. 动态轮廓效果系统
鼠标交互选择：通过射线投射检测鼠标悬停的物体

实时轮廓生成：使用后处理技术为选中物体添加轮廓

参数实时调节：可通过GUI调节轮廓颜色、厚度、强度、脉动效果

双色轮廓：区分可见边缘和隐藏边缘，增强3D感知

3. 交互与用户体验
完整的3D导航：旋转、缩放、平移场景

实时反馈：鼠标悬停即时显示轮廓效果

参数可视化调节：内置调试面板调整所有视觉效果参数

三、主要技术点详解
1. WebGPU渲染架构
javascript
// 关键技术点：
- 使用Three.js的WebGPURenderer替代传统WebGLRenderer
- 支持更高效的并行渲染和计算着色器
- 更好的多线程支持和GPU资源管理
- 自动处理设备像素比，适配高DPI屏幕
2. Three.js着色器语言（TSL）
javascript
// 核心TSL特性：
- 声明式着色器编程，替代手工编写GLSL
- 类型安全的着色器节点图
- 自动uniform变量管理
- 内置数学函数和效果节点

// 示例：脉动轮廓效果
const period = time.div(pulsePeriod).mul(2);
const osc = oscSine(period).mul(.5).add(.5);
const outlinePulse = pulsePeriod.greaterThan(0)
    .select(outlineColor.mul(osc), outlineColor);
3. 后处理管线技术
javascript
// 后处理流程：
1. 基础场景渲染通道（pass(scene, camera)）
2. 轮廓效果通道（outline节点）
3. 通道叠加（outlinePulse.add(scenePass)）
4. 最终合成输出到屏幕

// 优势：
- 非侵入式效果：不修改原始场景材质
- 高性能：只在最终渲染阶段应用效果
- 组合灵活：可轻松组合多个后处理效果
4. 射线投射交互系统
javascript
// 工作原理：
1. 鼠标位置 → 归一化设备坐标（NDC）
2. 从相机位置发射射线
3. 检测射线与场景物体的相交
4. 获取最近的相交物体作为选中对象

// 代码实现：
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(scene, true);
5. 阴影映射系统
javascript
// 关键配置：
- 阴影贴图尺寸：2048×2048像素
- 阴影偏移（bias）：-0.005，解决阴影痤疮
- 阴影相机视锥体：正交投影，10单位范围
- 逐物体控制：mesh.castShadow / mesh.receiveShadow

// 技术优势：
- 实时动态阴影
- 软硬阴影控制
- 多光源阴影支持
6. 模块化资源管理
javascript
// 导入映射（Import Maps）：
- 统一模块路径管理
- 便于依赖版本控制
- 支持条件加载不同后端

// ES6模块化：
- 清晰的依赖关系
- 按需导入，减少初始加载
- 更好的代码组织和复用
7. 性能优化技术
javascript
// 关键优化点：
1. **几何体复用**：多个球体共享同一几何体实例
2. **自动裁剪**：相机视锥体裁剪不可见物体
3. **批量渲染**：WebGPU的自动批处理优化
4. **动画循环**：setAnimationLoop统一管理渲染
5. **资源延迟加载**：OBJ模型异步加载不阻塞主线程
8. 响应式设计
javascript
// 自适应机制：
- 动态计算窗口尺寸
- 相机宽高比实时更新
- 渲染器分辨率适配设备像素比
- 触摸事件兼容移动设备
四、技术架构特点
1. 分层架构
text
用户界面层 (HTML/CSS)
    ↓
应用逻辑层 (JavaScript/TSL)
    ↓
渲染引擎层 (Three.js/WebGPU)
    ↓
图形API层 (WebGPU/Vulkan/Metal/DirectX12)
    ↓
硬件层 (GPU)
2. 数据流向
text
用户输入 → 事件处理 → 场景更新 → 渲染计算 → 后处理 → 屏幕输出
      ↓           ↓           ↓           ↓          ↓
  鼠标位置    选中物体    动画状态    GPU渲染   轮廓合成   最终图像
3. 可扩展性设计
插件式效果：后处理管线易于添加新效果

参数驱动：所有视觉效果参数化，便于调节

模块化加载：按需加载模型和资源

调试友好：内置Inspector便于开发和调试

五、现代Web图形技术栈
1. 前端技术
HTML5 + ES6+ JavaScript

CSS3样式控制

模块化开发（Import Maps）

2. 图形技术
Three.js 3D引擎

WebGPU图形API

TSL着色器语言

GLTF/OBJ模型格式

3. 开发工具
实时调试检查器

GUI参数控制面板

性能分析工具

六、应用场景
产品可视化：电商平台的3D商品展示

游戏开发：角色/物品选择高亮

数据可视化：3D图表元素突出显示

教育培训：交互式3D教学演示

工业设计：CAD模型审查和标注

七、技术亮点总结
前沿技术栈：结合Three.js、WebGPU、TSL等最新Web图形技术

完整工作流：从模型加载到最终渲染的完整3D应用流程

高性能渲染：利用WebGPU的现代图形管线优势

优秀交互体验：流畅的3D导航和实时反馈

高度可配置：所有视觉参数均可实时调节

跨平台兼容：支持桌面和移动设备 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面元数据配置
			文档类型声明，指定为HTML5
			语言设置为简体中文
		-->
		<title>Three.js WebGPU示例 - 后处理轮廓效果</title>
		<meta charset="utf-8">
		<!-- 
			视口(viewport)设置，用于移动端适配：
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放
			- minimum-scale=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": 指定MIME类型为CSS
			- rel="stylesheet": 定义当前文档与被链接文档的关系为样式表
			- href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			信息展示区域，位于页面顶部
			id="info": 为div元素设置唯一标识符，便于CSS和JS操作
		-->
		<div id="info">
			<!-- 
				Three.js官网链接：
				- target="_blank": 在新标签页打开链接
				- rel="noopener": 防止新页面通过window.opener访问原始页面，增强安全性
				- class="logo-link": CSS类名，通常用于添加Three.js logo背景图片
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器，用于样式布局 -->
			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题文本 -->
				<span>轮廓效果演示</span>
			</div>

			<!-- 
				作者信息区域，使用<small>标签表示次要信息：
				- 第一个链接：Prashant Sharma的个人网站
				- 第二个链接：Ben Houston的Clara.io平台
				- &nbsp;: 不换行空格，用于保持文本格式
			-->
			<small>
				轮廓效果由 
				<a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> 
				和 
				<a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a> 
				开发&nbsp;&nbsp;|&nbsp;&nbsp;WebGPU版本演示
			</small>
		</div>

		<!-- 
			导入映射(Import Maps)配置：
			允许浏览器将模块标识符映射到实际URL
			type="importmap": 定义导入映射，ES模块功能
		-->
		<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模块，使用ES6模块系统
			type="module": 指定脚本为ECMAScript模块
			模块具有自己的作用域，支持import/export语法
		-->
		<script type="module">
			// ===================== 模块导入区域 =====================
			// 导入Three.js核心库的WebGPU版本
			// * as THREE: 将整个模块导入并命名为THREE对象
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言(TSL)工具函数：
			// - pass: 创建渲染通道节点
			// - uniform: 创建uniform变量（可在着色器中修改的全局变量）
			// - time: 时间uniform变量，自动更新
			// - oscSine: 正弦振荡器函数，用于创建周期动画
			import { pass, uniform, time, oscSine } from 'three/tsl';
			
			// 导入轮廓效果的TSL节点函数
			// outline: 创建一个轮廓效果节点，用于后处理
			import { outline } from 'three/addons/tsl/display/OutlineNode.js';

			// 导入调试检查器，提供可视化参数调节界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器，提供鼠标/触摸交互的相机控制
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入OBJ模型加载器，用于加载.obj格式的3D模型
			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

			// ===================== 全局变量声明 =====================
			// Three.js核心对象
			let camera;      // 相机：定义观察3D场景的视角
			let scene;       // 场景：包含所有3D对象、灯光、相机的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D画布
			let controls;    // 控制器：用户交互控制（旋转、缩放、平移场景）
			
			// 后处理相关对象
			let postProcessing; // 后处理管理器：管理多个后处理效果
			let outlinePass;    // 轮廓效果通道：专门处理物体轮廓
			
			// 选中物体数组：存储当前被选中的3D对象，用于轮廓效果
			let selectedObjects = [];

			// 射线投射器：用于检测鼠标/触摸与3D物体的交互
			// 工作原理：从相机位置发射一条射线，检测与哪些物体相交
			const raycaster = new THREE.Raycaster();
			
			// 鼠标位置向量：存储归一化设备坐标(NDC)
			// 取值范围：x和y从-1到1，左上角为(-1,1)，右下角为(1,-1)
			const mouse = new THREE.Vector2();

			// 创建3D对象容器：
			// obj3d: 用于存放加载的OBJ模型
			// group: 场景中的根组，用于组织所有对象
			const obj3d = new THREE.Object3D();
			const group = new THREE.Group();

			// ===================== 初始化函数调用 =====================
			// 程序入口点，初始化整个3D应用
			init();

			/**
			 * 初始化函数 - 整个3D应用的配置和设置中心
			 * 负责创建场景、相机、渲染器、灯光、加载模型、设置交互等所有初始化工作
			 * 这是一个异步过程，某些操作（如模型加载）可能需要时间
			 */
			function init() {
				// 获取当前浏览器窗口的内部尺寸
				// 用于设置渲染器和相机的尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// ===================== 创建WebGPU渲染器 =====================
				// WebGPURenderer: Three.js的WebGPU后端渲染器
				// 与传统的WebGLRenderer相比，WebGPU提供更好的性能和多线程支持
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比：处理高DPI屏幕（如Retina显示屏）
				// window.devicePixelRatio: 物理像素与CSS像素的比例
				// 值通常为1（标准屏）、2（Retina）或3（超高清屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器的输出画布尺寸
				// 使用窗口的实际尺寸，使3D场景填满整个浏览器窗口
				renderer.setSize(width, height);
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用，实现平滑动画
				// 替代传统的requestAnimationFrame手动管理
				renderer.setAnimationLoop(animate);
				
				// 创建并附加调试检查器到渲染器
				// Inspector: 提供可视化界面，可实时调节场景参数
				renderer.inspector = new Inspector();
				
				// 启用阴影映射系统
				// 当设置为true时，支持的光源将投射阴影
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// renderer.domElement: 渲染器创建的<canvas>元素
				document.body.appendChild(renderer.domElement);

				// ===================== 创建场景 =====================
				// Scene: 3D场景的根容器，所有对象（网格、灯光、相机）都添加到这里
				// 场景本身不渲染任何内容，只是作为对象的组织结构
				scene = new THREE.Scene();

				// ===================== 创建相机 =====================
				// PerspectiveCamera: 透视相机，模拟人眼视角，有近大远小的效果
				// 参数说明：
				// - 45: 视野角度(FOV)，单位度，垂直视角范围
				// - width / height: 宽高比，保持画面不变形
				// - 0.1: 近裁剪面，距离相机多近开始渲染
				// - 100: 远裁剪面，距离相机多远停止渲染
				camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
				
				// 设置相机初始位置
				// 参数为(x, y, z)三维坐标
				// 这里将相机放在z轴正方向8个单位处，面向场景中心
				camera.position.set(0, 0, 8);

				// ===================== 创建轨道控制器 =====================
				// OrbitControls: 提供鼠标/触摸交互来控制相机
				// 支持左键旋转、右键平移、滚轮缩放（如果启用）
				// 参数：
				// - camera: 要控制的相机对象
				// - renderer.domElement: 事件监听的DOM元素
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 相机与目标点的最小距离（缩放限制）
				// 防止相机过于接近物体，可能造成视觉不适或渲染问题
				controls.minDistance = 5;
				
				// 相机与目标点的最大距离（缩放限制）
				// 防止相机离得太远，物体变得太小
				controls.maxDistance = 20;
				
				// 禁用相机平移功能
				// 设置为false时，用户不能使用右键或中键拖拽平移场景
				controls.enablePan = false;
				
				// 启用阻尼效果（惯性）
				// 当用户停止交互后，相机会有缓动停止的效果，提供更自然的体验
				controls.enableDamping = true;
				
				// 阻尼系数：值越大，停止得越快
				// 范围通常在0到1之间，0.05提供轻微的惯性效果
				controls.dampingFactor = 0.05;

				// ===================== 设置场景灯光 =====================
				// 环境光：均匀照亮场景所有表面的无方向光
				// 参数：
				// - 0xaaaaaa: 光颜色，十六进制RGB值，浅灰色
				// - 0.6: 光强度，影响亮度
				scene.add(new THREE.AmbientLight(0xaaaaaa, 0.6));

				// 方向光：模拟太阳等远距离光源，所有光线平行
				// 参数：
				// - 0xddffdd: 浅绿色光，给场景添加一些色调
				// - 2: 光强度，值较高使场景更明亮
				const light = new THREE.DirectionalLight(0xddffdd, 2);
				
				// 设置光源位置，光源从(5,5,5)点射向原点(0,0,0)
				light.position.set(5, 5, 5);
				
				// 启用此光源的阴影投射能力
				light.castShadow = true;
				
				// 设置阴影贴图尺寸，影响阴影质量
				// 值越大，阴影边缘越清晰，但性能消耗越大
				light.shadow.mapSize.width = 2048;   // 阴影贴图宽度（像素）
				light.shadow.mapSize.height = 2048;  // 阴影贴图高度（像素）
				
				// 阴影偏移值，解决阴影失真问题（"阴影痤疮"）
				// 负值将阴影从表面稍微拉离，避免自阴影伪影
				light.shadow.bias = -0.005;

				// 阴影相机参数设置
				// 方向光的阴影使用正交相机渲染
				const d = 10;  // 阴影相机的半尺寸
				
				// 设置阴影相机的视锥体边界
				// 这些值定义了一个长方体区域，只有该区域内的物体会投射阴影
				light.shadow.camera.left = -d;    // 左边界
				light.shadow.camera.right = d;     // 右边界
				light.shadow.camera.top = d;       // 上边界
				light.shadow.camera.bottom = -d;   // 下边界
				light.shadow.camera.far = 25;      // 远平面，超过此距离不渲染阴影
				
				// 将方向光添加到场景
				scene.add(light);

				// ===================== 加载3D模型 =====================
				// 创建OBJ加载器实例
				// OBJ格式是一种简单的3D模型格式，只包含几何信息
				const loader = new OBJLoader();
				
				// 加载树模型
				// 参数：
				// - 'models/obj/tree.obj': 模型文件路径（相对于HTML文件）
				// - function (object): 加载完成后的回调函数，参数是加载的3D对象
				loader.load('models/obj/tree.obj', function (object) {
					// 初始缩放因子
					let scale = 1.0;

					// 遍历加载对象的所有子元素
					// traverse方法递归访问对象及其所有后代
					object.traverse(function (child) {
						// 检查子元素是否为网格(Mesh)对象
						// 网格是几何体(Geometry)和材质(Material)的组合
						if (child instanceof THREE.Mesh) {
							// 将几何体的原点移动到其中心点
							// 方便后续的旋转、缩放操作围绕中心进行
							child.geometry.center();
							
							// 计算几何体的包围球
							// 包围球是包含整个几何体的最小球体，用于碰撞检测等
							child.geometry.computeBoundingSphere();
							
							// 根据包围球半径计算缩放因子
							// 0.2是任意选择的系数，控制模型的最终大小
							scale = 0.2 * child.geometry.boundingSphere.radius;

							// 创建Phong材质替换默认材质
							// Phong材质支持高光反射，看起来更逼真
							const phongMaterial = new THREE.MeshPhongMaterial({
								color: 0xffffff,      // 基础颜色：白色
								specular: 0x111111,   // 高光颜色：深灰色
								shininess: 5          // 高光强度：值越小，高光区域越大
							});
							
							// 将新材质应用到网格
							child.material = phongMaterial;
							
							// 启用阴影接收：此网格可以显示其他物体投射的阴影
							child.receiveShadow = true;
							
							// 启用阴影投射：此网格可以投射阴影到其他表面
							child.castShadow = true;
						}
					});

					// 设置模型位置：在Y轴上移1个单位
					object.position.y = 1;
					
					// 应用缩放：将模型缩放到合适大小
					// divideScalar: 将向量的每个分量除以标量值
					object.scale.divideScalar(scale);
					
					// 将处理后的模型添加到obj3d容器中
					obj3d.add(object);
				});

				// 将组添加到场景
				// 组(Group)是Object3D的子类，可以包含多个子对象
				// 方便对多个对象进行统一操作（如旋转、位移）
				scene.add(group);
				
				// 将obj3d（包含树的模型）添加到组中
				group.add(obj3d);

				// ===================== 创建随机球体 =====================
				// 创建球体几何体作为模板
				// 参数：
				// - 3: 半径
				// - 48: 宽度分段数（经线），影响球体平滑度
				// - 24: 高度分段数（纬线），影响球体平滑度
				const geometry = new THREE.SphereGeometry(3, 48, 24);

				// 创建20个随机球体
				for (let i = 0; i < 20; i++) {
					// 创建Lambert材质（漫反射材质）
					// Lambert材质计算简单，性能较好，但没有高光
					const material = new THREE.MeshLambertMaterial();
					
					// 设置随机颜色
					// HSL颜色空间：H（色相）随机，S（饱和度）100%，L（亮度）30%
					material.color.setHSL(Math.random(), 1.0, 0.3);

					// 创建网格：几何体 + 材质的组合
					const mesh = new THREE.Mesh(geometry, material);
					
					// 设置随机位置
					// Math.random()返回0-1之间的随机数
					// 乘以4再减2，得到-2到2之间的随机值
					mesh.position.x = Math.random() * 4 - 2;  // X轴位置
					mesh.position.y = Math.random() * 4 - 2;  // Y轴位置
					mesh.position.z = Math.random() * 4 - 2;  // Z轴位置
					
					// 启用阴影功能
					mesh.receiveShadow = true;  // 接收其他物体的阴影
					mesh.castShadow = true;     // 投射阴影到其他物体
					
					// 设置随机缩放
					// Math.random() * 0.3 + 0.1 产生0.1到0.4之间的随机值
					mesh.scale.multiplyScalar(Math.random() * 0.3 + 0.1);
					
					// 将球体添加到组中
					group.add(mesh);
				}

				// ===================== 创建地板 =====================
				// 创建Lambert材质，设置双面渲染
				// side: THREE.DoubleSide 表示材质两面都渲染
				const floorMaterial = new THREE.MeshLambertMaterial({ side: THREE.DoubleSide });
				
				// 创建平面几何体作为地板
				// 参数：宽度12，高度12
				const floorGeometry = new THREE.PlaneGeometry(12, 12);
				
				// 创建地板网格
				const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
				
				// 旋转地板使其水平（默认平面是垂直的）
				// 绕X轴旋转-90度（负值表示顺时针）
				floorMesh.rotation.x -= Math.PI * 0.5;
				
				// 将地板下移1.5个单位
				floorMesh.position.y -= 1.5;
				
				// 将地板添加到组中
				group.add(floorMesh);
				
				// 地板可以接收阴影（其他物体的阴影会投射到地板上）
				floorMesh.receiveShadow = true;

				// ===================== 创建圆环体 =====================
				// 创建圆环几何体（甜甜圈形状）
				// 参数：
				// - 1: 圆环半径（中心到管状体中心的距离）
				// - 0.3: 管状体半径（环的粗细）
				// - 16: 径向分段数（环的平滑度）
				// - 100:  tubular分段数（管状体的平滑度）
				const torusGeometry = new THREE.TorusGeometry(1, 0.3, 16, 100);
				
				// 创建Phong材质，设置淡紫色
				const torusMaterial = new THREE.MeshPhongMaterial({ color: 0xffaaff });
				
				// 创建圆环网格
				const torus = new THREE.Mesh(torusGeometry, torusMaterial);
				
				// 将圆环放在相机前方（负Z方向）
				torus.position.z = -4;
				
				// 将圆环添加到组中
				group.add(torus);
				
				// 启用圆环的阴影功能
				torus.receiveShadow = true;  // 接收阴影
				torus.castShadow = true;     // 投射阴影

				// ===================== 轮廓效果设置 =====================
				// 创建uniform变量，这些值可以在TSL着色器中动态修改
				// uniform变量在着色器程序中是全局的、只读的
				
				// 边缘强度：控制轮廓线的亮度/可见度
				// uniform(3.0): 创建值为3.0的uniform变量
				const edgeStrength = uniform(3.0);
				
				// 边缘发光：轮廓线向外扩散的效果强度
				const edgeGlow = uniform(0.0);
				
				// 边缘厚度：轮廓线的宽度
				const edgeThickness = uniform(1.0);
				
				// 脉动周期：轮廓线脉动动画的速度（0表示无脉动）
				const pulsePeriod = uniform(0);
				
				// 可见边缘颜色：面向相机部分的轮廓线颜色（白色）
				const visibleEdgeColor = uniform(new THREE.Color(0xffffff));
				
				// 隐藏边缘颜色：背向相机部分的轮廓线颜色（深褐色）
				const hiddenEdgeColor = uniform(new THREE.Color(0x4e3636));

				// 创建轮廓效果通道
				// outline函数来自TSL库，创建一个轮廓效果节点
				// 参数：
				// - scene: 要渲染的场景
				// - camera: 当前相机
				// - 配置对象：
				//   - selectedObjects: 需要显示轮廓的物体数组
				//   - edgeGlow: 边缘发光参数
				//   - edgeThickness: 边缘厚度参数
				outlinePass = outline(scene, camera, {
					selectedObjects,    // 当前选中的物体数组（初始为空）
					edgeGlow,           // 边缘发光效果
					edgeThickness       // 边缘厚度
				});

				// 从轮廓通道中解构出可见边缘和隐藏边缘的节点
				// 这些是TSL节点，可以在着色器管道中进一步处理
				const { visibleEdge, hiddenEdge } = outlinePass;

				// 创建脉动效果
				// 使用正弦波创建周期性变化的强度
				
				// 计算周期：time是自动更新的时间uniform
				// time.div(pulsePeriod): 时间除以脉动周期
				// .mul(2): 乘以2，调整周期长度
				const period = time.div(pulsePeriod).mul(2);
				
				// 创建正弦振荡器
				// oscSine(period): 以period为周期的正弦波
				// .mul(.5): 将正弦波的振幅(-1到1)缩放到-0.5到0.5
				// .add(.5): 上移0.5，得到0到1之间的值
				// 最终osc的值在0.5到1.0之间周期性变化
				const osc = oscSine(period).mul(.5).add(.5);

				// 计算基础轮廓颜色
				// 混合可见边缘颜色和隐藏边缘颜色
				// 公式：可见边缘颜色 × 可见边缘 + 隐藏边缘颜色 × 隐藏边缘
				// 然后乘以边缘强度
				const outlineColor = visibleEdge.mul(visibleEdgeColor)
					.add(hiddenEdge.mul(hiddenEdgeColor))
					.mul(edgeStrength);
				
				// 应用脉动效果
				// 条件选择：如果脉动周期大于0，则应用脉动，否则使用静态颜色
				// pulsePeriod.greaterThan(0): 检查脉动周期是否大于0
				// .select(a, b): 如果条件为真返回a，否则返回b
				const outlinePulse = pulsePeriod.greaterThan(0)
					.select(outlineColor.mul(osc), outlineColor);

				// ===================== 后处理管道设置 =====================
				// 创建基础场景渲染通道
				// pass(scene, camera): 创建渲染场景的通道节点
				// .toInspector('Color'): 在调试检查器中显示此通道，标签为'Color'
				const scenePass = pass(scene, camera).toInspector('Color');

				// 创建后处理管理器
				// PostProcessing: Three.js的后处理系统管理器
				// 参数renderer: 用于渲染的WebGPURenderer
				postProcessing = new THREE.PostProcessing(renderer);
				
				// 设置后处理的输出节点
				// 将脉动轮廓效果叠加到基础场景渲染上
				// outlinePulse.add(scenePass): 将轮廓通道和场景通道相加
				// 这实现了轮廓效果与原始场景的混合
				postProcessing.outputNode = outlinePulse.add(scenePass);

				// ===================== 创建GUI控制面板 =====================
				// 使用调试检查器创建参数面板
				// createParameters('Settings'): 创建名为'Settings'的参数面板
				const gui = renderer.inspector.createParameters('Settings');
				
				// 添加边缘强度滑块控件
				// 参数：
				// - edgeStrength: uniform变量
				// - 'value': 要控制的属性名
				// - 0.01, 10: 滑块的最小值和最大值
				// - .name('edgeStrength'): 在GUI中显示的控件名称
				gui.add(edgeStrength, 'value', 0.01, 10).name('边缘强度');
				
				// 添加边缘发光滑块
				gui.add(edgeGlow, 'value', 0.0, 1).name('边缘发光');
				
				// 添加边缘厚度滑块
				gui.add(edgeThickness, 'value', 1, 4).name('边缘厚度');
				
				// 添加脉动周期滑块
				gui.add(pulsePeriod, 'value', 0.0, 5).name('脉动周期');
				
				// 添加可见边缘颜色选择器
				// addColor: 创建颜色选择器控件
				// 第一个参数是包含color属性的对象，初始值为当前颜色
				gui.addColor(
					{ color: visibleEdgeColor.value.getHex(THREE.SRGBColorSpace) },
					'color'
				).onChange((value) => {
					// 当颜色改变时的回调函数
					// 将用户选择的颜色值应用到uniform变量
					visibleEdgeColor.value.set(value);
				}).name('可见边缘颜色');
				
				// 添加隐藏边缘颜色选择器
				gui.addColor(
					{ color: hiddenEdgeColor.value.getHex(THREE.SRGBColorSpace) },
					'color'
				).onChange((value) => {
					// 更新隐藏边缘颜色的uniform变量
					hiddenEdgeColor.value.set(value);
				}).name('隐藏边缘颜色');

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

				// 设置触摸行为
				// touchAction: 'none' 禁用浏览器默认的触摸行为（如滚动）
				// 确保触摸事件完全由我们的代码处理
				renderer.domElement.style.touchAction = 'none';
				
				// 添加指针移动事件监听器
				// pointermove: 兼容鼠标和触摸的事件
				// 用于检测鼠标悬停选择物体
				renderer.domElement.addEventListener('pointermove', onPointerMove);

				// ===================== 事件处理函数定义 =====================
				
				/**
				 * 指针移动事件处理函数
				 * 检测鼠标/触摸位置，更新选中物体
				 * @param {PointerEvent} event - 指针事件对象
				 */
				function onPointerMove(event) {
					// 检查是否为"主"指针事件
					// 在多点触控中，只有主指针（第一个接触点）被处理
					// 避免多个触摸点造成干扰
					if (event.isPrimary === false) return;

					// 将屏幕坐标转换为归一化设备坐标(NDC)
					// NDC范围：x从-1（左）到1（右），y从-1（下）到1（上）
					
					// X坐标转换：屏幕坐标 → [-1, 1]
					// event.clientX: 指针相对于浏览器窗口的X坐标
					// window.innerWidth: 窗口内部宽度
					mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
					
					// Y坐标转换：屏幕坐标 → [1, -1]（Y轴反转）
					// 负号是因为屏幕坐标系的Y轴向下，而3D坐标系的Y轴向上
					mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

					// 检查射线与物体的相交
					checkIntersection();
				}

				/**
				 * 添加选中物体到数组
				 * 当前实现只支持单个选中物体，每次选中会替换之前的选中
				 * @param {THREE.Object3D} object - 要选中的3D对象
				 */
				function addSelectedObject(object) {
					// 清空选中数组（当前只支持单选）
					selectedObjects = [];
					
					// 将新选中的物体添加到数组
					selectedObjects.push(object);
				}

				/**
				 * 检查射线与场景物体的相交
				 * 使用射线投射器从鼠标位置检测命中的物体
				 */
				function checkIntersection() {
					// 设置射线投射器：从相机位置发射射线，经过鼠标位置
					// mouse: 归一化设备坐标
					// camera: 当前相机
					raycaster.setFromCamera(mouse, camera);

					// 检测射线与场景中所有物体的相交
					// intersectObject: 检测射线与指定对象及其所有后代的相交
					// 参数：
					// - scene: 要检测的场景根对象
					// - true: 是否递归检测子对象
					// 返回：包含所有相交信息的数组，按距离排序（最近的在前面）
					const intersects = raycaster.intersectObject(scene, true);

					// 检查是否有相交结果
					if (intersects.length > 0) {
						// 获取第一个（最近的）相交物体
						// intersects[0]: 最近的相交信息
						// .object: 相交的3D对象
						const selectedObject = intersects[0].object;
						
						// 将物体添加到选中数组
						addSelectedObject(selectedObject);
						
						// 更新轮廓效果的选中物体数组
						// 这将触发轮廓效果重新渲染，显示新选中物体的轮廓
						outlinePass.selectedObjects = selectedObjects;
					} else {
						// 如果没有物体被击中
						// 注释掉的代码：清空选中物体，不显示轮廓
						// 当前版本保留上次选中的物体轮廓
						// outlinePass.selectedObjects = [];
					}
				}
			}

			/**
			 * 窗口大小调整处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
			 */
			function onWindowResize() {
				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机的宽高比
				// 宽高比 = 宽度 / 高度
				// 必须与渲染器的宽高比匹配，否则图像会被拉伸
				camera.aspect = width / height;
				
				// 应用新的宽高比到相机的投影矩阵
				// updateProjectionMatrix: 重新计算相机的投影矩阵
				// 当相机参数（如aspect、fov、near、far）改变时必须调用
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				// 使渲染的画布大小与窗口大小一致
				renderer.setSize(width, height);
			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用，用于更新场景状态和渲染
			 * 这是Three.js应用的核心循环
			 */
			function animate() {
				// 更新轨道控制器
				// 处理相机的旋转、缩放、平移动画（如果启用了阻尼）
				controls.update();

				// 执行后处理渲染
				// postProcessing.render(): 渲染整个后处理管道
				// 这会依次执行所有后处理效果，包括轮廓效果
				postProcessing.render();
			}
		</script>
	</body>
</html>