<!-- Three.js WebGL场景过渡效果演示 - 功能和技术详解
一、核心功能概述
这是一个基于Three.js的WebGL场景过渡效果演示程序，主要展示两个3D场景之间的动态平滑过渡效果。程序通过创新的渲染技术和交互式控制，为用户提供视觉上吸引人且技术上有趣的3D图形体验。

主要功能模块：
双场景系统：创建了两个风格迥异的3D场景

场景A：500个蓝色立方体，白色背景，向下旋转

场景B：500个红色二十面体，黑色背景，向上旋转

动态场景过渡：实现两个场景之间的多种过渡效果

6种不同的纹理遮罩过渡方式

可调节的过渡速度和效果强度

自动循环或手动控制过渡过程

交互式控制面板：实时调整所有效果参数

场景动画开关

过渡效果参数调整

纹理选择和阈值控制

性能监控：内置帧率显示和性能统计

二、技术架构详解
1. Three.js核心渲染架构
javascript
// 核心渲染管线
WebGL渲染器 → 场景图管理 → 后期处理合成 → 屏幕输出
WebGLRenderer：底层的WebGL 2.0/1.0渲染器

Scene图系统：树状结构管理所有3D对象

Camera系统：透视投影相机，模拟人眼视角

2. 实例化渲染技术（关键优化）
javascript
// 创建实例化网格
const mesh = new THREE.InstancedMesh(geometry, material, 500);
技术优势：

单次绘制调用：500个物体只需1次GPU绘制调用（传统方式需要500次）

GPU实例化：使用gl.drawArraysInstanced或gl.drawElementsInstanced

矩阵缓冲区：所有实例的变换矩阵存储在单个缓冲区中

颜色实例化：每个实例可以有独立的颜色，但共享材质属性

性能对比：

text
传统渲染：500次绘制调用 × 每个调用的开销
实例化渲染：1次绘制调用 + 500个实例数据
性能提升：通常可达10-100倍
3. 后期处理与场景过渡
javascript
// 后期处理管线
EffectComposer → RenderTransitionPass → OutputPass
RenderTransitionPass工作原理：

双场景渲染：同时渲染两个场景到不同的渲染目标

混合算法：基于transition值(0-1)混合两个场景

纹理遮罩：使用黑白纹理控制混合的空间分布

阈值处理：控制遮罩的对比度和锐利度

混合公式（简化）：

text
最终颜色 = 场景A颜色 × alpha + 场景B颜色 × (1 - alpha)
其中 alpha = transition值 × 纹理遮罩值
4. 动画系统
双重动画机制：

场景内动画：几何体的连续旋转

javascript
mesh.rotation.y += rotationSpeed.y * deltaTime;
场景间动画：过渡值的补间动画

javascript
TWEEN.Tween(params).to({transition: 1}, 1500).yoyo(true);
时间管理：

THREE.Clock：精确的时间增量计算

deltaTime：帧间时间差，确保动画速度与帧率无关

requestAnimationFrame：浏览器原生动画循环

5. 纹理遮罩系统
6种过渡纹理的视觉效果：

柏林噪声（Perlin Noise）：自然、有机的随机过渡

方块（Squares）：网格状的逐渐显现

细胞（Cells）：细胞分裂般的扩散效果

扭曲（Distort）：波浪形扭曲过渡

渐变（Gradient）：平滑的线性/径向渐变

径向（Radial）：从中心向外扩散

纹理工作原理：

text
纹理作为alpha遮罩：白色区域先显示，黑色区域后显示
阈值调整：控制多少灰色被认定为"白色"或"黑色"
6. 响应式设计系统
javascript
window.addEventListener('resize', onWindowResize);
自适应机制：

相机宽高比：动态更新匹配窗口比例

渲染器尺寸：Canvas画布跟随窗口变化

合成器尺寸：后期处理缓冲区同步更新

投影矩阵：相机参数更新后重新计算

三、关键技术点深度解析
1. GPU优化技术
顶点着色器中的实例化
glsl
// 实例化渲染的顶点着色器伪代码
attribute vec3 instancePosition;
attribute mat4 instanceMatrix;
attribute vec3 instanceColor;

void main() {
    // 应用实例特定的变换矩阵
    vec4 worldPosition = instanceMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * viewMatrix * worldPosition;
    
    // 传递实例颜色到片段着色器
    vColor = instanceColor;
}
渲染状态优化
背面剔除（Backface Culling）：减少50%的片段处理

