<!-- 代码功能与技术点详解
一、主要功能概述
这是一个基于Three.js WebGPU的3D场景过渡特效演示，实现了两个不同3D场景之间的平滑切换效果。

核心功能：
双场景展示：

场景A：500个随机分布的蓝色立方体，白色背景

场景B：500个随机分布的红色二十面体，黑色背景

动态场景切换：

支持6种不同的过渡效果（纹理过渡）

可手动控制过渡进度，也可自动播放

平滑的动画过渡效果

交互控制：

实时调整所有参数

切换不同过渡纹理

控制动画开关

性能优化渲染：

智能渲染策略，根据状态选择最佳渲染方式

实例化渲染大量相同物体

二、核心技术点
1. WebGPU渲染技术
javascript
// 使用下一代图形API WebGPU
import * as THREE from 'three/webgpu';
renderer = new THREE.WebGPURenderer({ antialias: true });
优势：

相比WebGL有更好的多线程支持

更低的CPU开销

支持现代GPU特性

特点：专门为现代GPU架构设计

2. TSL（Three.js Shader Language）着色器语言
javascript
import { uniform, pass } from 'three/tsl';
import { transition } from 'three/addons/tsl/display/TransitionNode.js';
作用：在JavaScript中编写着色器逻辑

优势：

类型安全

可复用性高

编辑器支持好

应用：实现复杂的场景过渡效果

3. 实例化渲染（Instanced Rendering）
javascript
const mesh = new THREE.InstancedMesh(geometry, material, 500);
技术原理：

单次绘制调用渲染多个相同几何体

每个实例使用独立的变换矩阵和颜色

性能优势：

减少GPU draw call

提升渲染效率（特别是大量重复物体）

实现细节：

javascript
// 为每个实例设置变换矩阵
mesh.setMatrixAt(i, dummy.matrix);
// 为每个实例设置颜色
mesh.setColorAt(i, color.setScalar(0.1 + 0.9 * Math.random()));
4. 后期处理（Post-Processing）
javascript
postProcessing = new THREE.PostProcessing(renderer);
技术栈：

渲染通道（Render Passes）

过渡节点（Transition Node）

混合纹理（Mix Textures）

工作流程：

分别渲染两个场景到纹理

使用过渡着色器混合两个纹理

根据过渡值控制混合程度

5. 过渡算法实现
javascript
transitionPass = transition(scenePassA, scenePassB, texture, transitionValue, threshold, useTexture);
核心算法：

基于纹理的过渡：使用alpha纹理控制像素显示

阈值控制：调整过渡边缘的锐利程度

线性插值：平滑的数值过渡

数学原理：

text
// 简化版过渡公式
finalColor = mix(sceneAColor, sceneBColor, step(transitionValue, textureValue));
6. 动画系统
TWEEN.js动画库：

javascript
new TWEEN.Tween(effectController).to({transition: 1}, 1500)
基于时间的动画（Time-based Animation）：

javascript
const delta = clock.getDelta();
mesh.rotation.x += rotationSpeed.x * delta;
使用delta time确保动画帧率无关

在任何设备上保持一致的动画速度

7. 性能优化策略
智能渲染决策：
javascript
if (transition === 0) {
    // 直接渲染场景B
    renderer.render(fxSceneB.scene, fxSceneB.camera);
} else if (transition === 1) {
    // 直接渲染场景A
    renderer.render(fxSceneA.scene, fxSceneA.camera);
} else {
    // 使用后处理混合渲染
    postProcessing.render();
}
纹理管理：
预加载6种过渡纹理

纹理复用，避免重复加载

动态切换纹理引用

8. 模块化架构
场景封装：
javascript
function FXScene(geometry, rotationSpeed, backgroundColor) {
    // 封装相机、灯光、场景、更新逻辑
}
配置分离：
效果控制器集中管理所有参数

ImportMap管理模块依赖

GUI与控制逻辑分离

9. 响应式设计
窗口大小变化监听

相机宽高比自动调整

渲染器尺寸同步更新

10. 调试与开发支持
javascript
renderer.inspector = new Inspector();
内置Three.js调试器

实时参数调整

场景对象可视化

三、技术亮点
1. 创新的过渡效果
6种专业的过渡纹理

可调节的过渡参数

支持纹理循环切换

2. 高效的内存管理
实例化减少内存占用

