<!-- Three.js Sobel边缘检测示例 - 功能描述与技术分析
📋 项目功能概述
这是一个基于Three.js的WebGL 3D图形应用，核心功能是实现实时图像边缘检测效果。具体功能包括：

主要功能模块
3D场景展示

创建一个黄色的圆环结（Torus Knot）作为主要3D物体

实现完整的3D光照系统（环境光 + 点光源）

提供交互式的相机控制

实时边缘检测

使用Sobel算子算法检测3D物体的边缘

将彩色3D场景转换为黑白边缘图像

效果可实时启用/禁用

交互控制系统

鼠标拖拽旋转3D场景

GUI控制面板切换效果

响应式窗口大小调整

🔧 核心技术点
1. Three.js核心架构
场景图系统：使用THREE.Scene组织3D对象

相机系统：透视相机（PerspectiveCamera）模拟人眼视角

渲染管线：WebGLRenderer将3D数据渲染到2D画布

几何体系统：参数化几何体（TorusKnotGeometry）生成复杂形状

2. 后期处理管线（核心创新点）
javascript
// 后期处理管线结构
EffectComposer
├── RenderPass（原始3D场景渲染）
├── ShaderPass（LuminosityShader - 灰度转换）
└── ShaderPass（SobelOperatorShader - 边缘检测）
管线工作流程：

RenderPass：将3D场景渲染到离屏纹理

LuminosityShader：RGB → 灰度转换（亮度计算）

SobelOperatorShader：应用Sobel算子检测边缘

3. Sobel边缘检测算法实现
算法原理
Sobel算子是一种离散微分算子，通过计算图像梯度来检测边缘：

text
Gx = [-1 0 1]   Gy = [-1 -2 -1]
     [-2 0 2]        [ 0  0  0]
     [-1 0 1]        [ 1  2  1]
     
边缘强度 = √(Gx² + Gy²)
GPU着色器实现
glsl
// SobelOperatorShader核心代码概念
uniform sampler2D tDiffuse;  // 输入纹理（灰度图像）
uniform vec2 resolution;     // 纹理分辨率

void main() {
    // 获取3x3邻域像素
    vec2 texel = vec2(1.0 / resolution.x, 1.0 / resolution.y);
    
    // Sobel卷积计算
    float Gx = -1.0 * texture2D(tDiffuse, uv + texel * vec2(-1, -1)).r
               -2.0 * texture2D(tDiffuse, uv + texel * vec2(-1,  0)).r
               -1.0 * texture2D(tDiffuse, uv + texel * vec2(-1,  1)).r
               +1.0 * texture2D(tDiffuse, uv + texel * vec2( 1, -1)).r
               +2.0 * texture2D(tDiffuse, uv + texel * vec2( 1,  0)).r
               +1.0 * texture2D(tDiffuse, uv + texel * vec2( 1,  1)).r;
    
    // 类似计算Gy...
    
    // 最终边缘强度
    float edge = sqrt(Gx*Gx + Gy*Gy);
    gl_FragColor = vec4(vec3(edge), 1.0);
}
4. GPU加速与性能优化
WebGL并行计算优势
片段着色器并行执行：每个像素独立计算，充分利用GPU并行能力

纹理采样优化：硬件加速的纹理读取操作

单次渲染完成：避免CPU-GPU频繁数据传输

关键技术特性
离屏渲染：使用FBO（帧缓冲对象）进行中间结果存储

多遍渲染：多个ShaderPass组成处理管线

分辨率适配：根据设备像素比自动调整渲染精度

5. 交互与用户体验
相机控制系统
轨道控制器（OrbitControls）：基于球面坐标的相机控制

第一人称视角模拟：用户可自由探索3D场景

光源跟随相机：点光源附加在相机上，确保场景始终被照亮

响应式设计
实时窗口大小调整：自动更新渲染分辨率和相机参数

设备像素比适配：支持Retina等高DPI显示设备

性能自适应：保持帧率稳定