深度测试（Depth Testing）：避免不可见面片的渲染

视锥体剔除（Frustum Culling）：实例级别的空间剔除

2. 内存管理策略
缓冲区使用情况：

几何体缓冲区：1份几何体数据（所有实例共享）

矩阵缓冲区：500个4x4矩阵（16个float × 4字节 × 500 = 32KB）

颜色缓冲区：500个RGB颜色（3个float × 4字节 × 500 = 6KB）

纹理内存：6张512×512 RGBA纹理（512×512×4×6 ≈ 6MB）

3. 渲染管线状态机
text
帧开始
├── 更新动画状态（TWEEN.update）
├── 计算时间增量（clock.getDelta）
├── 更新场景物体位置
├── 检查渲染模式
│   ├── transition=0 → 直接渲染场景B
│   ├── transition=1 → 直接渲染场景A
│   └── 0<transition<1 → 后期处理渲染
├── 执行后期处理（如果需要）
│   ├── RenderTransitionPass执行
│   │   ├── 渲染场景A到缓冲区A
│   │   ├── 渲染场景B到缓冲区B
│   │   └── 混合两个缓冲区
│   └── OutputPass输出到屏幕
└── 帧结束
4. 着色器程序分析
RenderTransitionPass的核心着色器逻辑：

glsl
uniform sampler2D textureA;    // 场景A的渲染结果
uniform sampler2D textureB;    // 场景B的渲染结果
uniform sampler2D transitionTexture; // 过渡纹理
uniform float transition;      // 过渡进度
uniform float threshold;       // 纹理阈值

void main() {
    vec4 sceneAColor = texture2D(textureA, vUv);
    vec4 sceneBColor = texture2D(textureB, vUv);
    float maskValue = texture2D(transitionTexture, vUv).r;
    
    // 应用阈值
    float alpha = step(threshold, maskValue) * transition;
    
    // 混合两个场景
    gl_FragColor = mix(sceneBColor, sceneAColor, alpha);
}
四、性能特点和优化技巧
1. CPU瓶颈避免
矩阵计算离线：所有实例矩阵预先计算，运行时直接使用

避免每帧内存分配：重用临时对象（dummy Object3D）

减少JavaScript对象创建：重用颜色和向量对象

2. GPU瓶颈优化
减少状态切换：实例化渲染减少draw call

纹理合并：所有过渡纹理一次性加载

缓冲区重用：WebGL缓冲区对象持续使用

3. 内存使用优化
纹理压缩：PNG格式减少内存占用

几何体复用：两个场景使用不同的几何体但相同实例化机制

及时清理：无内存泄漏，所有资源正确管理

五、扩展性和可定制性
1. 易于扩展的功能
添加新场景：继承或复制FXScene类

增加过渡纹理：添加新的纹理文件并更新纹理数组

修改着色器：替换RenderTransitionPass的着色器代码

2. 可配置参数
javascript
// 所有可调整参数
{
    sceneAnimate,      // 控制场景内动画
    transitionAnimate, // 控制过渡动画
    transition,        // 过渡进度（0-1）
    useTexture,        // 是否使用纹理遮罩
    texture,           // 纹理类型选择
    cycle,             // 是否自动循环
    threshold          // 纹理阈值（0-1）
}
六、技术总结
这个演示程序展示了WebGL和Three.js在以下方面的强大能力：

高级渲染技术：实例化渲染、后期处理、多场景管理

性能优化：GPU优化、内存管理、渲染状态控制

视觉效果：动态过渡、多种遮罩效果、实时交互

