<!-- Three.js 帧缓冲到纹理实时捕获演示
🎯 核心功能概述
这是一个实时屏幕捕获与纹理显示的Three.js演示应用，实现了"画中画"效果。它展示了如何从WebGL帧缓冲中捕获特定区域的像素数据，并将其作为纹理实时显示在屏幕上。

主要功能流程：
text
1. 创建3D分形曲线场景（彩虹色流动动画）
2. 每帧捕获屏幕中心128×128像素区域
3. 将捕获的内容作为纹理显示在屏幕左上角
4. 用户可通过鼠标交互控制3D场景视角
🏗️ 技术架构
1. 双场景双相机系统
javascript
// 3D场景系统
透视相机 (PerspectiveCamera) + 主场景 (Scene)
↓
渲染Gosper分形曲线（具有动态彩虹颜色）

// 2D UI系统
正交相机 (OrthographicCamera) + UI场景 (SceneOrtho)
↓
显示捕获的纹理作为Sprite（始终面向相机）
2. 实时纹理捕获流程
javascript
// 每帧执行的四个步骤：
1. animate() 被调用（约60fps）
2. 更新分形曲线顶点颜色（彩虹动画效果）
3. 渲染3D场景到帧缓冲（WebGL framebuffer）
4. 复制帧缓冲区域到纹理（copyFramebufferToTexture）
5. 渲染2D精灵显示纹理（画中画效果）
🔑 核心技术点详解
1. 帧缓冲纹理（FramebufferTexture）
作用：专用的纹理类型，用于从WebGL帧缓冲直接复制像素数据

关键代码：texture = new THREE.FramebufferTexture(textureSize, textureSize)

特点：实时更新，每帧可获取新内容，无需CPU参与像素处理

2. GPU到GPU直接复制
javascript
// 高性能纹理捕获（避免CPU-GPU数据传输瓶颈）
renderer.copyFramebufferToTexture(texture, vector);

// 参数说明：
// - texture: 目标纹理（GPU内存）
// - vector: 源区域左上角坐标（考虑设备像素比）
// 整个过程在GPU内部完成，效率极高
3. 动态几何体颜色更新
javascript
// 使用HSL色彩空间创建彩虹渐变
color.setHSL(h, 1, 0.5); // h: 色相(0-1), s: 饱和度, l: 亮度

// 优化：设置DynamicDrawUsage提示
colorAttribute.setUsage(THREE.DynamicDrawUsage);
// 告诉Three.js此属性会频繁更新，优化内存管理
4. 设备像素比（DPR）处理
javascript
const dpr = window.devicePixelRatio;
const textureSize = 128 * dpr; // Retina屏使用更高分辨率
// 确保在高DPI设备上纹理清晰不模糊
5. 精确的纹理坐标计算
javascript
// 计算从屏幕中心捕获纹理的起始位置
vector.x = (window.innerWidth * dpr / 2) - (textureSize / 2);
vector.y = (window.innerHeight * dpr / 2) - (textureSize / 2);
// 确保捕获的区域正好以屏幕为中心
6. 分层渲染与清除控制
javascript
renderer.autoClear = false; // 禁用自动清除

// 在animate()中手动控制：
renderer.clear();           // 第1次：清除所有，渲染3D场景
renderer.clearDepth();      // 第2次：只清除深度，渲染2D场景
// 确保2D精灵始终显示在3D内容之上
7. 响应式布局处理
javascript
// 窗口大小变化时更新：
- 相机参数（纵横比、裁剪面）
- 渲染器尺寸
- 精灵位置（保持在左上角）
// 确保在各种屏幕尺寸下都能正确显示
🎨 视觉效果实现
1. Gosper分形曲线
生成：GeometryUtils.gosper(8) 生成8级递归的分形曲线

特点：空间填充曲线，具有自相似性（分形特性）

动画：每个顶点独立计算颜色，形成流动的彩虹效果

2. 颜色动画算法
javascript
// 基于顶点索引和全局偏移量的色相计算
const h = ((offset + i) % l) / l; // 范围0-1
// offset每帧递减，产生颜色流动效果
// 不同顶点有不同起始色相，形成渐变
3. 画中画显示
位置：屏幕左上角固定位置

尺寸：128×128像素（物理像素，考虑DPR）

边框：白色1像素边框，清晰标识捕获区域

实时性：纹理每帧更新，与主场景完全同步

⚡ 性能优化策略
1. GPU端优化
纹理复制在GPU内部完成，避免CPU-GPU数据传输