6. 模块化与可维护性
ES6模块系统
javascript
// 清晰的模块依赖管理
import * as THREE from 'three';                      // 核心库
import { EffectComposer } from 'postprocessing/';    // 后期处理
import { SobelOperatorShader } from 'shaders/';      // 着色器
配置驱动设计
javascript
// 参数集中管理，便于扩展
const params = {
    enable: true,           // 效果开关
    // 可扩展参数：
    // threshold: 0.5,      // 边缘检测阈值
    // blurRadius: 2.0,     // 高斯模糊半径
    // edgeColor: 0xffffff  // 边缘颜色
};
🚀 技术亮点总结
创新性
实时性：60FPS的实时边缘检测，传统CPU实现难以达到

可视化效果：将数学算法转化为直观的视觉体验

交互性：用户可实时探索算法效果

工程价值
教育意义：清晰展示Sobel算法原理

技术示范：Three.js后期处理的完整示例

性能基准：WebGL图形处理的能力展示

可扩展性
算法替换：可轻松替换为其他边缘检测算法（Canny、Laplacian等）

效果组合：可添加更多后期处理效果（模糊、发光、色彩调整等）

场景扩展：支持复杂3D场景和动态内容

📊 技术栈层次
text
应用层
  ├── 用户界面（GUI控制面板）
  ├── 交互控制（OrbitControls）
  └── 响应式布局

逻辑层
  ├── 场景管理（Three.js Scene）
  ├── 相机控制（PerspectiveCamera）
  └── 动画循环（requestAnimationFrame）

渲染层（核心）
  ├── WebGL渲染器
  ├── 后期处理管线
  └── GPU着色器

算法层
  ├── Sobel边缘检测算法
  ├── 图像灰度转换
  └── 卷积运算
🎯 实际应用场景
计算机视觉教学：边缘检测算法的可视化演示

图像处理原型：Web端图像处理算法验证

艺术效果生成：3D模型的风格化渲染

性能基准测试：WebGL图形处理能力测试