代码架构：模块化设计、可扩展性、清晰的关注点分离 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL场景过渡效果演示 -->
		<title>Three.js WebGL场景过渡效果演示</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">
		<!-- 引入CSS样式表（如果存在的话） -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 页面顶部信息区域 -->
		<div id="info">
			<!-- 主标题和链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL场景过渡效果演示<br/>
			<!-- 作者信息和GitHub链接 -->
			作者：<a href="https://twitter.com/fernandojsg">fernandojsg</a> - 
			<a href="https://github.com/kile/three.js-demos">GitHub仓库</a><br/>
			<!-- 操作说明 -->
			<span style="font-size: 12px; color: #888;">
				使用右侧控制面板调整参数，查看不同的过渡效果
			</span>
		</div>

		<!-- ES6模块导入映射表：定义JavaScript模块的别名和路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：使用ES6模块化语法 -->
		<script type="module">

			// ============================================
			// 模块导入部分
			// ============================================

			// 导入Three.js核心库的所有功能
			// THREE对象包含所有Three.js的核心类和方法
			import * as THREE from 'three';

			// 导入性能监控模块：用于显示帧率、内存使用等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入轻量级GUI控制面板库：用于创建用户界面控件
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入补间动画库：用于创建平滑的数值动画（如0到1的过渡）
			import TWEEN from 'three/addons/libs/tween.module.js';

			// 导入后期效果合成器：用于组合多个渲染通道（post-processing passes）
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

			// 导入场景过渡渲染通道：专门用于处理两个场景之间的过渡效果
			import { RenderTransitionPass } from 'three/addons/postprocessing/RenderTransitionPass.js';

			// 导入输出通道：将最终渲染结果输出到屏幕
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

			// ============================================
			// 全局变量声明
			// ============================================

			// 性能统计对象：用于监控渲染性能
			let stats;
			
			// Three.js渲染器：负责将3D场景渲染到Canvas画布
			let renderer;
			
			// 后期效果合成器：管理和执行多个后期处理效果
			let composer;
			
			// 场景过渡渲染通道：处理两个场景之间的过渡效果
			let renderTransitionPass;

			// 纹理数组：存储加载的所有过渡纹理
			const textures = [];
			
			// Three.js时钟对象：用于计算帧间时间差（delta time），实现与帧率无关的动画
			const clock = new THREE.Clock();

			// 控制参数对象：存储所有可以通过GUI调整的参数
			// 这些参数控制着场景和过渡效果的各种行为
			const params = {
				sceneAnimate: true,      // 布尔值：是否启用场景内物体的动画（旋转）
				transitionAnimate: true, // 布尔值：是否启用场景之间的过渡动画
				transition: 0,           // 数值（0-1）：当前过渡进度，0表示完全显示场景B，1表示完全显示场景A
				useTexture: true,        // 布尔值：是否使用纹理来影响过渡效果（纹理作为alpha遮罩）
				texture: 5,              // 数值（0-5）：当前选中的过渡纹理索引，对应6种不同的过渡样式
				cycle: true,             // 布尔值：是否在每次过渡完成后自动切换到下一个纹理
				threshold: 0.1,          // 数值（0-1）：纹理阈值，控制纹理过渡的锐利程度
			};

			// ============================================
			// 场景创建
			// ============================================

			// 创建第一个3D场景（场景A）
			// 参数1：立方体几何体（BoxGeometry），尺寸为2x2x2
			// 参数2：旋转速度向量，控制场景内物体的旋转方向和速度（x, y, z轴）
			// 参数3：场景背景颜色（十六进制白色）
			const fxSceneA = new FXScene(
				new THREE.BoxGeometry( 2, 2, 2 ),      // 立方体几何体
				new THREE.Vector3( 0, -0.4, 0 ),       // 主要沿Y轴负方向旋转
				0xffffff                                // 白色背景
			);

			// 创建第二个3D场景（场景B）
			// 参数1：二十面体几何体（IcosahedronGeometry），半径为1，细分级别为1
			// 参数2：旋转速度向量，控制场景内物体的旋转方向和速度
			// 参数3：场景背景颜色（十六进制黑色）
			const fxSceneB = new FXScene(
				new THREE.IcosahedronGeometry( 1, 1 ), // 二十面体几何体
				new THREE.Vector3( 0, 0.2, 0.1 ),      // 主要沿Y轴和Z轴正方向旋转
				0x000000                                // 黑色背景
			);

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

			// ============================================
			// 初始化函数
			// ============================================

			/**
			 * 主初始化函数
			 * 负责设置整个Three.js应用程序的所有组件
			 * 执行顺序：GUI → 纹理 → 渲染器 → 后期处理 → 性能监控
			 */
			function init() {
				// 1. 初始化控制面板（GUI）
				initGUI();
				
				// 2. 初始化并加载过渡纹理
				initTextures();

				// 3. 创建WebGL渲染器
				// 参数：开启抗锯齿（antialias）以获得更平滑的边缘
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				
				// 设置设备像素比：匹配显示器的物理像素密度
				// 在高DPI屏幕上可以获得更清晰的渲染效果
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数：animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的Canvas元素添加到页面body中
				// renderer.domElement是一个<canvas>元素
				document.body.appendChild( renderer.domElement );

				// 4. 创建后期效果合成器
				// 参数：传入渲染器，合成器将使用该渲染器进行输出
				composer = new EffectComposer( renderer );

				// 5. 初始化性能监控
				// Stats.js会在页面左上角显示一个性能面板（FPS、渲染时间等）
				stats = new Stats();
				document.body.appendChild( stats.dom );

				// 6. 创建场景过渡渲染通道
				// 参数：场景A、相机A、场景B、相机B
				// 这个通道负责混合渲染两个场景，根据transition值决定混合比例
				renderTransitionPass = new RenderTransitionPass(
					fxSceneA.scene,    // 第一个场景
					fxSceneA.camera,   // 第一个场景的相机
					fxSceneB.scene,    // 第二个场景
					fxSceneB.camera    // 第二个场景的相机
				);
				
				// 设置初始过渡纹理：使用第一个纹理（索引0）
				renderTransitionPass.setTexture( textures[ 0 ] );
				
				// 将过渡通道添加到后期效果合成器中
				// 通道的执行顺序就是添加顺序
				composer.addPass( renderTransitionPass );

				// 7. 创建输出通道
				// 输出通道是合成器的最后一个通道，负责将最终结果渲染到屏幕
				const outputPass = new OutputPass();
				composer.addPass( outputPass );

				// 注意：这里没有调用render()，因为animate函数会处理渲染
			}

			// ============================================
			// 事件监听器
			// ============================================

			/**
			 * 窗口大小改变事件监听器
			 * 当浏览器窗口大小改变时，需要更新多个组件的大小和比例
			 */
			window.addEventListener( 'resize', onWindowResize );

			/**
			 * 窗口大小改变事件处理函数
			 * 这个函数在窗口大小改变时被调用，确保所有组件正确适应新窗口尺寸
			 */
			function onWindowResize() {
				// 1. 更新两个场景的相机宽高比（aspect ratio）
				// 相机的宽高比需要与窗口宽高比匹配，否则物体会被拉伸
				fxSceneA.resize();
				fxSceneB.resize();
				
				// 2. 更新WebGL渲染器尺寸
				// 渲染器的画布（canvas）需要与窗口大小保持一致
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 3. 更新后期效果合成器尺寸
				// 合成器的内部缓冲区需要与渲染器尺寸一致
				composer.setSize( window.innerWidth, window.innerHeight );
			}

			// ============================================
			// 过渡动画设置
			// ============================================

			/**
			 * 创建场景过渡动画
			 * 使用TWEEN.js库创建一个无限循环的补间动画
			 * 动画控制params.transition值在0和1之间来回变化
			 * 这个值决定了两个场景的混合比例
			 */
			new TWEEN.Tween( params )                  // 创建一个作用于params对象的补间动画
				.to( { transition: 1 }, 1500 )        // 在1500毫秒内将transition属性变化到1
				.onUpdate( function () {              // 每次动画更新时的回调函数
					// 1. 更新过渡通道的过渡值
					// 将params.transition传递给渲染通道，控制场景混合
					renderTransitionPass.setTransition( params.transition );

					// 2. 如果启用了纹理循环，在过渡开始/结束时切换纹理
					// params.cycle控制是否自动切换过渡纹理
					if ( params.cycle ) {
						// 检测过渡的边界条件（开始或结束）
						// params.transition == 0：完全显示场景B，即将开始向场景A过渡
						// params.transition == 1：完全显示场景A，即将开始向场景B过渡
						if ( params.transition == 0 || params.transition == 1 ) {
							// 循环更新纹理索引
							// 使用模运算确保索引在0-5之间循环
							params.texture = ( params.texture + 1 ) % textures.length;
							
							// 将新纹理设置到过渡通道
							renderTransitionPass.setTexture( textures[ params.texture ] );
						}
					}
				} )
				.repeat( Infinity )   // 无限重复动画
				.delay( 2000 )        // 每次循环开始前等待2000毫秒
				.yoyo( true )         // 启用"溜溜球"模式：动画来回播放（0→1→0→1...）
				.start();             // 立即启动动画

			// ============================================
			// 动画循环
			// ============================================

			/**
			 * 主动画循环函数
			 * 这是Three.js应用程序的核心，每帧都会被调用（通常60次/秒）
			 * 负责更新动画状态、更新场景、渲染画面
			 * @returns {void}
			 */
			function animate() {
				// 1. 更新补间动画
				// 如果启用了过渡动画，更新所有活动的TWEEN动画
				// TWEEN.update()会根据时间自动更新所有补间动画的状态
				if ( params.transitionAnimate ) TWEEN.update();

				// 2. 获取时间增量（delta time）
				// clock.getDelta()返回自上次调用此方法以来经过的时间（秒）
				// 使用时间增量可以实现与帧率无关的平滑动画
				const delta = clock.getDelta();
				
				// 3. 更新两个场景
				// 将时间增量传递给场景，用于更新场景内物体的动画
				fxSceneA.update( delta );
				fxSceneB.update( delta );

				// 4. 渲染场景
				// 根据当前状态选择合适的渲染方式
				render();
				
				// 5. 更新性能统计显示
				// stats.update()会更新FPS计数器和渲染时间显示
				stats.update();
			}

			// ============================================
			// 纹理加载函数
			// ============================================

			/**
			 * 初始化并加载所有过渡纹理
			 * 纹理是2D图像，用于控制场景过渡的方式（作为alpha遮罩）
			 * 不同的纹理会产生不同的过渡效果（如溶解、擦除、马赛克等）
			 */
			function initTextures() {
				// 创建Three.js纹理加载器
				// TextureLoader用于异步加载图像文件并创建Three.js纹理对象
				const loader = new THREE.TextureLoader();

				// 加载6个过渡纹理
				// 这些纹理应该是黑白图像，白色区域先显示，黑色区域后显示
				for ( let i = 0; i < 6; i ++ ) {
					// 加载纹理图像文件
					// 文件路径：textures/transition/transition1.png 到 transition6.png
					// 纹理加载是异步的，但Three.js会处理加载完成的回调
					textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
					
					// 注意：这里没有设置纹理的重复模式、过滤等属性
					// 默认情况下，纹理会按照原始用途进行相应设置
				}
				
				// 纹理说明：
				// 纹理1（索引0）：柏林噪声（Perlin Noise）- 自然随机的过渡效果
				// 纹理2（索引1）：方块（Squares）- 方块状逐渐出现的过渡
				// 纹理3（索引2）：细胞（Cells）- 类似细胞分裂的过渡效果
				// 纹理4（索引3）：扭曲（Distort）- 扭曲变形的过渡效果
				// 纹理5（索引4）：渐变（Gradient）- 线性或径向渐变过渡
				// 纹理6（索引5）：径向（Radial）- 从中心向外扩散的过渡
			}

			// ============================================
			// GUI控制面板初始化
			// ============================================

			/**
			 * 初始化图形用户界面（GUI）
			 * 创建控制面板，允许用户实时调整各种参数
			 * 使用lil-gui库，这是一个轻量级的GUI库
			 */
			function initGUI() {
				// 创建GUI实例
				// 默认情况下，GUI面板会出现在屏幕右上角
				const gui = new GUI();

				// 1. 场景动画开关
				// 控制场景内物体是否旋转
				gui.add( params, 'sceneAnimate' )
					.name( '场景动画' )                    // 显示在GUI中的标签
					.onChange( function( value ) {        // 值改变时的回调（可选）
						// 这里可以添加额外的处理逻辑
					} );

				// 2. 过渡动画开关
				// 控制是否自动播放场景之间的过渡动画
				gui.add( params, 'transitionAnimate' )
					.name( '过渡动画' );

				// 3. 过渡进度滑块
				// 手动控制过渡进度（0=场景B, 1=场景A）
				gui.add( params, 'transition', 0, 1, 0.01 )  // 最小值0，最大值1，步长0.01
					.name( '过渡进度' )
					.onChange( function ( value ) {
						// 当滑块值改变时，更新过渡通道的过渡值
						renderTransitionPass.setTransition( value );
					} )
					.listen();  // .listen()使GUI显示当前值（与params对象同步）

				// 4. 使用纹理过渡开关
				// 控制是否使用纹理作为过渡的alpha遮罩
				gui.add( params, 'useTexture' )
					.name( '使用纹理过渡' )
					.onChange( function ( value ) {
						// 启用或禁用纹理过渡效果
						renderTransitionPass.useTexture( value );
					} );

				// 5. 纹理选择下拉框
				// 从6种预定义的过渡纹理中选择一种
				gui.add( params, 'texture', {
					'柏林噪声': 0,    // Perlin Noise - 自然随机的过渡
					'方块': 1,        // Squares - 方块状过渡
					'细胞': 2,        // Cells - 细胞状过渡
					'扭曲': 3,        // Distort - 扭曲变形过渡
					'渐变': 4,        // Gradient - 渐变过渡
					'径向': 5         // Radial - 径向扩散过渡
				} )
				.name( '过渡纹理' )
				.onChange( function ( value ) {
					// 当选择新的纹理时，更新过渡通道的纹理
					renderTransitionPass.setTexture( textures[ value ] );
				} )
				.listen();  // 显示当前选中的纹理

				// 6. 纹理循环开关
				// 控制是否在每次过渡完成后自动切换到下一个纹理
				gui.add( params, 'cycle' )
					.name( '自动切换纹理' );

				// 7. 纹理阈值滑块
				// 控制纹理过渡的锐利程度
				// 值越小过渡越平滑，值越大过渡越突然
				gui.add( params, 'threshold', 0, 1, 0.01 )
					.name( '纹理阈值' )
					.onChange( function ( value ) {
						// 更新纹理的阈值参数
						renderTransitionPass.setTextureThreshold( value );
					} );

				// GUI布局提示：
				// 默认情况下，所有控件按照添加顺序垂直排列
				// 可以创建文件夹来分组控件，但本例中没有使用
			}

			// ============================================
			// 渲染函数
			// ============================================

			/**
			 * 主渲染函数
			 * 根据当前的过渡状态选择合适的渲染方式
			 * 有三种渲染模式：
			 * 1. 完全渲染场景B（transition === 0）
			 * 2. 完全渲染场景A（transition === 1）
			 * 3. 渲染过渡效果（0 < transition < 1）
			 */
			function render() {
				// 情况1：过渡进度为0（完全显示场景B）
				// 此时不需要使用后期效果合成器，直接渲染场景B即可
				// 这可以提高性能，因为避免了不必要的后期处理
				if ( params.transition === 0 ) {
					// 使用基础的WebGL渲染器直接渲染场景B
					renderer.render( fxSceneB.scene, fxSceneB.camera );
				}
				// 情况2：过渡进度为1（完全显示场景A）
				// 同样直接渲染场景A，避免后期处理开销
				else if ( params.transition === 1 ) {
					// 使用基础的WebGL渲染器直接渲染场景A
					renderer.render( fxSceneA.scene, fxSceneA.camera );
				}
				// 情况3：过渡进度在0和1之间（正在过渡中）
				// 此时需要使用后期效果合成器渲染过渡效果
				else {
					// composer.render()会执行所有添加的后期处理通道
					// 包括RenderTransitionPass（混合两个场景）和OutputPass（输出到屏幕）
					composer.render();
				}
				
				// 性能优化说明：
				// 这种条件渲染方式避免了在不需要过渡时执行后期处理的开销
				// 后期处理通道（特别是涉及多个渲染目标时）可能比较消耗性能
			}

			// ============================================
			// FXScene类定义 - 自定义场景管理类
			// ============================================

			/**
			 * FXScene类：封装Three.js场景的创建和管理
			 * 这个类简化了场景的创建过程，提供了统一的管理接口
			 * @param {THREE.BufferGeometry} geometry - 几何体对象，用于创建实例化网格
			 * @param {THREE.Vector3} rotationSpeed - 旋转速度向量（x, y, z分量）
			 * @param {number} backgroundColor - 场景背景颜色（十六进制数值）
			 */
			function FXScene( geometry, rotationSpeed, backgroundColor ) {
				
				// ========== 相机设置 ==========
				
				/**
				 * 创建透视相机（PerspectiveCamera）
				 * 参数说明：
				 * @param {number} 50 - 垂直视野角度（Field of View），单位：度
				 * @param {number} window.innerWidth/window.innerHeight - 相机宽高比
				 * @param {number} 0.1 - 近裁剪平面（Near Clipping Plane），距离相机多近的物体开始渲染
				 * @param {number} 100 - 远裁剪平面（Far Clipping Plane），距离相机多远的物体停止渲染
				 */
				const camera = new THREE.PerspectiveCamera(
					50,                                     // 视野角度（FOV）
					window.innerWidth / window.innerHeight, // 宽高比（匹配窗口比例）
					0.1,                                    // 近裁剪面
					100                                     // 远裁剪面
				);
				
				// 设置相机位置：沿Z轴正方向移动20个单位
				// Three.js使用右手坐标系：Z轴正方向指向屏幕外
				camera.position.z = 20;

				// ========== 场景设置 ==========
				
				// 创建Three.js场景对象
				// Scene是所有3D对象的容器，包括网格、灯光、相机等
				const scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 背景颜色在渲染时作为清除颜色使用
				scene.background = new THREE.Color( backgroundColor );
				
				// 添加环境光（Ambient Light）
				// 环境光没有方向，均匀照亮场景中的所有物体
				// 参数1：光的颜色（十六进制）
				// 参数2：光的强度（通常0-1，但可以大于1）
				scene.add( new THREE.AmbientLight( 0xaaaaaa, 3 ) );

				// 添加平行光（Directional Light）
				// 平行光有方向，模拟远处的光源（如太阳）
				const light = new THREE.DirectionalLight( 0xffffff, 3 );
				light.position.set( 0, 1, 4 );  // 设置光源位置（X, Y, Z）
				scene.add( light );

				// 保存旋转速度向量到实例属性
				// 用于在update函数中更新网格的旋转
				this.rotationSpeed = rotationSpeed;

				// ========== 材质和网格设置 ==========
				
				// 根据几何体类型选择材质颜色
				// 场景A（立方体）使用蓝色，场景B（二十面体）使用红色
				const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
				
				// 创建Phong材质
				// Phong材质支持高光反射，产生更真实的光照效果
				// flatShading: true 表示使用平面着色（每个面是单一颜色）
				const material = new THREE.MeshPhongMaterial( { 
					color: color,        // 基础颜色
					flatShading: true    // 平面着色（非平滑着色）
				} );
				
				// 创建实例化网格
				// 实例化渲染允许一次性渲染大量相同的几何体，极大提高性能
				// 参数：几何体，材质，实例数量（500个）
				const mesh = generateInstancedMesh( geometry, material, 500 );
				scene.add( mesh );

				// ========== 公开属性 ==========
				
				// 将内部变量公开为实例属性
				// 这样外部代码可以通过对象实例访问这些属性
				this.scene = scene;    // Three.js场景对象
				this.camera = camera;  // Three.js相机对象
				this.mesh = mesh;      // 实例化网格对象

				// ========== 公共方法 ==========
				
				/**
				 * 更新函数：每帧调用，更新场景状态
				 * 主要处理场景内物体的动画
				 * @param {number} delta - 时间增量（秒），自上一帧以来经过的时间
				 */
				this.update = function ( delta ) {
					// 只有当场景动画开关打开时才执行动画
					if ( params.sceneAnimate ) {
						// 根据旋转速度和时间增量更新网格的旋转
						// 旋转速度的每个分量分别乘以时间增量，确保动画速度与帧率无关
						mesh.rotation.x += this.rotationSpeed.x * delta;
						mesh.rotation.y += this.rotationSpeed.y * delta;
						mesh.rotation.z += this.rotationSpeed.z * delta;
						
						// 注意：这里直接修改了mesh.rotation的原始值
						// Three.js中旋转使用弧度制（radians）
					}
				};

				/**
				 * 窗口大小改变处理函数
				 * 更新相机的宽高比，并重新计算投影矩阵
				 * 这个函数在window.resize事件中被调用
				 */
				this.resize = function () {
					// 更新相机的宽高比为新的窗口比例
					camera.aspect = window.innerWidth / window.innerHeight;
					
					// 更新相机的投影矩阵
					// 当相机参数改变后，必须调用此方法使更改生效
					camera.updateProjectionMatrix();
				};
				
				// 注意：这个类没有显式的构造函数（除了参数接收）
				// 所有初始化逻辑都在函数体内部执行
			}

			// ============================================
			// 实例化网格生成函数
			// ============================================

			/**
			 * 生成实例化网格（InstancedMesh）
			 * 创建大量相同几何体的实例，使用实例化渲染优化性能
			 * 实例化渲染的核心思想：一次绘制调用渲染多个实例，每个实例有自己的变换矩阵和颜色
			 * @param {THREE.BufferGeometry} geometry - 基础几何体（所有实例共享）
			 * @param {THREE.Material} material - 材质（所有实例共享）
			 * @param {number} count - 要创建的实例数量
			 * @returns {THREE.InstancedMesh} 实例化网格对象
			 */
			function generateInstancedMesh( geometry, material, count ) {
				// 创建InstancedMesh对象
				// 参数：几何体，材质，实例数量
				const mesh = new THREE.InstancedMesh( geometry, material, count );

				// 临时对象：用于计算每个实例的变换矩阵
				// 我们不会将这个对象添加到场景中，只用于矩阵计算
				const dummy = new THREE.Object3D();
				
				// 颜色对象：用于生成和设置每个实例的颜色
				// 重用同一个颜色对象以提高性能
				const color = new THREE.Color();

				// 循环创建每个实例的属性
				for ( let i = 0; i < count; i ++ ) {
					// ========== 位置 ==========
					// 为每个实例设置随机位置
					// Math.random()返回0-1之间的随机数
					// 公式：Math.random() * range - offset 创建指定范围内的随机值
					dummy.position.x = Math.random() * 100 - 50;   // X: -50 到 50
					dummy.position.y = Math.random() * 60 - 30;    // Y: -30 到 30
					dummy.position.z = Math.random() * 80 - 40;    // Z: -40 到 40

					// ========== 旋转 ==========
					// 为每个实例设置随机旋转
					// 使用弧度制，2π弧度 = 360度
					dummy.rotation.x = Math.random() * 2 * Math.PI;  // 绕X轴随机旋转
					dummy.rotation.y = Math.random() * 2 * Math.PI;  // 绕Y轴随机旋转
					dummy.rotation.z = Math.random() * 2 * Math.PI;  // 绕Z轴随机旋转

					// ========== 缩放 ==========
					// 为每个实例设置随机缩放
					// 基础缩放：1.0 到 3.0 之间
					dummy.scale.x = Math.random() * 2 + 1;  // 1.0 到 3.0

					// 根据几何体类型确定缩放方式
					if ( geometry.type === 'BoxGeometry' ) {
						// 对于立方体，三个轴可以有不同的缩放值
						// 这可以创建长方体而不仅仅是正方体
						dummy.scale.y = Math.random() * 2 + 1;  // Y轴：1.0 到 3.0
						dummy.scale.z = Math.random() * 2 + 1;  // Z轴：1.0 到 3.0
					} else {
						// 对于二十面体等对称几何体，通常使用统一缩放
						// 保持所有轴向相同的缩放值，避免几何体变形
						dummy.scale.y = dummy.scale.x;  // Y轴与X轴相同
						dummy.scale.z = dummy.scale.x;  // Z轴与X轴相同
					}

					// ========== 更新矩阵 ==========
					// 将位置、旋转、缩放组合成变换矩阵
					// Three.js使用4x4矩阵表示3D变换
					dummy.updateMatrix();

					// ========== 设置实例矩阵 ==========
					// 将计算好的变换矩阵设置到实例化网格中
					// 每个实例都有自己的变换矩阵，但共享几何体和材质
					mesh.setMatrixAt( i, dummy.matrix );
					
					// ========== 设置实例颜色 ==========
					// 为每个实例设置随机颜色（灰度）
					// setScalar()将颜色设置为相同的RGB值，创建灰度色
					// 0.1 + 0.9 * Math.random()：创建从深灰（0.1）到白（1.0）的随机灰度
					mesh.setColorAt( i, color.setScalar( 0.1 + 0.9 * Math.random() ) );
				}

				// ========== 重要说明 ==========
				// 实例化网格需要显式告知Three.js实例属性已更新
				// 但在这个函数中，我们在创建过程中设置属性，所以不需要额外调用
				// 如果在创建后动态更新实例属性，需要调用：
				// mesh.instanceMatrix.needsUpdate = true;
				// mesh.instanceColor.needsUpdate = true;

				return mesh;
				
				// 性能优势说明：
				// 1. 减少绘制调用：500个物体只需要1次绘制调用，而不是500次
				// 2. 减少CPU到GPU的数据传输：矩阵和颜色数据存储在GPU内存中
				// 3. 更好的批处理：GPU可以更高效地处理批量数据
			}
			
			// ============================================
			// 文件结束
			// ============================================
			
			// 总结：这个Three.js示例展示了：
			// 1. 创建和管理多个3D场景
			// 2. 使用实例化渲染优化大量相同物体的性能
			// 3. 实现两个场景之间的平滑过渡效果
			// 4. 使用后期处理通道实现复杂的渲染效果
			// 5. 提供交互式GUI控制各种参数
			// 6. 处理窗口大小改变等响应式需求

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