<!-- Three.js 轮廓高亮效果演示 - 详细功能与技术点分析
🎯 项目概述
这是一个基于 Three.js 的 WebGL 3D 交互演示项目，主要实现了实时轮廓高亮效果。当用户将鼠标移动到3D物体上时，物体会显示自定义的轮廓边缘，并可通过控制面板实时调整轮廓的各种参数。 -->
<!-- 🌟 主要功能
1. 动态轮廓高亮
鼠标交互响应：鼠标悬停到任意3D物体时，自动检测并显示轮廓

边缘效果可调：可以调整轮廓的厚度、颜色、发光强度等参数

脉动动画：支持轮廓线的脉动效果，可设置脉动周期

2. 3D场景构成
多样化的3D对象：

一个从外部文件加载的树模型（OBJ格式）

20个随机位置、大小和颜色的球体

一个作为地板的平面

一个紫色的圆环体（甜甜圈形状）

完整的照明系统：

环境光（全局均匀照明）

方向光（模拟太阳光，产生阴影）

3. 交互控制
相机控制：通过 OrbitControls 实现鼠标拖拽旋转、滚轮缩放

参数实时调整：右侧控制面板提供10+个可调参数

场景自动旋转：可开启/关闭场景自动旋转功能

4. 视觉优化
阴影系统：所有物体都支持投射和接收阴影

抗锯齿处理：使用 FXAA 技术平滑边缘

性能监控：实时显示帧率等性能指标

🔧 核心技术点
1. Three.js 核心架构
javascript
// 核心Three.js对象
const scene = new THREE.Scene();          // 3D场景容器
const camera = new THREE.PerspectiveCamera(); // 透视相机
const renderer = new THREE.WebGLRenderer();   // WebGL渲染器
2. 后期处理管线（Post-processing Pipeline）
EffectComposer：后期处理管道管理器

多通道渲染流程：

RenderPass：基础场景渲染

OutlinePass：轮廓高亮处理（核心）

OutputPass：输出到屏幕

ShaderPass(FXAAShader)：抗锯齿处理

3. 轮廓高亮技术实现
原理：基于法线扩展的边缘检测算法

技术要点：

javascript
// OutlinePass 的关键参数
edgeStrength: 3.0    // 边缘强度（亮度）
edgeThickness: 1.0   // 边缘厚度（像素）
edgeGlow: 0.0        // 边缘发光效果
pulsePeriod: 0       // 脉动周期（动画）
4. 物体拾取（Raycasting）
技术原理：从相机位置向鼠标方向发射射线，检测与3D物体的交点

javascript
// 实现代码
raycaster.setFromCamera(mouse, camera);  // 创建射线
const intersects = raycaster.intersectObject(scene, true); // 检测交点
5. GUI参数控制系统
使用 lil-gui 库：轻量级参数控制面板

实时双向绑定：参数调整立即反映到3D效果

丰富的控制类型：

滑块（数值范围）

复选框（布尔值）

颜色选择器（十六进制颜色）

6. 模型加载与处理
javascript
// OBJ模型加载流程
const loader = new OBJLoader();
loader.load('model.obj', (object) => {
    object.traverse((child) => {
        // 几何体居中
        // 材质替换
        // 阴影设置
    });
});
7. 性能优化技术
Stats.js监控：实时显示FPS、内存使用

按需渲染：使用 requestAnimationFrame 优化渲染循环

几何体复用：多个球体复用同一个几何体实例

8. 响应式设计
javascript
// 窗口大小变化处理
function onWindowResize() {
    camera.aspect = width / height;  // 更新相机比例
    composer.setSize(width, height); // 更新合成器尺寸
}
🚀 技术特色与创新点
1. 实时可调性
所有轮廓参数均可实时调整，无需重新编译

提供颜色、厚度、强度等10+个可调参数

2. 完整的交互体验
支持鼠标、触摸等多种交互方式

提供平滑的相机控制（阻尼效果）

3. 生产级代码结构
模块化导入（ES6 Modules）