Three.js学习示例：后期处理技术的最佳实践 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据区域 -->
		<!-- 页面标题：显示在浏览器标签页上 -->
		<title>Three.js WebGL 示例 - 后期处理 - Sobel算子边缘检测</title>
		
		<!-- 字符编码声明：指定文档使用UTF-8编码，支持中文字符 -->
		<meta charset="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（不放大）
		-->
		
		<!-- 外部样式表链接：引入CSS文件进行页面样式设置 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 页面信息展示区域 -->
		<!-- 
			id="info": 用于CSS样式和JavaScript操作的唯一标识符
			这个div用于显示项目的基本信息和链接
		-->
		<div id="info">
			<!-- 
				外部链接：指向Three.js官方网站
				target="_blank": 在新标签页中打开链接
				rel="noopener noreferrer": 安全设置，防止新页面访问原始页面的window对象
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> 
			- WebGL 3D图形库 - 后期处理技术<br/>
			<!-- 技术说明：当前页面实现的具体效果 -->
			Sobel算子（图像边缘检测算法）
		</div>

		<!-- 
			导入映射表（Import Map）
			作用：定义JavaScript模块导入时的路径映射关系
			这是ES6模块系统的配置，告诉浏览器如何解析模块导入语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module": 声明这是一个ES6模块，支持模块化导入导出
			模块化的优势：代码组织清晰，避免全局变量污染，支持异步加载
		-->
		<script type="module">
			// ========================================
			// 第一部分：模块导入（Dependencies Import）
			// ========================================
			
			// 导入Three.js核心库的所有功能
			// THREE对象现在包含了Three.js的所有核心类和方法
			import * as THREE from 'three';

			// 导入GUI（图形用户界面）库
			// GUI用于创建交互式控制面板，可以实时调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入轨道控制器（OrbitControls）
			// 允许用户通过鼠标拖拽、滚轮缩放来交互式控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入后期处理相关模块
			// EffectComposer: 效果合成器，管理后期处理流程
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			// RenderPass: 渲染通道，将3D场景渲染到后期处理管线中
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			// ShaderPass: 着色器通道，用于应用自定义着色器效果
			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';

			// 导入预定义着色器
			// LuminosityShader: 亮度着色器，将彩色图像转换为灰度图像
			import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
			// SobelOperatorShader: Sobel算子着色器，实现图像边缘检测
			import { SobelOperatorShader } from 'three/addons/shaders/SobelOperatorShader.js';

			// ========================================
			// 第二部分：全局变量声明（Global Variables）
			// ========================================
			
			// Three.js核心对象
			let camera;      // 相机对象：定义观察3D场景的视角
			let scene;       // 场景对象：包含所有3D物体、灯光等的容器
			let renderer;    // 渲染器对象：负责将3D场景绘制到2D画布上
			let composer;    // 效果合成器对象：管理后期处理流程

			// 后期处理效果对象
			let effectSobel; // Sobel边缘检测效果实例

			// 参数配置对象
			// 存储可以在GUI中调整的参数
			const params = {
				enable: true  // 布尔值：控制是否启用后期处理效果
				// 默认值为true，表示初始状态下效果是开启的
			};

			// ========================================
			// 第三部分：初始化函数调用（Initialization）
			// ========================================
			
			// 程序入口：调用初始化函数
			// 注意：这里只是调用，函数定义在下面
			init();

			// ========================================
			// 第四部分：函数定义（Function Definitions）
			// ========================================

			/**
			 * 初始化函数 - 整个应用的启动入口
			 * 功能：创建所有必要的Three.js对象，设置场景、相机、灯光、物体等
			 * 执行顺序：创建基础3D场景 -> 设置渲染器 -> 配置后期处理 -> 添加交互控制
			 */
			function init() {
				// ------------------------------------------------------
				// 步骤1：创建3D场景（Creating the 3D Scene）
				// ------------------------------------------------------
				
				// 创建场景对象
				// 场景是所有3D物体的容器，相当于一个虚拟的3D世界
				scene = new THREE.Scene();
				// 场景背景色默认为黑色（0x000000），这里没有显式设置

				// ------------------------------------------------------
				// 步骤2：创建并配置相机（Creating and Configuring Camera）
				// ------------------------------------------------------
				
				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 参数1: 70 - 视野角度（Field of View），单位是度，垂直方向的可视角度
				// 参数2: window.innerWidth / window.innerHeight - 宽高比，根据窗口尺寸计算
				// 参数3: 0.1 - 近裁剪平面，距离相机多近的物体会被裁剪（不渲染）
				// 参数4: 100 - 远裁剪平面，距离相机多远的物体会被裁剪（不渲染）
				camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
				
				// 设置相机位置
				// set(x, y, z): 在3D空间中定位相机
				// x: 水平方向（右为正），y: 垂直方向（上为正），z: 深度方向（从屏幕向外为正）
				camera.position.set(0, 1, 3);
				
				// 让相机看向场景的中心点(0,0,0)
				// lookAt()方法调整相机的旋转，使其朝向指定坐标
				camera.lookAt(scene.position); // scene.position默认是(0,0,0)

				// ------------------------------------------------------
				// 步骤3：创建3D物体并添加到场景（Creating 3D Objects）
				// ------------------------------------------------------
				
				// 创建几何体：圆环结（Torus Knot）
				// 参数说明：
				// 参数1: 1 - 圆环的主要半径
				// 参数2: 0.3 - 圆管的半径
				// 参数3: 256 - 圆环的分段数（影响平滑度）
				// 参数4: 32 - 圆管的分段数（影响平滑度）
				const geometry = new THREE.TorusKnotGeometry(1, 0.3, 256, 32);
				
				// 创建材质：Phong材质（模拟光滑表面，支持高光反射）
				// Phong材质会对光线产生反应，创建出更真实的光照效果
				const material = new THREE.MeshPhongMaterial({ 
					color: 0xffff00 // 颜色值：黄色（十六进制RGB）
				});

				// 创建网格（Mesh）：几何体和材质的结合体
				// Mesh是Three.js中最基本的可渲染3D对象
				const mesh = new THREE.Mesh(geometry, material);
				
				// 将网格添加到场景中
				// 只有添加到场景中的物体才会被渲染
				scene.add(mesh);

				// ------------------------------------------------------
				// 步骤4：设置光照（Setting Up Lighting）
				// ------------------------------------------------------
				
				// 创建环境光（Ambient Light）
				// 环境光均匀地照亮场景中的所有物体，没有方向性
				// 参数：0xe7e7e7 - 浅灰色（十六进制颜色值）
				const ambientLight = new THREE.AmbientLight(0xe7e7e7);
				
				// 将环境光添加到场景
				scene.add(ambientLight);

				// 创建点光源（Point Light）
				// 点光源从一个点向所有方向发射光线，类似灯泡
				// 参数1: 0xffffff - 白色光
				// 参数2: 20 - 光照强度，值越大越亮
				const pointLight = new THREE.PointLight(0xffffff, 20);
				
				// 将点光源添加到相机上
				// 这样光源会跟随相机移动，始终保持对物体的照明
				camera.add(pointLight);
				
				// 将相机（包含点光源）添加到场景
				// 注意：相机本身也是Object3D，可以添加到场景中
				scene.add(camera);

				// ------------------------------------------------------
				// 步骤5：创建渲染器（Creating the Renderer）
				// ------------------------------------------------------
				
				// 创建WebGL渲染器
				// WebGLRenderer使用WebGL API在HTML Canvas元素上绘制3D图形
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比率
				// 在高DPI屏幕（如Retina显示屏）上，这可以确保清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了旧的requestAnimationFrame方式
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// renderer.domElement是HTMLCanvasElement对象
				document.body.appendChild(renderer.domElement);

				// ======================================================
				// 后期处理系统配置（Post-Processing System Setup）
				// ======================================================
				
				// ------------------------------------------------------
				// 步骤6：创建效果合成器（Effect Composer）
				// ------------------------------------------------------
				
				// EffectComposer是后期处理的核心管理器
				// 它管理一个渲染通道（Render Pass）和多个后处理通道（Post-Processing Passes）的管线
				// 参数：renderer - 使用之前创建的WebGL渲染器
				composer = new EffectComposer(renderer);
				
				// ------------------------------------------------------
				// 步骤7：添加渲染通道（Render Pass）
				// ------------------------------------------------------
				
				// 渲染通道：将3D场景渲染到纹理（Texture）中
				// 参数1: scene - 要渲染的场景
				// 参数2: camera - 用于渲染的相机
				const renderPass = new RenderPass(scene, camera);
				
				// 将渲染通道添加到效果合成器
				// 这是后期处理管线的第一步，必须先执行
				composer.addPass(renderPass);

				// ------------------------------------------------------
				// 步骤8：添加灰度转换通道（Grayscale Conversion）
				// ------------------------------------------------------
				
				// 创建灰度转换效果
				// ShaderPass用于应用自定义着色器效果
				// LuminosityShader是一个预定义的着色器，将彩色图像转换为灰度
				const effectGrayScale = new ShaderPass(LuminosityShader);
				
				// 将灰度转换通道添加到效果合成器
				// 这会作为后期处理的第二步执行
				composer.addPass(effectGrayScale);

				// 技术说明：
				// 在实际的边缘检测应用中，通常在Sobel算子之前应用高斯模糊
				// 高斯模糊可以平滑图像噪声，使边缘检测结果更清晰
				// 此示例为了简化，省略了高斯模糊步骤
				// 可以添加：import { GaussianBlurShader } 并创建对应的ShaderPass

				// ------------------------------------------------------
				// 步骤9：添加Sobel边缘检测通道（Edge Detection）
				// ------------------------------------------------------
				
				// 创建Sobel边缘检测效果
				// SobelOperatorShader实现了Sobel边缘检测算法
				effectSobel = new ShaderPass(SobelOperatorShader);
				
				// 设置Sobel着色器的分辨率参数
				// 着色器需要知道渲染目标的分辨率来进行正确的像素计算
				
				// 设置水平方向分辨率：窗口宽度 × 设备像素比
				// 设备像素比确保了在高DPI屏幕上也能正确计算
				effectSobel.uniforms['resolution'].value.x = window.innerWidth * window.devicePixelRatio;
				
				// 设置垂直方向分辨率：窗口高度 × 设备像素比
				effectSobel.uniforms['resolution'].value.y = window.innerHeight * window.devicePixelRatio;
				
				// 将Sobel边缘检测通道添加到效果合成器
				// 这是后期处理管线的第三步，也是最后一步
				composer.addPass(effectSobel);
				
				// ------------------------------------------------------
				// Sobel算子算法原理简介：
				// Sobel算子是一种图像边缘检测算法，通过计算图像亮度梯度来检测边缘
				// 它使用两个3×3卷积核（水平Gx和垂直Gy）与图像进行卷积运算
				// 最终边缘强度 = sqrt(Gx² + Gy²)
				// 在着色器中，这个过程对每个像素并行执行，非常高效
				// ------------------------------------------------------

				// ------------------------------------------------------
				// 步骤10：添加交互控制（Adding Interactive Controls）
				// ------------------------------------------------------
				
				// 创建轨道控制器（OrbitControls）
				// 参数1: camera - 要控制的相机
				// 参数2: renderer.domElement - 事件监听的DOM元素（canvas）
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 禁用缩放功能
				// 设置为false后，用户不能使用鼠标滚轮或手势进行缩放
				controls.enableZoom = false;
				
				// 其他可配置选项（示例中未设置，但可用）：
				// controls.enablePan = true;      // 启用平移
				// controls.enableDamping = true;  // 启用阻尼效果（惯性）
				// controls.dampingFactor = 0.05;  // 阻尼系数
				// controls.rotateSpeed = 1.0;     // 旋转速度
				// controls.maxPolarAngle = Math.PI; // 最大俯仰角

				// ------------------------------------------------------
				// 步骤11：创建GUI控制面板（Creating GUI Panel）
				// ------------------------------------------------------
				
				// 创建GUI实例
				// GUI会生成一个可折叠的控制面板，通常出现在页面右上角
				const gui = new GUI();
				
				// 向GUI添加控制器
				// 参数1: params - 参数对象
				// 参数2: 'enable' - 要控制的属性名
				// 这会创建一个复选框，用于切换后期处理效果的启用/禁用
				gui.add(params, 'enable');
				
				// 其他GUI添加方法示例：
				// gui.add(params, 'intensity', 0, 1).name('强度'); // 滑块
				// gui.addColor(params, 'color').name('颜色');       // 颜色选择器
				
				// 默认打开GUI面板
				// 如果设置为false，面板初始状态是折叠的
				gui.open();

				// ------------------------------------------------------
				// 步骤12：添加窗口大小变化监听器（Window Resize Listener）
				// ------------------------------------------------------
				
				// 监听窗口的resize事件
				// 当用户调整浏览器窗口大小时，会触发onWindowResize函数
				window.addEventListener('resize', onWindowResize);
				
				// 注意：这里使用了事件监听，需要在页面卸载时移除监听器
				// 但在此简单示例中，没有实现页面卸载的清理工作
				
				// 初始化完成，此时：
				// 1. 3D场景已创建并包含物体和灯光
				// 2. 渲染器已设置并附加到DOM
				// 3. 后期处理管线已配置
				// 4. 交互控制已启用
				// 5. 动画循环即将开始
			}

			/**
			 * 窗口大小变化处理函数
			 * 功能：当浏览器窗口大小改变时，调整所有相关对象的尺寸和参数
			 * 触发条件：用户调整浏览器窗口大小、切换全屏、设备旋转等
			 */
			function onWindowResize() {
				// ------------------------------------------------------
				// 步骤1：更新相机参数（Updating Camera Parameters）
				// ------------------------------------------------------
				
				// 更新相机的宽高比
				// 窗口大小变化后，需要重新计算宽度与高度的比例
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法来应用更改
				// 否则渲染会使用旧的投影矩阵，导致变形
				camera.updateProjectionMatrix();

				// ------------------------------------------------------
				// 步骤2：更新渲染器尺寸（Updating Renderer Size）
				// ------------------------------------------------------
				
				// 设置渲染器的新尺寸
				// 这将调整canvas元素的大小和WebGL视口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// ------------------------------------------------------
				// 步骤3：更新效果合成器尺寸（Updating Composer Size）
				// ------------------------------------------------------
				
				// 设置效果合成器的新尺寸
				// 后期处理管线中的渲染目标（Render Targets）需要重新调整大小
				composer.setSize(window.innerWidth, window.innerHeight);

				// ------------------------------------------------------
				// 步骤4：更新Sobel着色器分辨率参数
				// ------------------------------------------------------
				
				// 更新Sobel着色器的水平分辨率参数
				// 由于窗口大小改变，需要更新着色器使用的分辨率值
				effectSobel.uniforms['resolution'].value.x = window.innerWidth * window.devicePixelRatio;
				
				// 更新Sobel着色器的垂直分辨率参数
				effectSobel.uniforms['resolution'].value.y = window.innerHeight * window.devicePixelRatio;
				
				// 重要提示：
				// 设备像素比（devicePixelRatio）可能在某些情况下改变
				// 例如用户切换了高DPI模式，或者浏览器缩放级别改变
				// 因此需要重新计算，而不仅仅是使用窗口尺寸
			}

			/**
			 * 动画循环函数 - 每一帧都会调用
			 * 功能：根据当前状态选择渲染方式并执行渲染
			 * 调用频率：通常是每秒60次（取决于浏览器和屏幕刷新率）
			 */
			function animate() {
				// 条件判断：检查是否启用后期处理效果
				// 根据params.enable的值决定渲染路径
				
				if (params.enable === true) {
					// 情况1：启用后期处理效果
					// 使用效果合成器进行渲染
					composer.render();
					
					// composer.render()的内部工作流程：
					// 1. 执行渲染通道：将3D场景渲染到纹理
					// 2. 执行灰度转换通道：将彩色纹理转换为灰度纹理
					// 3. 执行Sobel边缘检测通道：对灰度纹理进行边缘检测
					// 4. 最终结果输出到屏幕（canvas）
				} else {
					// 情况2：禁用后期处理效果
					// 使用普通渲染器直接渲染原始3D场景
					renderer.render(scene, camera);
					
					// renderer.render()直接渲染：
					// 1. 跳过所有后期处理通道
					// 2. 直接将3D场景渲染到屏幕
					// 3. 显示原始的黄色圆环结，没有边缘检测效果
				}
				
				// 注意：这个函数会被持续调用，形成动画循环
				// Three.js内部使用requestAnimationFrame实现流畅的动画
				// 即使场景没有变化，也会持续渲染（相机可以通过OrbitControls交互）
			}

			// ========================================
			// 第五部分：程序执行流程总结（Execution Flow）
			// ========================================
			// 1. 页面加载 → 解析importmap → 导入所有模块
			// 2. 声明全局变量 → 调用init()函数
			// 3. init()执行 → 创建所有Three.js对象和后期处理管线
			// 4. init()完成 → 开始执行animate()动画循环
			// 5. 每一帧 → animate()根据params.enable选择渲染方式
			// 6. 用户交互 → OrbitControls更新相机 → 下一帧显示新视角
			// 7. 用户调整窗口 → onWindowResize()更新所有尺寸
			// 8. 用户切换GUI开关 → params.enable改变 → 动画循环应用变化
		</script>
	</body>
</html>