<!-- Three.js 渲染到纹理（Render-to-Texture）示例
代码功能概述
这是一个展示Three.js中渲染到纹理（Render-to-Texture，简称RTT）技术的WebGL示例程序。它演示了如何将3D场景渲染到一个离屏纹理缓冲区，然后将该纹理以多种方式重复使用：

作为动态背景：纹理显示为全屏背景，包含随时间变化的颜色效果

作为材质贴图：纹理应用于3D球体阵列，实现一致的视觉效果

结合3D对象：在纹理渲染过程中还包含旋转的3D环面体（圆环）

程序实现了交互式视觉体验：鼠标移动控制摄像机视角，所有元素（背景、环面体、球体贴图）都保持视觉一致性，因为它们共享同一个动态生成的纹理。

核心渲染流程
三遍渲染架构：
text
第一遍（离屏渲染） → 第二遍（背景显示） → 第三遍（3D场景）
      ↓                     ↓                     ↓
生成动态纹理         纹理作为背景         纹理作为材质贴图
   (rtTexture)     (全屏四边形)        (25个球体阵列)
详细流程：
第一遍（生成纹理）：

渲染包含两个旋转环面体和一个全屏着色器四边形的场景

使用正交摄像机（cameraRTT）

输出到WebGLRenderTarget（离屏纹理缓冲区）

第二遍（显示背景）：

渲染一个覆盖全屏的四边形

使用第一步生成的纹理作为贴图

显示为动态背景

第三遍（渲染3D场景）：

渲染5×5共25个球体的阵列

每个球体都使用第一步生成的纹理作为材质贴图

使用透视摄像机（camera），可由鼠标控制视角

主要技术点详解
1. 渲染到纹理（Render-to-Texture）
技术：使用THREE.WebGLRenderTarget创建离屏帧缓冲区

实现：rtTexture = new THREE.WebGLRenderTarget(width, height)

作用：允许将3D场景渲染到纹理而非屏幕，供后续渲染使用

2. 多遍渲染（Multi-pass Rendering）
手动渲染控制：renderer.autoClear = false禁用自动清除

渲染目标切换：

javascript
renderer.setRenderTarget(rtTexture);  // 渲染到纹理
renderer.setRenderTarget(null);       // 渲染到屏幕
缓冲区管理：每遍渲染前手动调用renderer.clear()

3. 自定义着色器（Shader Programming）
动态纹理生成着色器（fragment_shader_pass_1）：
glsl
// 基于UV坐标和时间创建动态颜色模式
// - 红色：水平渐变，仅在上半屏显示
// - 绿色：垂直渐变，仅在右半屏显示  
// - 蓝色：随时间变化（0-1之间循环）
// 效果：四个象限显示不同颜色组合，叠加动态蓝色
纹理显示着色器（fragment_shader_screen）：
glsl
// 简单的纹理采样器
// 包含Three.js的颜色空间转换指令
共享顶点着色器：
通用的顶点变换和UV坐标传递

被两个片段着色器复用，展示代码复用思想

4. 摄像机系统
正交摄像机（OrthographicCamera）：

用于渲染到纹理和全屏四边形

无透视变形，适合2D渲染

覆盖整个屏幕范围

透视摄像机（PerspectiveCamera）：

用于渲染3D球体阵列

产生近大远小的3D效果

支持鼠标交互控制

5. 场景图（Scene Graph）管理
javascript
// 三个独立的场景，每个有特定用途
const scene = new THREE.Scene();       // 主场景：球体阵列
const sceneRTT = new THREE.Scene();    // RTT场景：生成纹理
const sceneScreen = new THREE.Scene(); // 屏幕场景：背景显示
场景分离：不同渲染阶段使用不同场景，逻辑清晰

对象复用：相同纹理在不同场景中被复用

6. 交互与动画
鼠标跟踪：摄像机平滑跟随鼠标位置

时间驱动动画：

环面体持续旋转

着色器时间uniform循环变化（0→1→0）

蓝色通道随时间闪烁

7. 性能优化技术
深度写入控制：全屏四边形设置depthWrite: false

设备像素比适配：renderer.setPixelRatio(window.devicePixelRatio)

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

着色器复用：顶点着色器被多个材质共享

8. 模块化与ES6特性
ES模块导入：使用import语句导入Three.js库

导入映射：importmap定义模块路径别名

模块化结构：代码按功能组织，便于维护

9. 调试与监控
Stats.js集成：实时显示FPS、渲染时间等性能指标