清晰的函数分离

完善的错误处理（异步加载）

4. 跨平台兼容
支持桌面和移动设备

自适应屏幕尺寸

触摸事件支持

📊 性能考虑
渲染优化：

几何体实例化减少内存占用

阴影贴图尺寸合理配置（1024x1024）

内存管理：

纹理按需加载

几何体居中优化渲染性能

用户体验：

60FPS流畅动画

实时反馈的交互效果

🎨 视觉效果层级
text
屏幕输出
    ↓
FXAA抗锯齿（边缘平滑）
    ↓
最终输出通道
    ↓
轮廓高亮处理（OutlinePass）
    ↓
基础3D场景渲染（RenderPass）
    ↓
WebGL原始渲染
🔍 技术难点与解决方案
难点1：轮廓边缘的精确检测
解决方案：使用基于深度的边缘检测算法，结合法线信息

难点2：性能与效果的平衡
解决方案：可调节的阴影贴图尺寸，按需加载纹理

难点3：跨浏览器兼容性
解决方案：使用标准的WebGL API，避免浏览器特定特性

📈 应用场景
3D产品展示：电商平台的产品高亮展示

游戏开发：角色或物品的选中效果

数据可视化：3D图表的重要数据突出显示

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

虚拟展厅：展品的高亮和详细介绍

🛠 扩展可能性
多物体同时高亮：修改代码支持同时高亮多个物体

轮廓样式扩展：添加虚线、点线等不同轮廓样式

高级交互：添加点击事件、拖拽功能

动画集成：轮廓高亮与物体动画结合

VR/AR适配：支持虚拟现实和增强现实设备 -->