使用BufferGeometry而不是传统Geometry

设置正确的BufferAttribute使用提示

2. 内存管理
复用Vector2和Color对象，减少垃圾回收

纹理尺寸固定，避免频繁重新分配内存

使用正确的缓冲区更新标记（needsUpdate）

3. 渲染优化
分层渲染，避免不必要的清除操作

正交相机渲染2D内容，计算量小

只更新需要变化的部分（颜色属性）

🎮 用户交互功能
1. OrbitControls集成
鼠标左键拖动：旋转3D场景

鼠标滚轮：缩放视图

禁用平移（enablePan: false），简化交互

2. 响应式控制目标
javascript
// 将控制器绑定到纹理预览区域
const controls = new OrbitControls(camera, selection);
// 用户可以通过操作纹理预览区域来控制3D相机
🔧 扩展应用场景
这种技术可以用于：

游戏开发

小地图/雷达系统

画中画视角（如赛车游戏后视镜）

技能特效预览

可视化工具

多视图同步显示

局部区域放大镜

实时数据监控面板

创意艺术

视觉反馈系统

实时纹理处理

交互式艺术装置

教育培训

3D渲染原理演示

GPU技术教学

实时图形处理示例

📊 技术亮点总结
技术点	作用	优势
FramebufferTexture	实时纹理捕获	GPU直接操作，高效
copyFramebufferToTexture	帧缓冲复制	避免CPU介入，高性能
双相机系统	3D+2D混合渲染	灵活的场景组织
DynamicDrawUsage	动态属性提示	优化GPU内存管理
HSL颜色动画	视觉效果好	平滑的色彩过渡
设备像素比处理	高清显示	适应各种屏幕密度 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：描述页面的主要功能
			本页面演示Three.js的帧缓冲到纹理功能，展示实时纹理捕获技术
		-->
		<title>Three.js WebGL - 帧缓冲到纹理实时捕获演示</title>
		
		<!-- 
			字符编码：指定文档使用UTF-8编码，支持中文字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置：控制移动设备的显示和缩放行为
			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文件
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 
			内联样式：专门为本页面定制的样式规则
			这些样式会覆盖外部样式表中相同选择器的规则
		-->
		<style>
			/* 
				#selection: 选择框容器样式
				功能：创建一个覆盖全屏的容器，用于显示实时捕获的纹理预览
				position: fixed - 固定定位，不随页面滚动
				display: flex - 弹性布局容器
				flex-direction: column - 垂直方向排列子元素
				justify-content: center - 垂直居中子元素
				align-items: center - 水平居中子元素
				height: 100% - 占据100%视口高度
				width: 100% - 占据100%视口宽度
				top: 0 - 从顶部开始定位
				z-index: 999 - 确保在最顶层，避免被其他元素遮挡
			*/
			#selection {
				position: fixed;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
				top: 0;
				z-index: 999;
			}

			/* 
				#selection > div: 选择框内部显示区域样式
				功能：定义纹理预览框的具体外观
				height: 128px - 固定高度128像素
				width: 128px - 固定宽度128像素
				border: 1px solid white - 白色实线边框，方便观察边界
			*/
			#selection > div {
				height: 128px;
				width: 128px;
				border: 1px solid white;
			}
		</style>
	</head>
	<body>

		<!-- 
			信息显示区域：显示页面标题和技术信息
			这是一个固定在页面上的信息栏，显示框架信息和演示标题
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> 
			- 帧缓冲到纹理实时捕获技术演示
			<br>
			<small>点击并拖动旋转视角，滚动缩放 | 实时捕获中心区域到左上角预览</small>
		</div>

		<!-- 
			纹理预览区域：用于显示从帧缓冲捕获的纹理内容
			这个div通过JavaScript会显示实时捕获的屏幕内容
			结构：一个容器div内部包含一个显示内容的div
		-->
		<div id="selection">
			<div></div>
		</div>

		<!-- 
			模块导入映射配置 (Import Maps)
			功能：将模块标识符映射到实际URL，现代浏览器原生支持的模块解析机制
			作用：允许在import语句中使用简化的模块名称，而不是完整的相对路径
			
			配置说明：
			- "three": "../build/three.module.js" - 将'three'映射到Three.js主库
			- "three/addons/": "./jsm/" - 将'three/addons/'前缀映射到附加组件目录
			
			工作原理：
			当代码中出现 import * as THREE from 'three' 时
			浏览器会根据此映射实际加载 ../build/three.module.js
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：包含所有Three.js代码和业务逻辑
			type="module" 表示这是一个ES6模块，支持模块化导入导出
			模块化优势：避免全局变量污染，支持静态分析和优化
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 导入Three.js核心库的所有导出，命名为THREE对象
			// THREE对象包含了Three.js的所有核心功能（场景、相机、渲染器等）
			import * as THREE from 'three';

			// 从Three.js附加组件中导入轨道控制器
			// OrbitControls: 允许用户通过鼠标/触摸控制相机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入几何工具集，这里主要用于生成Gosper分形曲线
			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';

			// ==================== 全局变量声明 ====================
			// 这些变量在整个模块中共享，存储Three.js的核心对象
			
			// 3D场景相关变量
			let camera;      // 透视相机：用于模拟人眼视角的3D视图
			let scene;       // 主场景：包含所有3D对象（分形曲线）
			let renderer;    // WebGL渲染器：负责将3D场景渲染到Canvas
			
			// 主要图形对象
			let line;        // 分形曲线对象：由GeometryUtils.gosper生成的曲线
			let sprite;      // 精灵对象：用于显示捕获的纹理
			let texture;     // 纹理对象：存储从帧缓冲捕获的图像数据
			
			// 2D渲染相关变量
			let cameraOrtho; // 正交相机：用于2D渲染，无透视效果
			let sceneOrtho;  // 正交场景：专门用于UI元素的2D场景
			
			// 动画控制变量
			let offset = 0;  // 颜色偏移量：控制分形曲线颜色动画的速度和方向

			// 获取设备像素比：高DPI设备（如Retina显示屏）会有更高的像素密度
			// 用于确保纹理在不同设备上显示清晰
			const dpr = window.devicePixelRatio;

			// 纹理尺寸定义：基础尺寸128像素，乘以设备像素比保证清晰度
			const textureSize = 128 * dpr;
			
			// 工具对象：复用这些对象避免频繁创建，提高性能
			const vector = new THREE.Vector2(); // 2D向量：用于坐标计算和纹理复制位置
			const color = new THREE.Color();    // 颜色对象：用于HSL颜色计算和转换

			// ==================== 初始化调用 ====================
			// 页面加载完成后调用init函数，开始Three.js应用的初始化
			init();

			// ==================== 初始化函数定义 ====================
			/**
			 * 主初始化函数
			 * 功能：创建所有Three.js对象，设置场景、相机、渲染器
			 * 执行顺序：创建对象 -> 设置属性 -> 添加到场景 -> 设置事件监听
			 */
			function init() {

				// 获取当前窗口的宽度和高度，用于设置相机和渲染器
				const width = window.innerWidth;
				const height = window.innerHeight;

				// ========== 相机系统设置 ==========
				/**
				 * 透视相机设置（用于3D场景）
				 * 参数说明：
				 * 70 - 视野角度（FOV），单位度，模拟人眼视角
				 * width / height - 纵横比，确保图像不变形
				 * 1 - 近裁剪面，距离相机小于1的物体不显示
				 * 1000 - 远裁剪面，距离相机大于1000的物体不显示
				 */
				camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
				camera.position.z = 20; // 沿Z轴向后移动20个单位，获得更好的观察距离

				/**
				 * 正交相机设置（用于2D UI渲染）
				 * 参数说明：左右上下四个裁剪面坐标
				 * -width/2, width/2 - 左边界和右边界（基于屏幕中心）
				 * height/2, -height/2 - 上边界和下边界（Y轴向下为负）
				 * 1, 10 - 近裁剪面和远裁剪面
				 * 正交相机特点：无透视变形，物体大小与距离无关
				 */
				cameraOrtho = new THREE.OrthographicCamera(
					- width / 2, width / 2,   // left, right
					height / 2, - height / 2, // top, bottom
					1, 10                     // near, far
				);
				cameraOrtho.position.z = 10; // 沿Z轴移动，确保在场景前方

				// ========== 场景创建 ==========
				// 创建两个独立的场景：一个用于3D内容，一个用于2D UI
				scene = new THREE.Scene();      // 主场景：包含分形曲线等3D对象
				sceneOrtho = new THREE.Scene(); // 正交场景：包含纹理精灵等2D对象

				// ========== 创建Gosper分形曲线 ==========
				/**
				 * Gosper分形曲线生成
				 * GeometryUtils.gosper(8): 
				 * - 生成8级递归的Gosper曲线点数组
				 * - Gosper曲线是一种空间填充曲线，具有自相似性
				 * - 返回的是顶点的扁平数组：[x1,y1,z1, x2,y2,z2, ...]
				 */
				const points = GeometryUtils.gosper(8);

				// 创建BufferGeometry（缓冲几何体），高性能的几何体表示方式
				const geometry = new THREE.BufferGeometry();
				
				// 创建位置属性：将顶点数组转换为Three.js能识别的格式
				// Float32BufferAttribute: 使用Float32Array存储顶点数据，适合GPU处理
				// points: 顶点数据数组
				// 3: 每个顶点包含3个值（x, y, z坐标）
				const positionAttribute = new THREE.Float32BufferAttribute(points, 3);
				
				// 将位置属性设置到几何体中
				geometry.setAttribute('position', positionAttribute);
				
				// 将几何体的中心移动到坐标系原点
				// 方便进行旋转、缩放等变换操作
				geometry.center();

				/**
				 * 创建颜色属性（用于动态颜色动画）
				 * 颜色属性结构与位置属性相同：每个顶点需要3个值（R, G, B）
				 * 创建与位置属性相同长度的Float32Array
				 * 初始值为0（黑色），后续在动画中更新
				 */
				const colorAttribute = new THREE.BufferAttribute(
					new Float32Array(positionAttribute.array.length), // 与顶点数量匹配
					3 // 每个颜色包含3个分量：R, G, B
				);
				
				/**
				 * 设置缓冲区使用方式为动态绘制
				 * DynamicDrawUsage: 表示缓冲区内容会频繁更新
				 * 这是给Three.js的优化提示，确保以合适的方式管理GPU内存
				 * 对比：StaticDrawUsage（静态，不更新）、StreamDrawUsage（流式，每帧更新）
				 */
				colorAttribute.setUsage(THREE.DynamicDrawUsage);
				
				// 将颜色属性设置到几何体中
				geometry.setAttribute('color', colorAttribute);

				/**
				 * 创建线材质
				 * LineBasicMaterial: 基础线材质，支持顶点颜色
				 * vertexColors: true - 启用顶点颜色，使用几何体中的颜色属性
				 * 这样每个顶点可以有独立的颜色，实现渐变效果
				 */
				const material = new THREE.LineBasicMaterial({ vertexColors: true });

				// 创建线对象，将几何体和材质组合
				line = new THREE.Line(geometry, material);
				
				// 设置缩放：将所有轴向均匀缩小到0.05倍
				// setScalar(0.05) 相当于 set(0.05, 0.05, 0.05)
				line.scale.setScalar(0.05);
				
				// 将线对象添加到主场景中
				scene.add(line);

				// ========== 创建帧缓冲纹理 ==========
				/**
				 * FramebufferTexture: 专门用于从帧缓冲复制数据的纹理
				 * 参数说明：
				 * textureSize - 纹理宽度（像素）
				 * textureSize - 纹理高度（像素）
				 * 
				 * 帧缓冲纹理特点：
				 * 1. 可以作为常规纹理使用（如贴图）
				 * 2. 可以从WebGL的帧缓冲直接复制数据
				 * 3. 实时更新，每帧可以获取新的内容
				 */
				texture = new THREE.FramebufferTexture(textureSize, textureSize);

				// ========== 创建精灵显示纹理 ==========
				/**
				 * 精灵材质设置
				 * SpriteMaterial: 专门用于2D精灵的材质
				 * map: texture - 使用上面创建的帧缓冲纹理作为贴图
				 * 精灵材质特点：始终面向相机，不受透视影响
				 */
				const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
				
				// 创建精灵对象
				sprite = new THREE.Sprite(spriteMaterial);
				
				// 设置精灵尺寸：与纹理尺寸一致
				// 第三个参数z为1，因为2D精灵不需要厚度
				sprite.scale.set(textureSize, textureSize, 1);
				
				// 将精灵添加到正交场景中
				sceneOrtho.add(sprite);

				// 更新精灵位置：计算屏幕左上角的正确位置
				updateSpritePosition();

				// ========== WebGL渲染器设置 ==========
				/**
				 * 创建WebGL渲染器
				 * 参数说明：
				 * antialias: true - 启用抗锯齿，使边缘更平滑
				 * WebGLRenderer会自动创建Canvas元素并初始化WebGL上下文
				 */
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比：在高DPI设备上使用更高的分辨率
				// 防止在高分辨率屏幕上出现模糊
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/**
				 * 设置动画循环（替代传统的requestAnimationFrame）
				 * setAnimationLoop是Three.js提供的动画循环API
				 * 参数animate是每帧调用的回调函数
				 * 浏览器会在每次重绘前调用此函数（通常60fps）
				 */
				renderer.setAnimationLoop(animate);
				
				// 禁用自动清除：我们需要手动控制清除时机
				// 原因：我们需要先渲染3D场景，然后复制纹理，最后渲染2D场景
				renderer.autoClear = false;
				
				// 将渲染器的Canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ========== 交互控制系统 ==========
				// 获取选择框DOM元素
				const selection = document.getElementById('selection');
				
				/**
				 * 创建轨道控制器
				 * 参数说明：
				 * camera - 要控制的相机对象
				 * selection - DOM元素，控制器的事件监听目标
				 * 
				 * 功能：允许用户通过以下方式控制相机：
				 * - 鼠标左键拖动：旋转视角
				 * - 鼠标右键拖动：平移视角
				 * - 鼠标滚轮：缩放视角
				 */
				const controls = new OrbitControls(camera, selection);
				
				// 禁用平移功能：只允许旋转和缩放
				controls.enablePan = false;

				// ========== 窗口调整事件监听 ==========
				/**
				 * 监听窗口大小调整事件
				 * 当浏览器窗口大小改变时，调用onWindowResize函数
				 * 重新计算相机参数和渲染器尺寸
				 */
				window.addEventListener('resize', onWindowResize);

			}

			// ==================== 窗口调整处理函数 ====================
			/**
			 * 处理窗口大小调整
			 * 功能：当窗口大小改变时，重新计算相机参数和更新渲染器
			 * 确保3D场景正确适应新的窗口尺寸
			 */
			function onWindowResize() {

				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新透视相机的纵横比
				camera.aspect = width / height;
				// 必须调用updateProjectionMatrix()使新的参数生效
				camera.updateProjectionMatrix();

				// 更新正交相机的裁剪面
				cameraOrtho.left = -width / 2;
				cameraOrtho.right = width / 2;
				cameraOrtho.top = height / 2;
				cameraOrtho.bottom = -height / 2;
				// 更新正交相机的投影矩阵
				cameraOrtho.updateProjectionMatrix();

				// 更新渲染器尺寸：确保Canvas大小与窗口匹配
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 更新精灵位置：确保纹理预览保持在屏幕左上角
				updateSpritePosition();

			}

			// ==================== 更新精灵位置函数 ====================
			/**
			 * 更新精灵位置（固定在屏幕左上角）
			 * 功能：计算精灵在正交相机空间中的正确位置
			 * 正交相机的坐标系原点在屏幕中心，向右为X正，向上为Y正
			 */
			function updateSpritePosition() {

				// 计算屏幕一半的尺寸（用于坐标转换）
				const halfWidth = window.innerWidth / 2;
				const halfHeight = window.innerHeight / 2;

				// 计算精灵一半的尺寸（精灵位置基于中心点）
				const halfImageWidth = textureSize / 2;
				const halfImageHeight = textureSize / 2;

				/**
				 * 设置精灵位置：
				 * X坐标：屏幕左边缘 + 精灵一半宽度（确保完全可见）
				 * Y坐标：屏幕上边缘 - 精灵一半高度（确保完全可见）
				 * Z坐标：1（在正交相机近裁剪面和远裁剪面之间）
				 */
				sprite.position.set(
					-halfWidth + halfImageWidth,   // 左对齐：从屏幕左边缘开始
					halfHeight - halfImageHeight,  // 上对齐：从屏幕上边缘开始
					1                              // Z轴位置，确保在相机视野内
				);

			}

			// ==================== 动画循环函数 ====================
			/**
			 * 动画循环函数（每帧调用）
			 * 功能：更新动画状态，渲染3D场景，复制纹理，渲染2D场景
			 * 执行顺序：
			 * 1. 更新分形曲线颜色
			 * 2. 渲染3D场景
			 * 3. 从帧缓冲复制区域到纹理
			 * 4. 渲染2D场景（显示纹理）
			 */
			function animate() {

				// 第一步：更新分形曲线的顶点颜色（创建动画效果）
				// 获取几何体的颜色属性
				const colorAttribute = line.geometry.getAttribute('color');
				// 调用函数更新所有顶点的颜色
				updateColors(colorAttribute);

				// 第二步：渲染3D场景到帧缓冲
				// 清除颜色缓冲区和深度缓冲区（准备新的绘制）
				renderer.clear();
				// 渲染主场景（分形曲线）和透视相机
				renderer.render(scene, camera);

				// 第三步：从帧缓冲复制指定区域到纹理
				/**
				 * 计算复制起始位置（屏幕坐标，考虑设备像素比）
				 * 目标：从屏幕中心复制一个textureSize x textureSize的区域
				 * 
				 * 计算原理：
				 * window.innerWidth * dpr / 2 - 屏幕中心的X坐标（考虑像素比）
				 * textureSize / 2 - 纹理一半宽度
				 * 相减得到复制区域的左上角X坐标
				 * 
				 * 同理计算Y坐标
				 */
				vector.x = (window.innerWidth * dpr / 2) - (textureSize / 2);
				vector.y = (window.innerHeight * dpr / 2) - (textureSize / 2);

				/**
				 * 执行帧缓冲到纹理的复制操作
				 * copyFramebufferToTexture功能：
				 * 1. 从当前WebGL帧缓冲读取像素数据
				 * 2. 将指定矩形区域的像素复制到纹理中
				 * 3. 纹理会立即更新，可用于后续渲染
				 * 
				 * 参数说明：
				 * texture - 目标纹理对象
				 * vector - 复制区域的左上角坐标（像素单位）
				 * 
				 * 注意：这里复制的是刚刚渲染的分形曲线场景
				 */
				renderer.copyFramebufferToTexture(texture, vector);

				// 第四步：渲染2D场景（显示捕获的纹理）
				// 清除深度缓冲区（但保留颜色缓冲区）
				// 确保2D精灵渲染在最前面，不受3D场景深度影响
				renderer.clearDepth();
				// 渲染正交场景（纹理精灵）和正交相机
				renderer.render(sceneOrtho, cameraOrtho);

			}

			// ==================== 更新颜色函数 ====================
			/**
			 * 更新线几何体顶点颜色
			 * 功能：为每个顶点计算渐变的HSL颜色，创建彩虹色动画效果
			 * 原理：使用HSL色彩空间，固定饱和度和亮度，循环变化色相
			 * 
			 * @param {THREE.BufferAttribute} colorAttribute - 颜色属性对象
			 */
			function updateColors(colorAttribute) {

				// 获取顶点数量（颜色属性中的顶点数）
				const l = colorAttribute.count;

				// 遍历所有顶点
				for (let i = 0; i < l; i++) {

					/**
					 * 计算当前顶点的HSL色相值（范围0到1）
					 * 公式：(偏移量 + 顶点索引) % 总顶点数 / 总顶点数
					 * 
					 * 效果：
					 * 1. offset是全局变量，每帧递减，产生动画效果
					 * 2. (offset + i) % l 确保值在0到l-1之间循环
					 * 3. 除以l将值归一化到0-1范围
					 * 
					 * 这样每个顶点根据索引获得不同的色相值
					 * 随着offset变化，所有顶点的色相一起变化，产生流动效果
					 */
					const h = ((offset + i) % l) / l;

					/**
					 * 使用THREE.Color的setHSL方法设置颜色
					 * HSL参数：
					 * h - 色相（0-1）：红橙黄绿青蓝紫循环
					 * s - 饱和度（1）：最高饱和度，颜色最鲜艳
					 * l - 亮度（0.5）：中等亮度，既不太亮也不太暗
					 */
					color.setHSL(h, 1, 0.5);

					/**
					 * 将计算的颜色设置到顶点颜色属性中
					 * 颜色属性存储的是RGB分量，每个分量范围0-1
					 * 
					 * setX/setY/setZ方法：
					 * 参数1：顶点索引
					 * 参数2：颜色分量值（R/G/B）
					 */
					colorAttribute.setX(i, color.r); // 红色分量
					colorAttribute.setY(i, color.g); // 绿色分量
					colorAttribute.setZ(i, color.b); // 蓝色分量

				}

				// 标记颜色属性需要更新到GPU
				// 重要：修改BufferAttribute后必须设置needsUpdate = true
				// Three.js会在下一帧渲染前将数据上传到GPU
				colorAttribute.needsUpdate = true;

				// 更新全局偏移量，控制动画速度
				// 每帧减少25，数值越大颜色变化越快
				// 负值表示颜色向一个方向流动，正值则反向流动
				offset -= 25;

			}

		</script>

	</body>
</html>