响应式设计：适配不同屏幕尺寸和设备像素比

视觉效果特点
视觉一致性：背景和球体使用相同的动态纹理，创建和谐视觉效果

动态变化：颜色随时间变化，环面体持续旋转

交互响应：鼠标控制视角，增强用户体验

层次感：背景（2D）+ 球体（3D）创建深度感

技术应用场景
此示例演示的技术可用于：

后期处理效果：如模糊、Bloom、色彩校正

动态环境映射：实时反射/折射效果

GPU粒子系统：在纹理中模拟粒子，然后渲染到屏幕

阴影映射：从光源视角渲染深度纹理

渲染管线扩展：实现复杂的多阶段渲染效果

代码结构亮点
清晰的三个阶段：生成→显示→应用，流程明确

资源复用：纹理、几何体、着色器在多个地方复用

关注点分离：渲染逻辑、动画逻辑、交互逻辑分离

可扩展性：易于添加更多渲染阶段或效果 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL渲染到纹理技术演示 -->
		<title>Three.js WebGL渲染到纹理技术演示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止用户缩放，确保WebGL画布正确显示 -->
		<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">
	</head>
	<body>

		<!-- 主容器：用于承载Three.js渲染器创建的canvas元素和性能统计面板 -->
		<div id="container"></div>
		<!-- 页面信息栏：显示项目信息和Three.js官网链接 -->
		<div id="info">Three.js渲染到纹理技术示例 - <a href="https://threejs.org" target="_blank" rel="noopener">访问Three.js官网</a></div>

		<!-- ========== GLSL着色器代码部分 ========== -->
		<!-- 注意：这些script标签的type不是"text/javascript"，浏览器不会作为JavaScript执行 -->
		<!-- 它们用于存储GLSL着色器代码，Three.js会读取这些代码编译为WebGL着色器 -->
		
		<!-- 屏幕显示片段着色器：用于将渲染纹理显示到全屏四边形 -->
		<script id="fragment_shader_screen" type="x-shader/x-fragment">
			// varying变量：从顶点着色器传递到片段着色器的插值变量
			varying vec2 vUv;               // 纹理坐标插值，范围[0,1]
			
			// uniform变量：由JavaScript传递到着色器的常量（每次绘制调用中不变）
			uniform sampler2D tDiffuse;     // 2D纹理采样器，绑定到渲染目标纹理

			void main() {
				// texture2D函数：根据纹理坐标从纹理中采样颜色
				// 这里使用插值后的vUv坐标从tDiffuse纹理中获取颜色值
				gl_FragColor = texture2D( tDiffuse, vUv );
				
				// Three.js内置指令：包含颜色空间处理代码
				// 在编译时，Three.js会用实际的GLSL代码替换这个指令
				// 负责将线性颜色空间转换为sRGB（如果输出到屏幕需要的话）
				#include <colorspace_fragment>
			}
		</script>

		<!-- 第一遍渲染片段着色器：用于生成动态纹理效果 -->
		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
			// 从顶点着色器接收的纹理坐标
			varying vec2 vUv;
			
			// 时间变量：由JavaScript传入，用于创建动画效果
			// 值在0到1之间来回变化，控制蓝色通道的亮度
			uniform float time;

			void main() {
				// 红色通道逻辑：基于水平纹理坐标vUv.x
				// 在屏幕左侧(vUv.x小)红色较暗，右侧(vUv.x大)红色较亮
				float r = vUv.x;
				// 条件判断：如果垂直坐标在下半部分(vUv.y < 0.5)，红色通道置零
				// 这创建了一个水平分割效果：上半屏有红色渐变，下半屏无红色
				if( vUv.y < 0.5 ) r = 0.0;
				
				// 绿色通道逻辑：基于垂直纹理坐标vUv.y
				// 在屏幕底部(vUv.y小)绿色较暗，顶部(vUv.y大)绿色较亮
				float g = vUv.y;
				// 条件判断：如果水平坐标在左半部分(vUv.x < 0.5)，绿色通道置零
				// 这创建了一个垂直分割效果：右半屏有绿色渐变，左半屏无绿色
				if( vUv.x < 0.5 ) g = 0.0;
				
				// 输出最终颜色：
				// 红色通道：水平渐变，但仅在上半屏显示
				// 绿色通道：垂直渐变，但仅在右半屏显示
				// 蓝色通道：随时间变化的值，创建闪烁效果
				// Alpha通道：固定为1.0（完全不透明）
				gl_FragColor = vec4( r, g, time, 1.0 );
				
				// 效果总结：这个着色器创建了一个四象限的不同颜色效果：
				// 左上象限：只有绿色（从下到上渐变）
				// 右上象限：红色和绿色叠加（产生黄色）
				// 左下象限：无颜色（黑色）
				// 右下象限：只有红色（从左到右渐变）
				// 整个画面叠加随时间变化的蓝色通道
			}
		</script>

		<!-- 顶点着色器：通用的顶点变换和纹理坐标传递 -->
		<script id="vertexShader" type="x-shader/x-vertex">
			// 声明varying变量：纹理坐标，从顶点着色器传递到片段着色器
			varying vec2 vUv;

			void main() {
				// 将原始的uv坐标（模型自带的纹理坐标）传递给片段着色器
				// uv是Three.js几何体自带的属性，表示纹理坐标
				vUv = uv;
				
				// 顶点位置变换：将模型空间坐标转换到裁剪空间坐标
				// 这是3D图形渲染的标准变换流程：
				// 1. position：顶点的原始位置（模型空间）
				// 2. modelViewMatrix：模型视图矩阵，将模型空间转换到视图空间
				// 3. projectionMatrix：投影矩阵，将视图空间转换到裁剪空间
				// 4. 最终结果赋值给gl_Position（GLSL内置变量）
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
				
				// 这个着色器非常简单，只做了必要的坐标变换和纹理坐标传递
				// 它被多个材质共享，展示了代码复用的思想
			}
		</script>

		<!-- ========== ES模块导入映射配置 ========== -->
		<!-- importmap：现代浏览器特性，用于定义模块标识符到实际URL的映射 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- ========== 主应用程序JavaScript代码 ========== -->
		<!-- type="module"：表示这是一个ES6模块，支持import/export语法 -->
		<script type="module">
			// 导入Three.js核心库的所有功能
			// * as THREE：将整个three模块导入并命名为THREE对象
			import * as THREE from 'three';

			// 导入Stats.js性能监控工具
			// 这个库会在屏幕角落显示FPS（帧率）、MS（渲染时间）等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// ========== 全局变量声明区域 ==========
			// 这些变量在多个函数中共享，因此声明在模块作用域
			
			// DOM元素引用
			let container;    // 主容器DOM元素
			let stats;        // Stats.js统计对象
			
			// Three.js核心对象
			let cameraRTT;    // 渲染到纹理使用的正交摄像机
			let camera;       // 主场景使用的透视摄像机
			let sceneRTT;     // 渲染到纹理的场景（第一遍渲染）
			let sceneScreen;  // 屏幕场景（第二遍渲染，显示纹理）
			let scene;        // 主场景（第三遍渲染，使用纹理的3D对象）
			let renderer;     // WebGL渲染器对象
			let zmesh1;       // 第一个环面体网格（圆环）
			let zmesh2;       // 第二个环面体网格（圆环）
			
			// 鼠标交互相关变量
			let mouseX = 0;   // 鼠标X坐标（相对于屏幕中心）
			let mouseY = 0;   // 鼠标Y坐标（相对于屏幕中心）
			const windowHalfX = window.innerWidth / 2;   // 屏幕水平中心
			const windowHalfY = window.innerHeight / 2;  // 屏幕垂直中心

			// 渲染到纹理技术相关变量
			let rtTexture;    // WebGL渲染目标，作为离屏纹理缓冲区
			let material;     // 第一遍渲染使用的着色器材质
			let quad;         // 全屏四边形网格引用（用于多个场景）
			
			// 动画控制变量
			let delta = 0.01; // 时间变化增量，控制着色器时间uniform的变化速度

			// ========== 初始化函数 ==========
			// 这是程序的入口点，负责创建和设置所有Three.js对象
			function init() {
				// 获取页面中的容器元素，Three.js会将canvas渲染到这里
				container = document.getElementById( 'container' );

				// ========== 摄像机系统设置 ==========
				
				// 主摄像机：透视投影摄像机
				// 参数说明：
				// 30 - 视野角度(FOV)，单位度，较小的值产生望远镜效果，较大的值产生广角效果
				// window.innerWidth / window.innerHeight - 宽高比，确保图像不被拉伸
				// 1 - 近裁剪面，距离摄像机小于此值的物体不被渲染
				// 10000 - 远裁剪面，距离摄像机大于此值的物体不被渲染
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 100;  // 将摄像机沿Z轴向后移动100单位，以便看到场景
				
				// RTT（Render To Texture）摄像机：正交投影摄像机
				// 正交摄像机不会产生透视变形，物体大小与距离无关
				// 参数说明：left, right, top, bottom, near, far
				// 这里设置摄像机覆盖整个屏幕范围
				cameraRTT = new THREE.OrthographicCamera( 
					window.innerWidth / -2,   // 左边界：屏幕左半部分
					window.innerWidth / 2,    // 右边界：屏幕右半部分
					window.innerHeight / 2,   // 上边界：屏幕上半部分
					window.innerHeight / -2,  // 下边界：屏幕下半部分
					1,                        // 近裁剪面
					1000                      // 远裁剪面
				);
				cameraRTT.position.z = 500;  // 将摄像机沿Z轴向后移动，确保能看到全屏四边形

				// ========== 场景图系统设置 ==========
				// Three.js使用场景图（Scene Graph）管理渲染对象
				// 场景是一个容器，包含所有要渲染的对象（网格、灯光、相机等）
				
				// 主场景：包含应用纹理的球体阵列
				scene = new THREE.Scene();
				
				// RTT场景：用于渲染到纹理的场景，包含环面体和动态着色器效果
				sceneRTT = new THREE.Scene();
				
				// 屏幕场景：包含显示纹理的全屏四边形
				sceneScreen = new THREE.Scene();

				// ========== RTT场景光照设置 ==========
				// 为3D环面体添加光照，使其产生明暗效果
				
				// 第一个方向光：白色主光源
				// 参数：颜色(0xffffff白色)，强度(3.0)
				let light = new THREE.DirectionalLight( 0xffffff, 3 );
				light.position.set( 0, 0, 1 ).normalize();  // 从正前方照射，向量归一化
				sceneRTT.add( light );
				
				// 第二个方向光：淡红色补光
				// 参数：颜色(0xffd5d5淡红色)，强度(4.5)
				light = new THREE.DirectionalLight( 0xffd5d5, 4.5 );
				light.position.set( 0, 0, -1 ).normalize();  // 从正后方照射，产生边缘光效果
				sceneRTT.add( light );

				// ========== 渲染目标纹理创建 ==========
				// WebGLRenderTarget是一个离屏帧缓冲区，可以像纹理一样使用
				// 参数：宽度，高度（这里使用屏幕尺寸）
				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
				// 注意：rtTexture.texture属性才是可以用于材质的纹理对象

				// ========== 自定义着色器材质创建 ==========
				
				// 第一遍渲染材质：用于生成动态纹理
				// ShaderMaterial允许直接编写GLSL着色器代码
				material = new THREE.ShaderMaterial( {
					// uniforms：从JavaScript传递到着色器的常量
					uniforms: { 
						time: { value: 0.0 }  // 时间uniform，初始值为0.0
					},
					// 顶点着色器代码：从页面中获取
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					// 片段着色器代码：从页面中获取
					fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
				} );

				// 屏幕显示材质：用于将纹理渲染到全屏
				const materialScreen = new THREE.ShaderMaterial( {
					uniforms: { 
						// tDiffuse：纹理采样器，绑定到渲染目标纹理
						tDiffuse: { value: rtTexture.texture }
					},
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
					// depthWrite: false - 禁用深度写入
					// 因为这是全屏效果，不需要深度测试，可以提高性能
					depthWrite: false
				} );

				// ========== 全屏四边形几何体创建 ==========
				// 平面几何体，覆盖整个屏幕
				// 参数：宽度，高度（使用屏幕尺寸）
				const plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
				
				// RTT场景中的四边形：应用第一遍渲染材质
				// 这个四边形将填充整个屏幕，运行自定义着色器生成纹理
				quad = new THREE.Mesh( plane, material );
				quad.position.z = -100;  // 将四边形放置在摄像机前方
				sceneRTT.add( quad );

				// ========== RTT场景3D对象创建 ==========
				// 创建环面几何体（圆环形状）
				// 参数：半径(100)，管径(25)，径向分段数(15)， tubular分段数(30)
				const torusGeometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
				
				// 创建两种Phong材质（具有镜面高光）
				// 材质1：灰色金属质感
				const mat1 = new THREE.MeshPhongMaterial( { 
					color: 0x9c9c9c,    // 基础颜色：灰色
					specular: 0xffaa00, // 镜面反射颜色：橙黄色
					shininess: 5        // 高光强度：较低的值产生柔和的高光
				} );
				// 材质2：深红色金属质感
				const mat2 = new THREE.MeshPhongMaterial( { 
					color: 0x9c0000,    // 基础颜色：深红色
					specular: 0xff2200, // 镜面反射颜色：红色
					shininess: 5        // 高光强度
				} );

				// 创建第一个环面体网格
				zmesh1 = new THREE.Mesh( torusGeometry, mat1 );
				zmesh1.position.set( 0, 0, 100 );      // 放置在场景中心偏前的位置
				zmesh1.scale.set( 1.5, 1.5, 1.5 );    // 放大1.5倍
				sceneRTT.add( zmesh1 );

				// 创建第二个环面体网格
				zmesh2 = new THREE.Mesh( torusGeometry, mat2 );
				zmesh2.position.set( 0, 150, 100 );    // 放置在第一个环面体上方
				zmesh2.scale.set( 0.75, 0.75, 0.75 );  // 缩小到0.75倍
				sceneRTT.add( zmesh2 );

				// ========== 屏幕场景四边形创建 ==========
				// 这个四边形将显示渲染目标纹理的内容
				quad = new THREE.Mesh( plane, materialScreen );
				quad.position.z = -100;
				sceneScreen.add( quad );

				// ========== 主场景球体阵列创建 ==========
				// 创建一系列球体，每个球体都使用渲染目标纹理作为贴图
				const n = 5;  // 每行每列球体数量，5x5共25个球体
				
				// 球体几何体：参数为半径(10)，宽度分段数(64)，高度分段数(32)
				// 分段数越高球体越光滑，但性能开销越大
				const geometry = new THREE.SphereGeometry( 10, 64, 32 );
				
				// 基础材质：使用渲染目标纹理作为颜色贴图
				const material2 = new THREE.MeshBasicMaterial( { 
					color: 0xffffff,          // 基础颜色：白色（纹理会与此颜色相乘）
					map: rtTexture.texture    // 纹理贴图：使用渲染目标纹理
				} );

				// 嵌套循环创建球体网格阵列
				for ( let j = 0; j < n; j ++ ) {      // 行循环
					for ( let i = 0; i < n; i ++ ) {  // 列循环
						// 创建球体网格
						const mesh = new THREE.Mesh( geometry, material2 );

						// 计算球体位置：
						// (i - (n-1)/2) * 20：将索引转换为位置，使球体居中显示
						// (n-1)/2：计算中心偏移，例如n=5时中心偏移为2
						// *20：球体之间的间距
						mesh.position.x = ( i - ( n - 1 ) / 2 ) * 20;  // X轴位置
						mesh.position.y = ( j - ( n - 1 ) / 2 ) * 20;  // Y轴位置
						mesh.position.z = 0;                          // Z轴位置

						// 旋转球体：绕Y轴旋转-90度（-π/2弧度）
						mesh.rotation.y = - Math.PI / 2;

						// 将球体添加到主场景
						scene.add( mesh );
					}
				}

				// ========== WebGL渲染器创建与配置 ==========
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比：在高DPI屏幕（如Retina）上提供更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：代替传统的requestAnimationFrame
				// setAnimationLoop是Three.js r125+的API
				renderer.setAnimationLoop( animate );
				
				// 禁用自动清除：因为我们有多遍渲染，需要手动控制清除
				// 如果设为true，每次渲染前会自动清除颜色和深度缓冲区
				renderer.autoClear = false;

				// 将渲染器的canvas元素添加到DOM容器
				container.appendChild( renderer.domElement );

				// ========== 性能统计面板初始化 ==========
				stats = new Stats();
				// 默认显示FPS（帧率），点击可切换显示MS（渲染时间）、MB（内存）等
				container.appendChild( stats.dom );

				// ========== 事件监听器设置 ==========
				// 监听鼠标移动事件，用于交互控制
				document.addEventListener( 'mousemove', onDocumentMouseMove );
				
				// 初始化完成，Three.js将开始执行animate()函数
				console.log('Three.js渲染到纹理示例初始化完成');
			}

			// ========== 鼠标移动事件处理函数 ==========
			// 当鼠标在文档上移动时触发
			function onDocumentMouseMove( event ) {
				// 计算鼠标相对于屏幕中心的位置
				// event.clientX：鼠标相对于浏览器窗口的X坐标
				// windowHalfX：屏幕中心X坐标
				// 结果：鼠标在屏幕左侧时为负值，右侧时为正值
				mouseX = ( event.clientX - windowHalfX );
				
				// 计算鼠标相对于屏幕中心的位置
				// 注意：这里Y坐标使用减号，因为WebGL坐标系Y轴向上，而屏幕坐标系Y轴向下
				mouseY = ( event.clientY - windowHalfY );
			}

			// ========== 动画循环函数 ==========
			// 由renderer.setAnimationLoop调用，每秒约60次（取决于浏览器和硬件）
			function animate() {
				render();       // 执行渲染逻辑
				stats.update(); // 更新性能统计显示
			}

			// ========== 主要渲染函数 ==========
			// 这是程序的核心，执行多遍渲染流程
			function render() {
				// 计算当前时间（秒为单位），用于动画
				// Date.now()返回毫秒数，乘以0.0015转换为秒并控制动画速度
				const time = Date.now() * 0.0015;

				// ========== 摄像机动画：平滑跟随鼠标 ==========
				// 使用线性插值（LERP）使摄像机平滑移动到鼠标位置
				// 公式：当前位置 += (目标位置 - 当前位置) * 插值因子
				// 插值因子0.05表示每次更新移动5%的距离，产生平滑效果
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				
				// 注意Y坐标取反：因为鼠标Y坐标与Three.jsY坐标方向相反
				camera.position.y += ( -mouseY - camera.position.y ) * .05;
				
				// 摄像机始终看向场景中心点(0,0,0)
				camera.lookAt( scene.position );

				// ========== 环面体旋转动画 ==========
				if ( zmesh1 && zmesh2 ) {
					// 第一个环面体：随时间逆时针旋转
					zmesh1.rotation.y = -time;
					
					// 第二个环面体：以不同相位旋转（比第一个快90度）
					// 加上Math.PI/2（90度）相位偏移
					zmesh2.rotation.y = -time + Math.PI / 2;
				}

				// ========== 着色器时间uniform动画控制 ==========
				// 控制时间uniform在0到1之间来回变化
				// 当时间值大于1或小于0时，反转变化方向
				if ( material.uniforms[ 'time' ].value > 1 || material.uniforms[ 'time' ].value < 0 ) {
					delta *= -1;  // 反转delta符号，使时间值反向变化
				}
				// 更新时间uniform值
				material.uniforms[ 'time' ].value += delta;

				// ========== 第一遍渲染：渲染到纹理（Render-to-Texture） ==========
				// 目标：将sceneRTT渲染到离屏纹理rtTexture
				
				// 1. 设置当前渲染目标为纹理缓冲区
				renderer.setRenderTarget( rtTexture );
				
				// 2. 手动清除纹理缓冲区的颜色和深度缓冲区
				// 因为autoClear设置为false，所以需要手动清除
				renderer.clear();
				
				// 3. 执行渲染：将sceneRTT场景用cameraRTT摄像机渲染到纹理
				// 这会执行顶点着色器和片段着色器，输出到rtTexture
				renderer.render( sceneRTT, cameraRTT );

				// ========== 第二遍渲染：纹理显示到屏幕 ==========
				// 目标：将纹理显示为全屏四边形
				
				// 1. 设置渲染目标为null，表示渲染到默认帧缓冲区（屏幕）
				renderer.setRenderTarget( null );
				
				// 2. 清除屏幕的颜色缓冲区（注意：不清除深度缓冲区）
				renderer.clear();
				
				// 3. 执行渲染：将sceneScreen场景用cameraRTT摄像机渲染到屏幕
				// 这个场景只有一个全屏四边形，材质使用rtTexture纹理
				renderer.render( sceneScreen, cameraRTT );

				// ========== 第三遍渲染：主场景到屏幕 ==========
				// 目标：渲染使用纹理的3D球体阵列
				// 注意：这里没有清除深度缓冲区，所以球体会与全屏四边形混合
				// 但由于球体在Z=0位置，而全屏四边形在Z=-100位置，所以球体会显示在四边形前面
				renderer.render( scene, camera );
				
				// 渲染流程总结：
				// 1. 第一遍：3D场景 + 动态着色器 → 纹理
				// 2. 第二遍：纹理 → 全屏四边形（背景）
				// 3. 第三遍：使用纹理的球体阵列（前景）
				// 最终效果：动态纹理既作为背景，又作为球体的贴图
			}

			// ========== 程序启动 ==========
			// 调用初始化函数，启动整个应用程序
			init();
			// 初始化完成后，animate函数会被渲染器自动循环调用

		</script>
	</body>
</html>