<!DOCTYPE html>
<!-- HTML文档类型声明，告诉浏览器使用HTML5标准解析文档 -->
<html lang="en">
    <!-- HTML根元素，lang="en"表示文档主要语言为英语 -->
	<head>
		<!-- 文档头部，包含元数据和链接资源 -->
		<!-- 修改：将标题替换为中文 -->
		<title>Three.js WebGL - 后期处理 - 轮廓高亮效果演示</title>
		<!-- 页面标题，显示在浏览器标签页上 -->
		
		<meta charset="utf-8">
		<!-- 字符编码声明，指定文档使用UTF-8编码，支持中文等多语言字符 -->
		
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 视口设置，用于响应式网页设计：
		     width=device-width: 宽度设置为设备宽度
		     user-scalable=no: 禁止用户缩放页面
		     minimum-scale=1.0: 最小缩放比例为1.0
		     maximum-scale=1.0: 最大缩放比例为1.0
		     这些设置确保3D场景在不同设备上保持一致的视觉体验 -->
		
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 外部CSS样式表链接：
		     type="text/css": 链接文档类型为CSS
		     rel="stylesheet": 定义当前文档与链接资源的关系为样式表
		     href="main.css": 样式表文件路径 -->
	</head>
	
	<body>
		<!-- 文档主体，包含所有可见内容 -->
		<!-- 修改：将信息区域内容替换为中文 -->
		<div id="info">
			<!-- 信息展示区域，显示项目信息和作者信息 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 轮廓高亮效果演示 
			<!-- Three.js官方网站链接 -->
			作者：<a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> 和 
			<!-- 第一位作者链接 -->
			<a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
			<!-- 第二位作者链接 -->
			<br/><br/>
			<!-- 换行：使用两个br标签创建空行 -->
			使用说明：移动鼠标到物体上可显示轮廓高亮效果，右侧面板可调整轮廓参数
			<!-- 添加使用说明 -->
		</div>

		<!-- Import Map：现代浏览器模块导入映射配置 -->
		<!-- 
			Import Map 是一种浏览器原生支持的模块映射机制，
			允许开发者定义模块标识符与实际URL之间的映射关系
			这样在import语句中可以使用简短的模块名而不是完整的URL
		-->
		<script type="importmap">
			
			{
				"imports": {
					"three": "../build/three.module.js",  
					"three/addons/": "./jsm/"  
				}
			}
		</script>

		<!-- 主JavaScript模块，type="module"表示这是一个ES6模块 -->
		<script type="module">
			// ==================== 模块导入部分 ====================
			// 注意：由于使用了type="module"，这些import语句需要在支持ES6模块的浏览器中运行
			
			// 导入Three.js核心库的所有内容，使用"three"作为模块标识符（在importmap中定义）
			import * as THREE from 'three';

			// 导入性能监控库：Stats.js用于显示帧率、内存使用等性能指标
			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';
			// 导入OBJ模型加载器：用于加载.obj格式的3D模型文件
			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
			// 导入后期处理相关模块：
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';  // 效果合成器
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';          // 渲染通道
			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';          // 着色器通道
			import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';        // 轮廓高亮通道（核心功能）
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';          // 输出通道
			// 导入FXAA抗锯齿着色器：快速近似抗锯齿，用于平滑边缘
			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';

			// ==================== 全局变量声明 ====================
			// 这些变量在整个模块中共享，用于存储Three.js的核心对象和状态
			
			let container, stats;           // container: DOM容器元素，stats: 性能监控器实例
			let camera, scene, renderer, controls;  // Three.js核心对象：
			                                        // camera: 相机，scene: 场景，renderer: 渲染器，controls: 控制器
			let composer, effectFXAA, outlinePass;  // 后期处理相关对象：
			                                        // composer: 效果合成器，effectFXAA: FXAA效果，outlinePass: 轮廓高亮通道

			let selectedObjects = [];  // 存储被选中对象的数组，用于轮廓高亮效果的目标对象

			// 光线投射器和鼠标坐标：用于实现鼠标悬停检测（物体拾取）
			const raycaster = new THREE.Raycaster();  // 光线投射器，用于计算鼠标与3D物体的交点
			const mouse = new THREE.Vector2();        // 二维向量，存储归一化的鼠标坐标（-1到1）

			// 3D对象容器：用于组织和管理场景中的3D对象
			const obj3d = new THREE.Object3D();  // 用于存放加载的树模型
			const group = new THREE.Group();     // 主组，包含所有可旋转的对象

			// 轮廓效果的参数配置对象：这些参数可以通过GUI面板进行调整
			const params = {
				edgeStrength: 3.0,        // 边缘强度：控制轮廓线的亮度，值越大轮廓越明显
				edgeGlow: 0.0,            // 边缘发光效果：轮廓线周围的光晕强度，0表示无光晕
				edgeThickness: 1.0,       // 边缘厚度：轮廓线的粗细，取值范围1-4
				pulsePeriod: 0,           // 脉动周期：轮廓线脉动动画的周期（秒），0表示不脉动
				rotate: false,            // 是否旋转：控制整个场景是否自动旋转
				usePatternTexture: false  // 是否使用纹理图案：轮廓线是否使用纹理图案而非纯色
			};

			// ==================== GUI控制面板配置 ====================
			// 创建GUI界面实例，宽度设置为280像素
			// GUI面板允许用户实时调整轮廓效果的参数
			const gui = new GUI( { width: 280 } );

			// 添加边缘强度控制滑块：最小值0.01，最大值10
			// onChange回调函数在滑块值改变时触发
			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
				// 将滑块值转换为数字并更新轮廓通道的边缘强度
				outlinePass.edgeStrength = Number( value );
			} );

			// 添加边缘发光效果控制滑块：最小值0.0，最大值1
			gui.add( params, 'edgeGlow', 0.0, 1 ).onChange( function ( value ) {
				outlinePass.edgeGlow = Number( value );  // 更新轮廓边缘发光强度
			} );

			// 添加边缘厚度控制滑块：最小值1，最大值4（整数）
			gui.add( params, 'edgeThickness', 1, 4 ).onChange( function ( value ) {
				outlinePass.edgeThickness = Number( value );  // 更新轮廓边缘厚度
			} );

			// 添加脉动周期控制滑块：最小值0.0，最大值5（秒）
			gui.add( params, 'pulsePeriod', 0.0, 5 ).onChange( function ( value ) {
				outlinePass.pulsePeriod = Number( value );  // 更新轮廓脉动周期
			} );

			// 添加旋转控制复选框：控制场景是否自动旋转
			gui.add( params, 'rotate' );

			// 添加纹理图案使用控制复选框：控制轮廓线是否使用纹理
			gui.add( params, 'usePatternTexture' ).onChange( function ( value ) {
				outlinePass.usePatternTexture = value;  // 更新轮廓图案纹理使用状态
			} );

			// 轮廓颜色配置类：用于管理轮廓线的两种颜色
			function Configuration() {
				this.visibleEdgeColor = '#ffffff';  // 可见边缘颜色：白色，默认显示颜色
				this.hiddenEdgeColor = '#190a05';   // 隐藏边缘颜色：深棕色（接近黑色）
				// 隐藏边缘是当轮廓线被其他物体遮挡时的颜色
			}

			// 创建颜色配置实例
			const conf = new Configuration();

			// 添加可见边缘颜色选择器：允许用户选择轮廓线的可见部分颜色
			gui.addColor( conf, 'visibleEdgeColor' ).onChange( function ( value ) {
				// Three.js使用THREE.Color对象表示颜色
				// set()方法将十六进制字符串转换为THREE.Color
				outlinePass.visibleEdgeColor.set( value );
			} );

			// 添加隐藏边缘颜色选择器：允许用户选择轮廓线的隐藏部分颜色
			gui.addColor( conf, 'hiddenEdgeColor' ).onChange( function ( value ) {
				outlinePass.hiddenEdgeColor.set( value );  // 更新隐藏边缘颜色
			} );

			// ==================== 初始化函数调用 ====================
			// 调用主初始化函数，启动整个应用程序
			init();

			/**
			 * 主初始化函数
			 * 负责设置整个3D场景，包括渲染器、相机、灯光、模型和后期处理效果
			 * 这是整个应用程序的入口点
			 */
			function init() {
				// 创建主容器div元素，用于存放3D画布和性能监控器
				container = document.createElement( 'div' );
				// 将容器添加到body元素的末尾
				document.body.appendChild( container );

				// 获取浏览器窗口的内部尺寸（不包括浏览器UI）
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 创建WebGL渲染器实例
				// WebGLRenderer是Three.js的核心渲染器，使用WebGL API进行3D渲染
				renderer = new THREE.WebGLRenderer();
				renderer.shadowMap.enabled = true;  // 启用阴影映射，允许物体投射和接收阴影
				// 注意：此demo中暂时不支持pixelRatio设置（高DPI设备优化）
				renderer.setSize( width, height );  // 设置渲染器输出canvas的尺寸
				renderer.setAnimationLoop( animate );  // 设置动画循环函数，替代传统的requestAnimationFrame
				// 将渲染器的canvas元素（renderer.domElement）添加到body中
				document.body.appendChild( renderer.domElement );

				// 创建3D场景
				// Scene是所有3D对象的容器，包含网格、灯光、相机等
				scene = new THREE.Scene();

				// 创建透视相机
				// 参数说明：
				// 45 - 视野角度（FOV），单位度，较大的值产生广角效果
				// width / height - 纵横比，通常使用窗口宽高比
				// 0.1 - 近裁剪面，距离相机多近的物体开始渲染
				// 100 - 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
				camera.position.set( 0, 0, 8 );  // 设置相机初始位置：x=0, y=0, z=8

				// 创建轨道控制器
				// OrbitControls允许用户使用鼠标交互控制相机：
				// - 左键拖动：旋转场景
				// - 右键拖动：平移场景（在此demo中禁用）
				// - 滚轮：缩放场景
				controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 5;  // 相机与目标点的最小距离，限制缩放最近距离
				controls.maxDistance = 20; // 相机与目标点的最大距离，限制缩放最远距离
				controls.enablePan = false;  // 禁用平移控制，只允许旋转和缩放
				controls.enableDamping = true;  // 启用阻尼效果，使相机移动有惯性，更平滑
				controls.dampingFactor = 0.05;  // 阻尼系数，值越小惯性越大

				// ==================== 光照设置 ====================
				// 光照是3D场景的重要组成部分，决定了物体的明暗和阴影
				
				// 添加环境光
				// 环境光提供均匀的全场景照明，没有方向，不产生阴影
				// 参数：颜色(0xaaaaaa - 浅灰色)，强度(0.6)
				scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.6 ) );

				// 创建方向光（模拟太阳光）
				// 方向光有明确的方向，可以产生阴影，用于模拟室外阳光
				const light = new THREE.DirectionalLight( 0xddffdd, 2 );
				light.position.set( 5, 5, 5 );  // 设置光源位置
				light.castShadow = true;  // 启用阴影投射
				// 阴影贴图尺寸：更大的尺寸产生更清晰的阴影，但性能消耗更大
				light.shadow.mapSize.width = 1024;   // 阴影贴图宽度
				light.shadow.mapSize.height = 1024;  // 阴影贴图高度

				// 阴影相机参数设置
				// 方向光的阴影通过一个正交相机（shadow camera）来渲染
				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模型 ====================
				// 使用OBJLoader加载外部3D模型文件
				const loader = new OBJLoader();
				// 加载树模型文件
				// loader.load()是异步函数，加载完成后执行回调函数
				loader.load( 'models/obj/tree.obj', function ( object ) {
					// 加载完成的回调函数，object参数是加载的3D对象
					let scale = 1.0;  // 初始缩放比例

					// traverse()方法递归遍历对象及其所有子对象
					object.traverse( function ( child ) {
						// 检查子对象是否是网格（Mesh）
						// 网格是Three.js中可渲染的基本几何体
						if ( child instanceof THREE.Mesh ) {
							child.geometry.center();  // 将几何体居中，使其中心点在(0,0,0)
							child.geometry.computeBoundingSphere();  // 计算边界球，用于后续的缩放计算
							// 计算缩放比例：使模型大小适合场景
							// boundingSphere.radius是边界球的半径
							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;         // 允许物体投射阴影
						}
					} );

					object.position.y = 1;  // 设置垂直位置，将树向上移动1个单位
					object.scale.divideScalar( scale );  // 应用缩放，使树的大小标准化
					obj3d.add( object );  // 将树模型添加到obj3d容器
				} );

				// 将组添加到场景
				scene.add( group );   // 将主组添加到场景
				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色彩空间设置随机颜色
					// HSL：色相(Hue)、饱和度(Saturation)、亮度(Lightness)
					material.color.setHSL( Math.random(), 1.0, 0.3 );

					// 创建网格对象：几何体 + 材质
					const mesh = new THREE.Mesh( geometry, material );
					
					// 随机位置：在-2到2的范围内
					// Math.random()返回0-1的随机数，乘以4减2得到-2到2的范围
					mesh.position.x = Math.random() * 4 - 2;
					mesh.position.y = Math.random() * 4 - 2;
					mesh.position.z = Math.random() * 4 - 2;
					
					mesh.receiveShadow = true;  // 球体接收阴影
					mesh.castShadow = true;     // 球体投射阴影
					// 随机缩放：0.1到0.4倍
					mesh.scale.multiplyScalar( Math.random() * 0.3 + 0.1 );
					
					group.add( mesh );  // 将球体添加到主组
				}

				// ==================== 创建地板 ====================
				// 创建地板材质
				// side: THREE.DoubleSide 表示材质两面都渲染（正面和反面）
				const floorMaterial = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );

				// 创建平面几何体作为地板
				const floorGeometry = new THREE.PlaneGeometry( 12, 12 );  // 宽12，高12
				const floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
				floorMesh.rotation.x -= Math.PI * 0.5;  // 旋转90度，使平面水平（默认平面是垂直的）
				floorMesh.position.y -= 1.5;  // 向下移动1.5个单位，将地板放在场景底部
				group.add( floorMesh );  // 将地板添加到主组
				floorMesh.receiveShadow = true;  // 地板接收阴影

				// ==================== 创建圆环 ====================
				// 创建圆环几何体（甜甜圈形状）
				// 参数：半径=1，管半径=0.3，径向分段数=16，管分段数=100
				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 );
				torus.position.z = - 4;  // 设置Z轴位置，放在场景后方
				group.add( torus );  // 将圆环添加到主组
				torus.receiveShadow = true;  // 圆环接收阴影
				torus.castShadow = true;     // 圆环投射阴影

				// ==================== 性能监控 ====================
				// 创建Stats.js实例，用于监控渲染性能
				stats = new Stats();
				// 将性能监控器的DOM元素添加到容器中
				// stats.dom是一个div元素，包含帧率、内存等信息的显示
				container.appendChild( stats.dom );

				// ==================== 后期处理设置 ====================
				// 后期处理（Post-processing）是在基础渲染之后应用的图像处理效果
				// EffectComposer是后期处理的管道管理器

				// 创建效果合成器，传入渲染器作为参数
				composer = new EffectComposer( renderer );

				// 添加渲染通道（RenderPass）
				// 这是基础渲染通道，将3D场景渲染到纹理中
				const renderPass = new RenderPass( scene, camera );
				composer.addPass( renderPass );  // 将渲染通道添加到合成器

				// 创建轮廓高亮通道（OutlinePass）
				// 这是核心功能，用于为选中的物体添加轮廓高亮
				// 参数：渲染尺寸、场景、相机
				outlinePass = new OutlinePass( 
					new THREE.Vector2( window.innerWidth, window.innerHeight ), 
					scene, 
					camera 
				);
				composer.addPass( outlinePass );  // 将轮廓通道添加到合成器

				// 加载轮廓纹理图案
				// 纹理可以给轮廓线添加图案效果，而不是纯色线条
				const textureLoader = new THREE.TextureLoader();
				// 异步加载纹理图片
				textureLoader.load( 'textures/tri_pattern.jpg', function ( texture ) {
					outlinePass.patternTexture = texture;  // 将纹理赋给轮廓通道
					// 设置纹理重复模式，使图案可以平铺
					texture.wrapS = THREE.RepeatWrapping;  // 水平方向重复
					texture.wrapT = THREE.RepeatWrapping;  // 垂直方向重复
				} );

				// 添加输出通道（OutputPass）
				// 输出通道将后期处理的结果输出到屏幕
				const outputPass = new OutputPass();
				composer.addPass( outputPass );

				// 添加FXAA抗锯齿效果（ShaderPass）
				// FXAA（快速近似抗锯齿）是一种后处理抗锯齿技术
				// 比传统MSAA性能更好，但效果略差
				effectFXAA = new ShaderPass( FXAAShader );
				// 设置FXAA的分辨率参数，值越小抗锯齿效果越强
				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
				composer.addPass( effectFXAA );

				// ==================== 事件监听器 ====================
				// 窗口大小变化监听：当浏览器窗口大小改变时调整渲染
				window.addEventListener( 'resize', onWindowResize );

				// 鼠标/触摸移动监听
				// 禁用默认的触摸行为，避免与3D交互冲突
				renderer.domElement.style.touchAction = 'none';
				// 添加指针移动事件监听器（支持鼠标和触摸）
				renderer.domElement.addEventListener( 'pointermove', onPointerMove );

				/**
				 * 鼠标/触摸移动事件处理函数
				 * 将屏幕坐标转换为3D空间坐标，并检测鼠标下的物体
				 * @param {PointerEvent} event - 指针事件对象，包含位置信息
				 */
				function onPointerMove( event ) {
					// 检查是否是主指针事件（避免多指触摸的干扰）
					// 在多指触摸设备上，只有第一个手指被认为是主指针
					if ( event.isPrimary === false ) return;

					// 将屏幕坐标转换为归一化设备坐标（NDC）
					// NDC范围：x轴从左到右为-1到1，y轴从下到上为-1到1
					// clientX/clientY是相对于浏览器视口的坐标
					mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
					// y坐标需要反转，因为屏幕坐标系原点在左上角，而NDC原点在中心
					mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

					// 调用函数检查光线与物体的交集
					checkIntersection();
				}

				/**
				 * 添加选中对象到数组
				 * 当鼠标移动到物体上时，将该物体添加到选中数组
				 * @param {THREE.Object3D} object - 要添加的3D对象
				 */
				function addSelectedObject( object ) {
					selectedObjects = [];  // 清空数组，每次只高亮一个物体
					selectedObjects.push( object );  // 将新选中的物体添加到数组
				}

				/**
				 * 检查光线与物体的交集（物体拾取）
				 * 使用光线投射技术检测鼠标位置下是否有3D物体
				 * 这是实现鼠标交互的核心技术
				 */
				function checkIntersection() {
					// 从相机位置向鼠标方向发射光线
					// setFromCamera()方法根据鼠标位置和相机创建一条射线
					raycaster.setFromCamera( mouse, camera );

					// 检测光线与场景中所有物体的交集
					// intersectObject()检测光线与指定对象的交集
					// 第二个参数true表示递归检测所有子对象
					const intersects = raycaster.intersectObject( scene, true );

					// 如果有交集（鼠标下有物体）
					if ( intersects.length > 0 ) {
						// 获取第一个相交的物体（最靠近相机的物体）
						const selectedObject = intersects[ 0 ].object;
						addSelectedObject( selectedObject );  // 添加到选中数组
						outlinePass.selectedObjects = selectedObjects;  // 更新轮廓效果的目标物体
					} 
					// 注意：这里注释掉了else分支，意味着当鼠标没有指向物体时，
					// 轮廓高亮会保持上次的状态。如果需要清除高亮，可以取消注释下面的代码：
					// else {
					//     outlinePass.selectedObjects = [];  // 清空选中数组，取消高亮
					// }
				}
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，调整相机、渲染器和后期处理的相关参数
			 * 确保3D场景正确适应新的窗口尺寸
			 */
			function onWindowResize() {
				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机纵横比
				// 纵横比改变会影响透视投影，需要更新相机投影矩阵
				camera.aspect = width / height;
				camera.updateProjectionMatrix();  // 重新计算投影矩阵

				// 更新渲染器尺寸
				renderer.setSize( width, height );
				// 更新效果合成器尺寸
				composer.setSize( width, height );

				// 更新FXAA抗锯齿的分辨率参数
				// 窗口尺寸改变后，需要重新计算抗锯齿的采样密度
				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 这是Three.js的核心动画循环，每帧调用一次（通常60fps）
			 * 负责更新场景状态和重新渲染
			 */
			function animate() {
				// 开始性能监控帧计时
				stats.begin();

				// 获取当前高精度时间（毫秒）
				// performance.now()比Date.now()精度更高，适合动画计时
				const timer = performance.now();

				// 如果启用了旋转参数，更新主组的旋转角度
				// 使整个场景缓慢旋转，展示3D效果
				if ( params.rotate ) {
					// timer * 0.0001 使旋转速度与时间相关，与帧率无关
					// 这样无论帧率高低，旋转速度保持一致
					group.rotation.y = timer * 0.0001;
				}

				// 更新轨道控制器
				// 如果启用了阻尼效果，这里会计算相机的平滑移动
				controls.update();

				// 使用合成器渲染场景
				// composer.render()会按顺序执行所有后期处理通道
				// 包括：基础渲染 -> 轮廓高亮 -> 输出 -> FXAA抗锯齿
				composer.render();

				// 结束性能监控帧计时并更新显示
				stats.end();
			}
		</script>
	</body>
</html>