纹理资源复用

避免重复创建对象

3. 平滑的动画体验
缓动函数（Easing Functions）

60fps稳定帧率

无卡顿的过渡效果

4. 现代化的API使用
ES6模块化

WebGPU现代图形API

基于节点的材质系统

5. 完整的用户交互
实时的GUI控制

自动/手动模式切换

完整的参数调整 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的标题
			three.js：一个基于WebGL/WebGPU的JavaScript 3D库
			WebGPU：新一代图形API，提供更好的性能和更低的CPU开销
			场景过渡：实现两个3D场景之间平滑切换的效果
		-->
		<title>three.js WebGPU - 场景过渡特效演示</title>
		
		<!-- 
			字符编码设置：
			utf-8：支持多语言字符集，包括中文
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口设置（Viewport）：
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放（保持固定的缩放级别）
			minimum-scale=1.0：最小缩放比例为1.0（100%）
			maximum-scale=1.0：最大缩放比例为1.0（100%）
			这些设置确保网站在移动设备上正确显示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表：
			type="text/css"：指定MIME类型为CSS
			rel="stylesheet"：定义文档与外部资源的关系为样式表
			href="example.css"：CSS文件路径，控制页面布局和样式
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			页面信息区域（id="info"）：
			这个div包含页面标题、logo和相关信息
			通过CSS进行样式控制，通常显示在页面顶部或角落
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接：
				target="_blank"：在新标签页中打开链接
				rel="noopener"：安全特性，防止新页面访问window.opener
				class="logo-link"：CSS类，通常用于设置Three.js logo背景图
				点击logo可以跳转到Three.js官方网站
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装器，用于标题的样式控制 -->
			<div class="title-wrapper">
				<!-- Three.js主链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 当前演示的特定标题 -->
				<span>场景过渡特效演示</span>
			</div>

			<!-- 
				次要信息区域（small标签表示次要内容）：
				包含原作者信息和GitHub仓库链接
				这里使用了中文翻译
			-->
			<small>
				原始实现由 
				<!-- 原作者Twitter链接 -->
				<a href="https://twitter.com/fernandojsg" target="_blank">fernandojsg</a> - 
				<!-- GitHub仓库链接 -->
				<a href="https://github.com/kile/three.js-demos" target="_blank">GitHub仓库</a>。
			</small>
		</div>

		<!-- 
			ImportMap配置：
			现代JavaScript模块导入映射系统，允许定义模块名称到实际URL的映射
			type="importmap"：指定为importmap类型
			这个功能让浏览器知道如何解析模块导入语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"：指定为ES6模块，支持import/export语法
			这是整个3D场景和交互逻辑的核心代码
		-->
		<script type="module">

			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js WebGPU核心模块
			// WebGPU是WebGL的下一代API，提供更好的性能和更低的开销
			import * as THREE from 'three/webgpu';

			// 导入TWEEN.js动画库
			// 用于创建平滑的动画过渡效果，支持缓动函数
			import TWEEN from 'three/addons/libs/tween.module.js';

			// 导入调试检查器（Inspector）
			// 这是一个可视化调试工具，可以查看和修改场景中的对象属性
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入TSL（Three.js着色器语言）相关模块
			// TSL是一个着色器库，用于创建复杂的着色器效果
			import { uniform, pass } from 'three/tsl';
			// 导入场景过渡节点，专门用于处理场景之间的过渡效果
			import { transition } from 'three/addons/tsl/display/TransitionNode.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// 渲染器：负责将3D场景渲染到2D canvas上
			let renderer;
			// 后处理对象：用于实现各种屏幕空间效果
			let postProcessing;
			// 过渡控制器：GUI中控制过渡的滑块控制器
			let transitionController;
			// 过渡通道：包含场景过渡逻辑的渲染通道
			let transitionPass;
			// 纹理数组：存储所有过渡纹理
			const textures = [];
			// 时钟对象：用于计算帧之间的时间差（delta time）
			const clock = new THREE.Clock();

			// ============================================
			// 效果控制器对象
			// 这个对象存储所有可控制的参数，并与GUI绑定
			// ============================================
			const effectController = {
				// 是否启用场景动画（立方体和二十面体的旋转）
				animateScene: true,
				// 是否启用过渡动画（两个场景之间的切换动画）
				animateTransition: true,
				// 当前过渡值（0-1之间，0表示完全显示场景B，1表示完全显示场景A）
				transition: 0,
				// 对应的uniform变量，用于传递给着色器
				_transition: uniform( 0 ),
				// 是否使用纹理进行过渡（使用纹理可以提供更丰富的过渡效果）
				useTexture: true,
				// 对应的uniform变量，控制着色器中是否使用纹理
				_useTexture: uniform( 1 ),
				// 当前使用的纹理索引（0-5，对应6种不同的过渡纹理）
				texture: 5,
				// 是否循环切换纹理（每次过渡完成后自动切换到下一个纹理）
				cycle: true,
				// 过渡阈值，控制过渡的锐利程度
				threshold: uniform( 0.1 ),
			};

			// ============================================
			// 函数定义部分
			// ============================================

			/**
			 * 生成实例化网格（Instanced Mesh）
			 * 实例化是一种性能优化技术，可以高效渲染大量相同的几何体
			 * 
			 * @param {THREE.BufferGeometry} geometry - 基础几何体（如立方体、球体等）
			 * @param {THREE.Material} material - 材质对象，定义几何体的外观
			 * @param {number} count - 要生成的实例数量
			 * @returns {THREE.InstancedMesh} 返回实例化网格对象
			 * 
			 * 实例化渲染的优点：
			 * 1. 减少GPU draw call，提高渲染性能
			 * 2. 使用相同几何体和材质，但每个实例可以有独立的变换矩阵和颜色
			 * 3. 特别适合渲染大量重复的对象（如草、树、人群等）
			 */
			function generateInstancedMesh( geometry, material, count ) {

				// 创建实例化网格对象
				// 参数：几何体、材质、实例数量
				const mesh = new THREE.InstancedMesh( geometry, material, count );

				// 创建一个临时的3D对象，用于计算每个实例的变换矩阵
				const dummy = new THREE.Object3D();
				// 临时颜色对象，用于生成随机颜色
				const color = new THREE.Color();

				// 为每个实例设置随机属性
				for ( let i = 0; i < count; i ++ ) {

					// 随机位置：在指定的范围内生成随机坐标
					// X轴：-50 到 50
					// Y轴：-30 到 30
					// Z轴：-40 到 40
					dummy.position.x = Math.random() * 100 - 50;
					dummy.position.y = Math.random() * 60 - 30;
					dummy.position.z = Math.random() * 80 - 40;

					// 随机旋转：每个轴随机旋转0-360度
					// Math.PI * 2 = 360度（弧度制）
					dummy.rotation.x = Math.random() * 2 * Math.PI;
					dummy.rotation.y = Math.random() * 2 * Math.PI;
					dummy.rotation.z = Math.random() * 2 * Math.PI;

					// 基础缩放：X轴缩放1-3倍
					dummy.scale.x = Math.random() * 2 + 1;

					// 如果是盒子几何体，为每个轴设置独立的随机缩放
					// 这样每个立方体可以有不同的大小比例
					if ( geometry.type === 'BoxGeometry' ) {

						dummy.scale.y = Math.random() * 2 + 1;
						dummy.scale.z = Math.random() * 2 + 1;

					} else {
						// 对于其他几何体（如二十面体），使用统一缩放
						// 保持几何体的原始比例
						dummy.scale.y = dummy.scale.x;
						dummy.scale.z = dummy.scale.x;

					}

					// 更新变换矩阵
					// 将位置、旋转、缩放组合成一个4x4变换矩阵
					dummy.updateMatrix();

					// 将计算好的变换矩阵设置到实例化网格中
					// 每个实例存储自己的变换矩阵
					mesh.setMatrixAt( i, dummy.matrix );
					// 设置实例的颜色
					// setScalar：将颜色设置为灰度值（0.1-1.0之间，避免太暗）
					mesh.setColorAt( i, color.setScalar( 0.1 + 0.9 * Math.random() ) );

				}

				return mesh;

			}

			/**
			 * 特效场景类
			 * 封装一个完整的3D场景，包含相机、灯光、几何体和动画逻辑
			 * 
			 * @param {THREE.BufferGeometry} geometry - 场景中使用的几何体
			 * @param {THREE.Vector3} rotationSpeed - 旋转速度向量（x, y, z轴的速度）
			 * @param {number|string} backgroundColor - 场景背景颜色
			 * 
			 * 这个类创建一个独立的3D场景，包含：
			 * 1. 透视相机
			 * 2. 场景背景
			 * 3. 环境光和方向光
			 * 4. 实例化网格
			 * 5. 更新和调整大小的方法
			 */
			function FXScene( geometry, rotationSpeed, backgroundColor ) {

				// 创建透视相机
				// 参数：
				// 50：视野角度（Field of View, FOV），单位度
				// window.innerWidth / window.innerHeight：宽高比
				// 0.1：近裁剪面距离
				// 100：远裁剪面距离
				const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
				// 设置相机位置：沿Z轴向后移动20个单位
				camera.position.z = 20;

				// 创建场景对象
				// Scene是Three.js中所有3D对象的容器
				const scene = new THREE.Scene();
				// 设置场景背景颜色
				scene.background = new THREE.Color( backgroundColor );
				// 添加环境光：提供均匀的基础照明
				// 参数：颜色，强度
				scene.add( new THREE.AmbientLight( 0xaaaaaa, 3 ) );

				// 添加方向光：模拟太阳光，有明确的方向
				const light = new THREE.DirectionalLight( 0xffffff, 3 );
				// 设置光源位置
				light.position.set( 0, 1, 4 );
				scene.add( light );

				// 保存旋转速度供后续使用
				this.rotationSpeed = rotationSpeed;

				// 根据几何体类型选择颜色
				// 盒子几何体使用蓝色（0x0000ff）
				// 二十面体使用红色（0xff0000）
				const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
				
				// 创建Phong节点材质
				// MeshPhongNodeMaterial是基于节点的Phong材质，支持TSL
				// Phong材质支持镜面高光，适合表现塑料、金属等光滑表面
				// flatShading: true 使用平面着色（每个面单一颜色，无平滑过渡）
				const material = new THREE.MeshPhongNodeMaterial( { color: color, flatShading: true } );
				
				// 生成实例化网格
				// 500个实例，每个实例有随机的位置、旋转、缩放和颜色
				const mesh = generateInstancedMesh( geometry, material, 500 );
				// 将网格添加到场景中
				scene.add( mesh );

				// 将场景相关对象保存为类的属性
				// 方便外部访问和操作
				this.scene = scene;
				this.camera = camera;
				this.mesh = mesh;

				/**
				 * 更新场景动画
				 * 根据时间增量（delta time）更新网格的旋转
				 * 使用delta time可以确保动画速度与帧率无关
				 * 
				 * @param {number} delta - 时间增量（距离上一帧的时间，单位秒）
				 */
				this.update = function ( delta ) {

					// 只有当animateScene为true时才更新动画
					if ( effectController.animateScene ) {

						// 根据旋转速度和delta time更新网格的旋转
						// 乘法确保动画速度与时间成正比，与帧率无关
						mesh.rotation.x += this.rotationSpeed.x * delta;
						mesh.rotation.y += this.rotationSpeed.y * delta;
						mesh.rotation.z += this.rotationSpeed.z * delta;

					}

				};

				/**
				 * 响应窗口大小变化
				 * 当窗口大小改变时，调整相机的宽高比并更新投影矩阵
				 */
				this.resize = function () {

					// 更新相机的宽高比
					camera.aspect = window.innerWidth / window.innerHeight;
					// 更新相机的投影矩阵
					// 必须调用此方法使宽高比更改生效
					camera.updateProjectionMatrix();

				};

			}

			// ============================================
			// 创建特效场景实例
			// ============================================
			
			/**
			 * 场景A：蓝色立方体场景
			 * - 使用立方体（BoxGeometry）作为基础几何体
			 * - 旋转速度：Y轴负方向旋转（0, -0.4, 0）
			 * - 背景颜色：白色（0xffffff）
			 */
			const fxSceneA = new FXScene( 
				new THREE.BoxGeometry( 2, 2, 2 ),  // 2x2x2的立方体
				new THREE.Vector3( 0, - 0.4, 0 ),  // 旋转速度向量
				0xffffff  // 白色背景
			);
			
			/**
			 * 场景B：红色二十面体场景
			 * - 使用二十面体（IcosahedronGeometry）作为基础几何体
			 * - 细分级别：1（生成更平滑的球体）
			 * - 旋转速度：Y轴和Z轴正方向旋转（0, 0.2, 0.1）
			 * - 背景颜色：黑色（0x000000）
			 */
			const fxSceneB = new FXScene( 
				new THREE.IcosahedronGeometry( 1, 1 ),  // 半径1，细分级别1
				new THREE.Vector3( 0, 0.2, 0.1 ),  // 旋转速度向量
				0x000000  // 黑色背景
			);

			/**
			 * 初始化函数
			 * 这是整个应用的入口点，设置所有必要的组件
			 */
			function init() {

				// ============================================
				// 1. 初始化纹理
				// ============================================
				
				// 创建纹理加载器
				const loader = new THREE.TextureLoader();

				// 加载6个过渡纹理
				// 这些纹理定义了场景过渡的方式（如溶解、擦除等效果）
				// 文件名格式：transition1.png 到 transition6.png
				for ( let i = 0; i < 6; i ++ ) {

					textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );

				}

				// ============================================
				// 2. 初始化渲染器
				// ============================================
				
				// 创建WebGPU渲染器
				// 参数：{ antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 附加调试检查器
				// 允许用户查看和修改场景中的对象
				renderer.inspector = new Inspector();
				
				// 设置设备像素比
				// 这确保了在高DPI显示器（如Retina显示屏）上正确渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的DOM元素（canvas）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ============================================
				// 3. 初始化后处理
				// ============================================
				
				// 创建后处理对象
				// 后处理允许在最终渲染之前对图像应用各种效果
				postProcessing = new THREE.PostProcessing( renderer );

				// ============================================
				// 4. 创建渲染通道和过渡效果
				// ============================================
				
				// 为每个场景创建渲染通道
				// pass()函数创建一个渲染通道，包含场景和相机
				const scenePassA = pass( fxSceneA.scene, fxSceneA.camera );
				const scenePassB = pass( fxSceneB.scene, fxSceneB.camera );

				// 创建过渡通道
				// transition()函数创建一个过渡节点，混合两个场景
				// 参数：
				// 1. scenePassA：场景A的渲染通道
				// 2. scenePassB：场景B的渲染通道
				// 3. 混合纹理：定义过渡图案的纹理
				// 4. 过渡值：控制过渡进度的uniform变量（0-1）
				// 5. 阈值：控制过渡边界的清晰度
				// 6. 是否使用纹理：控制是否使用纹理进行过渡
				transitionPass = transition( 
					scenePassA, 
					scenePassB, 
					new THREE.TextureNode( textures[ effectController.texture ] ), 
					effectController._transition, 
					effectController.threshold, 
					effectController._useTexture 
				);

				// 设置后处理的输出节点为过渡通道
				// 这意味着后处理管线最终输出过渡效果
				postProcessing.outputNode = transitionPass;

				// ============================================
				// 5. 创建GUI控制面板
				// ============================================
				
				// 使用调试检查器创建参数面板
				const gui = renderer.inspector.createParameters( '设置' );

				// 添加场景动画控制开关
				gui.add( effectController, 'animateScene' ).name( '启用场景动画' );
				// 添加过渡动画控制开关
				gui.add( effectController, 'animateTransition' ).name( '启用过渡动画' );
				
				// 添加过渡值滑块控制
				// 参数：对象，属性名，最小值，最大值，步进值
				transitionController = gui.add( effectController, 'transition', 0, 1, 0.01 )
					.name( '过渡进度' )  // 显示名称
					.onChange( () => {
						// 当滑块值改变时，更新对应的uniform变量
						effectController._transition.value = effectController.transition;
					} );
				
				// 添加是否使用纹理的复选框
				gui.add( effectController, 'useTexture' )
					.name( '使用过渡纹理' )
					.onChange( () => {
						// 将布尔值转换为1或0（着色器中通常使用浮点数）
						const value = effectController.useTexture ? 1 : 0;
						effectController._useTexture.value = value;
					} );
				
				// 添加纹理选择下拉菜单
				// 对象键为显示文本，值为对应的纹理索引
				gui.add( effectController, 'texture', { 
					'柏林噪声': 0, 
					'方块图案': 1, 
					'细胞图案': 2, 
					'扭曲效果': 3, 
					'渐变过渡': 4, 
					'径向过渡': 5 
				} ).name( '过渡纹理类型' );
				
				// 添加循环切换纹理的复选框
				gui.add( effectController, 'cycle' ).name( '循环切换纹理' );
				
				// 添加阈值控制滑块
				gui.add( effectController.threshold, 'value', 0, 1, 0.01 )
					.name( '过渡阈值' )
					.onChange( () => {
						// 注意：threshold已经是uniform对象，直接修改其value属性即可
						// uniform会自动更新到着色器中
					} );

			}

			// ============================================
			// 窗口事件监听器
			// ============================================
			
			// 监听窗口大小变化事件
			// 当用户调整浏览器窗口大小时触发
			window.addEventListener( 'resize', onWindowResize );

			/**
			 * 窗口大小变化处理函数
			 * 当窗口大小改变时，需要更新相机和渲染器
			 */
			function onWindowResize() {

				// 更新两个场景的相机宽高比
				fxSceneA.resize();
				fxSceneB.resize();
				// 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ============================================
			// 创建自动过渡动画
			// ============================================
			
			/**
			 * 使用TWEEN.js创建循环过渡动画
			 * 这个动画会自动在两个场景之间切换
			 */
			new TWEEN.Tween( effectController )
				// 目标值：将transition属性从当前值动画到1
				// 持续时间：1500毫秒（1.5秒）
				.to( { transition: 1 }, 1500 )
				// 动画更新回调函数
				// 在每一帧动画更新时调用
				.onUpdate( function ( ) {

					// 更新GUI中滑块的值，使其与动画同步
					transitionController.setValue( effectController.transition );

					// 如果启用了循环切换纹理
					if ( effectController.cycle ) {

						// 当过渡值达到0或1时（过渡开始或结束）
						if ( effectController.transition == 0 || effectController.transition == 1 ) {

							// 切换到下一个纹理，使用模运算确保循环
							effectController.texture = ( effectController.texture + 1 ) % textures.length;

						}

					}

				} )
				// 无限重复动画
				.repeat( Infinity )
				// 每次循环之间延迟2000毫秒（2秒）
				// 这样场景会在完全显示后停留一会儿
				.delay( 2000 )
				// 启用往返动画
				// 动画会先前进（0->1），然后后退（1->0）
				.yoyo( true )
				// 开始动画
				.start();

			/**
			 * 动画循环函数
			 * 这是Three.js的主循环，每帧调用一次
			 * 负责更新所有动画和渲染场景
			 */
			function animate() {

				// 如果启用了过渡动画，更新TWEEN动画
				if ( effectController.animateTransition ) TWEEN.update();

				// 更新当前使用的混合纹理
				// 检查纹理是否存在，避免访问undefined
				if ( textures[ effectController.texture ] ) {

					// 获取当前选中的纹理
					const mixTexture = textures[ effectController.texture ];
					// 更新过渡通道中的纹理节点值
					transitionPass.mixTextureNode.value = mixTexture;

				}

				// 获取时间增量（delta time）
				// delta time是距离上一帧的时间（秒）
				// 使用delta time可以确保动画速度与帧率无关
				const delta = clock.getDelta();
				
				// 更新两个场景的动画
				fxSceneA.update( delta );
				fxSceneB.update( delta );

				// 渲染当前帧
				render();

			}

			/**
			 * 渲染函数
			 * 根据当前的过渡值，智能选择渲染方式
			 * 优化性能：当完全显示某个场景时，直接渲染，不使用后处理
			 */
			function render() {

				// 情况1：过渡值为0（完全显示场景B）
				// 此时不需要后处理，直接渲染场景B
				if ( effectController.transition === 0 ) {

					renderer.render( fxSceneB.scene, fxSceneB.camera );

				} 
				// 情况2：过渡值为1（完全显示场景A）
				// 此时不需要后处理，直接渲染场景A
				else if ( effectController.transition === 1 ) {

					renderer.render( fxSceneA.scene, fxSceneA.camera );

				} 
				// 情况3：过渡值在0和1之间（正在过渡中）
				// 此时需要使用后处理进行混合渲染
				else {

					// 后处理渲染会自动应用过渡效果
					postProcessing.render();

				}

			}

			// ============================================
			// 程序入口：调用初始化函数
			// ============================================
			
			// 初始化整个应用
			// 这个调用会触发所有组件的创建和设置
			init();

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