<!-- Three.js WebGPU 时空传送门示例 - 代码功能与技术点详解
🎯 核心功能概述
这是一个基于Three.js WebGPU版本的交互式3D传送门效果演示。程序创建了两个平行的3D世界，通过一个中心传送门连接。用户可以实时观察到：

主世界：包含正常渲染的角色模型和环境

平行世界：通过传送门看到的特效版本世界

动态交互：使用鼠标控制视角，实时观察不同角度的传送门效果

🏗️ 系统架构设计
1. 双场景并行渲染系统
javascript
// 架构示意图：
主场景 (sceneMain)
├── 正常角色模型
├── 渐变背景
├── 传送门平面 (渲染门户场景内容)
└── 环境灯光

门户场景 (scenePortal)
├── 特效角色模型 (线框+动态着色)
├── 噪声动态背景
└── 独立光照系统
2. 渲染流程


🔧 主要技术点详解
1. WebGPU渲染引擎
技术特点：使用新一代图形API，替代传统的WebGL

优势：

更接近底层硬件，性能更高

更好的多线程支持

更现代的着色器语言（WGSL）

实现：THREE.WebGPURenderer

2. TSL着色器系统
全称：Three.js Shading Language

特点：节点化着色器编程，可视化编辑

核心节点应用：

节点函数	功能	应用场景
pass()	渲染到纹理	门户场景渲染
mx_worley_noise_float()	Worley噪声生成	门户背景
mx_fractal_noise_vec3()	分形噪声生成	角色动态着色
screenUV	屏幕UV坐标	纹理映射
time	时间变量	动画驱动
3. 传送门效果实现原理
javascript
// 核心代码逻辑
const material = new THREE.MeshBasicNodeMaterial();
material.colorNode = pass(scenePortal, camera)  // 1. 渲染门户场景到纹理
    .context({ getUV: () => screenUV });        // 2. 使用屏幕UV映射

material.opacityNode = uv()                     // 3. 创建边缘渐变透明
    .distance(.5)
    .remapClamp(.3, .5)
    .oneMinus();
实现步骤：

离屏渲染：将门户场景渲染到纹理缓冲区

纹理映射：将渲染结果作为传送门平面的纹理

透明度遮罩：创建中心不透明、边缘透明的渐变效果

实时更新：每帧重新渲染门户场景，实现动态效果

4. 动态噪声系统
Worley噪声（细胞噪声）：

javascript
// 生成门户背景的细胞状图案
mx_worley_noise_float(normalWorld.mul(20).add(vec2(0, time.oneMinus())))
特点：产生类似细胞、石块的自然图案

应用：门户场景的动态背景

分形噪声（Fractal Noise）：

javascript
// 生成角色的动态着色
mx_fractal_noise_vec3(uv().mul(20).add(time))
特点：多层级叠加的复杂有机图案

应用：门户世界角色的线框着色

5. 模型加载与动画系统
GLTF格式：业界标准的3D模型交换格式

动画混合器：

javascript
const mixer = new THREE.AnimationMixer(object);
const action = mixer.clipAction(animations[6]);
action.play();
模型实例化策略：

主世界：原始模型

平行世界：克隆模型 + 材质替换 + 线框模式

6. 交互控制系统
OrbitControls三轴控制：

左键拖动：旋转视角

右键拖动：平移视角

滚轮滚动：缩放视图

响应式设计：

javascript
window.addEventListener('resize', onWindowResize);
// 自动适配窗口大小变化
7. 高级图形技术
色调映射（Tone Mapping）：

javascript
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 0.15;
作用：将HDR颜色转换到显示器的显示范围

效果：控制整体场景的亮度和对比度

抗锯齿（Antialiasing）：

javascript
new THREE.WebGPURenderer({ antialias: true });
消除几何边缘的锯齿状走样

8. 开发调试工具
Inspector调试器：

实时查看场景图结构

修改材质、灯光参数

性能监控和分析

按F12或右键点击场景即可打开

🎨 视觉特效分析
1. 背景效果对比
场景	技术实现	视觉效果
主世界	法线方向渐变混合	静态的蓝-粉垂直渐变
平行世界	Worley噪声 + 时间动画	动态的细胞状流动图案
2. 角色渲染对比
场景	材质	着色	特殊效果
主世界角色	原始PBR材质	正常光照计算	标准渲染
平行世界角色	线框材质	分形噪声动态着色	科幻感特效
3. 传送门边缘效果
渐变透明：中心完全不透明，边缘完全透明

平滑过渡：使用remapClamp确保平滑的透明度变化

视觉提示：明确区分传送门内外区域

⚡ 性能优化策略
1. 渲染优化
复用光源：克隆光源对象，避免重复计算

材质克隆：只修改需要特效的部分

离屏渲染：门户场景只在需要时渲染

2. 内存管理
模型复用：通过克隆共享几何数据

纹理管理：自动释放不需要的渲染目标

动画共享：多个实例共享动画数据

3. 实时性能
时间基准动画：使用delta时间确保帧率无关

按需更新：只在可见时更新门户场景

GPU优化：利用WebGPU的并行计算能力

🔍 技术亮点总结
跨世界渲染技术：实现真正的"画中画"3D效果

实时着色器编程：全动态的GPU着色效果

高级噪声算法：创建复杂的自然图案

完整的交互系统：直观的3D导航控制

生产级质量：抗锯齿、色调映射、响应式设计

开发者友好：集成调试工具，易于扩展

🚀 扩展可能性
这个示例可以作为以下应用的基础：

游戏传送门系统：连接不同游戏关卡

VR/AR门户体验：沉浸式的空间穿梭

数据可视化：通过门户展示不同数据维度

艺术装置：动态的数字艺术展示

教育工具：展示平行宇宙概念的交互演示 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示示例名称和使用的技术 -->
		<title>Three.js WebGPU 示例 - 时空传送门效果</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="example.css">
	</head>
	<body>

		<!-- 信息展示面板：显示标题、描述和链接 -->
		<div id="info">
			<!-- Three.js官方网站链接，点击logo图标可以跳转 -->
			<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>
				这是一个基于WebGPU的传送门效果演示。<br>
				透过中心的传送门，您可以看到另一个平行世界的场景。<br>
				主世界显示正常角色模型，而传送门内的世界显示带有线框和动态着色特效的同一角色。<br>
				使用鼠标左键拖动可以旋转视角，右键拖动可以平移视角，滚轮可以缩放。
			</small>
			
			
		</div>

		<!-- 
			模块导入映射配置 (Import Maps)
			作用：告诉浏览器如何解析模块导入路径
			在现代JavaScript模块系统中，import语句需要知道从哪里加载模块
			这里配置了three.js相关模块的路径映射
		-->
		<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语法
			模块会在页面加载时自动执行
		-->
		<script type="module">
			// ============== 模块导入部分 ==============
			// 导入Three.js核心库的WebGPU版本（替代传统的WebGL版本）
			// * 表示导入所有导出内容，并命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入着色器节点函数：
			// - pass: 渲染通道节点，用于将场景渲染到纹理
			// - color: 颜色节点，创建颜色值
			// - mx_worley_noise_float: Worley噪声函数（生成细胞状图案）
			// - time: 时间节点，提供自程序启动以来的时间值
			// - screenUV: 屏幕UV坐标节点（0到1范围）
			// - vec2: 二维向量节点
			// - uv: UV坐标节点（纹理坐标）
			// - normalWorld: 世界空间法线向量节点
			// - mx_fractal_noise_vec3: 分形噪声函数（生成复杂的有机图案）
			import { 
				pass, color, mx_worley_noise_float, 
				time, screenUV, vec2, uv, normalWorld, 
				mx_fractal_noise_vec3 
			} from 'three/tsl';
			
			// 导入GLTF加载器，用于加载GLTF/GLB格式的3D模型
			// GLTF是3D模型的"JPEG"格式，广泛用于Web3D
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入轨道控制器，允许用户通过鼠标交互控制相机
			// 实现旋转、平移、缩放等操作
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入调试检查器，用于开发和调试
			// 可以查看场景结构、材质属性、性能信息等
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ============== 全局变量声明 ==============
			// 相机对象：定义观察者的位置、方向和视角
			let camera;
			// 主场景对象：包含所有主世界中的3D对象
			let sceneMain;
			// 门户场景对象：通过传送门看到的平行世界场景
			let scenePortal;
			// 渲染器对象：负责将3D场景绘制到2D画布上
			let renderer;
			// 时钟对象：用于精确的时间测量和动画控制
			let clock;
			
			// 动画混合器数组：管理所有模型的动画播放
			// 动画混合器负责控制动画的时间线和混合多个动画
			const mixers = [];

			// ============== 初始化调用 ==============
			// 程序入口：调用初始化函数设置所有内容
			init();

			/**
			 * 初始化函数 - 整个3D应用的设置和配置
			 * 这是程序的起点，负责创建场景、相机、灯光、模型、渲染器等所有必要组件
			 * 函数没有参数，也没有返回值
			 */
			function init() {
				// ============== 场景创建部分 ==============
				
				// 创建主场景（我们所在的世界）
				sceneMain = new THREE.Scene();
				// 设置主场景的静态背景颜色（深灰色）
				sceneMain.background = new THREE.Color( 0x222222 );
				// 使用TSL节点动态生成背景：
				// normalWorld.y获取法线向量的y分量（表示垂直方向）
				// .mix()混合两种颜色：蓝色(0x0066ff)和粉色(0xff0066)
				// 结果是背景颜色根据表面的朝向（法线）在蓝色和粉色之间渐变
				sceneMain.backgroundNode = normalWorld.y.mix( 
					color( 0x0066ff ),  // 顶部颜色（法线向上时为蓝色）
					color( 0xff0066 )   // 底部颜色（法线向下时为粉色）
				);

				// 创建门户场景（通过传送门看到的平行世界）
				scenePortal = new THREE.Scene();
				// 使用Worley噪声生成动态的细胞状背景图案：
				// 1. normalWorld.mul(20) - 将法线坐标放大20倍，增加噪声细节
				// 2. .add(vec2(0, time.oneMinus())) - 添加随时间变化的时间偏移
				// 3. mx_worley_noise_float() - 生成Worley噪声值（0-1范围）
				// 4. .mul(color(0x0066ff)) - 将噪声值与蓝色相乘，创建蓝色调变化
				scenePortal.backgroundNode = mx_worley_noise_float( 
					normalWorld.mul( 20 )                          // 缩放法线坐标
					.add( vec2( 0, time.oneMinus() ) )            // 添加时间动画
				).mul( color( 0x0066ff ) );                       // 应用蓝色调
				// 为场景设置一个描述性名称，便于在调试器中识别
				scenePortal.name = '传送门场景 - 平行世界';

				// ============== 相机设置部分 ==============
				
				// 创建透视投影相机：
				// 参数1: 50 - 垂直视角（视野角度），单位是度
				// 参数2: window.innerWidth / window.innerHeight - 纵横比（宽度除以高度）
				// 参数3: 0.01 - 近裁剪面距离（相机能看到的最小距离）
				// 参数4: 30 - 远裁剪面距离（相机能看到的最近距离）
				// 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				camera = new THREE.PerspectiveCamera( 
					50,                                   // 视野角度
					window.innerWidth / window.innerHeight, // 纵横比
					0.01,                                 // 近平面
					30                                    // 远平面
				);
				
				// 设置相机的初始位置：
				// x=2.5（右侧），y=1（高于地面），z=3（朝向屏幕内部）
				camera.position.set( 2.5, 1, 3 );
				// 将位置乘以0.8，稍微拉近相机，让初始视图更紧凑
				camera.position.multiplyScalar( .8 );
				// 设置相机的观察目标：场景中心点上方1单位的位置
				// 这决定了相机的朝向
				camera.lookAt( 0, 1, 0 );

				// 初始化时钟对象，用于测量时间间隔
				// 在动画循环中计算帧之间的时间差
				clock = new THREE.Clock();

				// ============== 灯光设置部分 ==============
				
				// 创建点光源：
				// 参数1: 0xffffff - 光源颜色（白色）
				// 参数2: 1 - 光源强度
				// 点光源从单一位置向所有方向均匀发射光线，类似灯泡
				const light = new THREE.PointLight( 0xffffff, 1 );
				// 设置点光源位置：场景中心上方，稍微靠前
				light.position.set( 0, 1, 5 );
				// 设置光源功率（流明），影响光照强度
				light.power = 17000;

				// 为主场景添加半球光：
				// 参数1: 0xff0066 - 天空颜色（粉色）
				// 参数2: 0x0066ff - 地面颜色（蓝色）
				// 参数3: 7 - 光照强度
				// 半球光模拟白天的环境光，天空和地面的颜色会相互影响
				sceneMain.add( new THREE.HemisphereLight( 0xff0066, 0x0066ff, 7 ) );
				// 将点光源添加到主场景
				sceneMain.add( light );
				// 克隆点光源并添加到门户场景
				// .clone()创建光源的副本，两个场景共享相同的光照设置
				scenePortal.add( light.clone() );

				// ============== 3D模型加载部分 ==============
				
				// 创建GLTF加载器实例
				// GLTF是标准的3D模型传输格式，支持几何体、材质、动画等
				const loader = new GLTFLoader();
				
				// 加载Xbot角色模型：
				// 参数1: 'models/gltf/Xbot.glb' - 模型文件路径（GLB是GLTF的二进制版本）
				// 参数2: function ( gltf ) - 加载完成后的回调函数
				// gltf参数包含加载的模型数据
				loader.load( 'models/gltf/Xbot.glb', function ( gltf ) {
					
					/**
					 * 创建模型实例的内部函数
					 * 根据参数决定创建原始模型还是特效模型
					 * 
					 * @param {TSLNode|null} colorNode - 可选的TSL颜色节点
					 *                          如果提供，将替换模型的原始材质颜色
					 *                          如果为null，使用原始材质
					 * @returns {THREE.Object3D} 创建好的3D模型对象
					 */
					const createModel = ( colorNode = null ) => {
						// 声明模型对象变量
						let object;
			
						// 判断是否是第一个创建的模型（主场景模型）
						if ( mixers.length === 0 ) {
							// 第一个模型：直接使用加载的原始模型
							object = gltf.scene;
						} else {
							// 后续模型（门户场景）：克隆原始模型
							// 克隆可以创建独立的实例，避免修改影响原始模型
							object = gltf.scene.clone();
							
							// 获取克隆模型的子对象
							// Xbot模型结构：根对象 > 包含多个网格子对象
							// children[0]通常是模型的根容器
							// children[0].children包含实际的网格对象（身体各部分）
							const children = object.children[ 0 ].children;

							/**
							 * 应用特效到指定索引的网格子对象
							 * 将材质替换为带特效的TSL材质
							 * 
							 * @param {number} index - 子对象数组中的索引
							 */
							const applyFX = ( index ) => {
								// 克隆原始材质，避免修改影响其他模型实例
								children[ index ].material = children[ index ].material.clone();
								
								// 设置材质的颜色节点
								// 如果提供了colorNode，使用它作为颜色源
								// 否则保持原始颜色
								if (colorNode) {
									children[ index ].material.colorNode = colorNode;
								}
								
								// 启用线框模式：只显示模型的网格线框
								// 这在门户场景中创建特殊的视觉效果
								children[ index ].material.wireframe = true;
							};

							// 为门户场景模型的两个主要部分应用特效
							// 通常索引0和1对应Xbot的身体和服装
							applyFX( 0 ); // 第一个网格子对象
							applyFX( 1 ); // 第二个网格子对象
						}

						// 创建动画混合器
						// 动画混合器控制模型的动画时间线和混合
						// 每个模型实例需要自己的混合器
						const mixer = new THREE.AnimationMixer( object );

						// 获取并播放模型的第7个动画剪辑（索引6）
						// gltf.animations包含模型的所有动画数据
						// 这里选择索引6的动画（具体是什么动画取决于模型文件）
						const action = mixer.clipAction( gltf.animations[ 6 ] );
						// 开始播放动画
						action.play();

						// 将混合器添加到全局数组，以便在动画循环中更新
						mixers.push( mixer );

						// 返回创建好的模型对象
						return object;
					};

					// 为门户场景模型创建动态颜色节点：
					// 使用分形噪声生成随时间变化的颜色图案
					// 1. uv() - 获取模型的UV坐标（纹理坐标，0-1范围）
					// 2. .mul(20) - 将UV坐标放大20倍，增加噪声细节
					// 3. .add(time) - 添加时间变量，使噪声图案随时间变化
					// 4. mx_fractal_noise_vec3() - 生成三维分形噪声
					// 结果是随时间流动的复杂颜色图案
					const colorNode = mx_fractal_noise_vec3( 
						uv().mul( 20 )    // 缩放UV坐标
						.add( time )      // 添加时间动画
					);

					// 创建两个模型实例：
					// 1. 主场景模型 - 使用原始材质
					const modelMain = createModel();
					// 2. 门户场景模型 - 使用分形噪声颜色节点
					const modelPortal = createModel( colorNode );

					// 将模型添加到对应的场景：
					// 主场景添加原始模型
					sceneMain.add( modelMain );
					// 门户场景添加特效模型
					scenePortal.add( modelPortal );
				} );

				// ============== 传送门平面创建部分 ==============
				
				// 创建平面几何体作为传送门：
				// 参数1: 1.7 - 平面宽度
				// 参数2: 2 - 平面高度
				// 平面默认在XY平面创建，法线指向Z轴正方向
				const geometry = new THREE.PlaneGeometry( 1.7, 2 );

				// 创建传送门的材质（使用MeshBasicNodeMaterial支持TSL节点）：
				// MeshBasicNodeMaterial是基础材质，不受光照影响，直接显示颜色
				const material = new THREE.MeshBasicNodeMaterial();
				
				// 设置材质的颜色节点：
				// 使用pass节点将门户场景渲染到这个材质上
				// pass(scenePortal, camera) - 创建渲染通道，渲染指定的场景和相机
				// .context({ getUV: () => screenUV }) - 指定使用屏幕UV坐标
				// 这意味着材质将显示scenePortal的渲染结果，就像看窗口一样
				material.colorNode = pass( scenePortal, camera )
					.context( { 
						getUV: () => screenUV  // 使用屏幕空间UV坐标
					} );
				
				// 设置材质的透明度节点：
				// 创建边缘透明的效果，传送门中心不透明，边缘渐变透明
				// 1. uv() - 获取平面的UV坐标（中心为(0.5, 0.5)）
				// 2. .distance(.5) - 计算每个点到中心点(0.5,0.5)的距离
				// 3. .remapClamp(.3, .5) - 将距离从[0.3,0.5]范围重新映射到[0,1]范围
				//    .3以下映射到0，.5以上映射到1，中间线性插值
				// 4. .oneMinus() - 取反：中心为1，边缘为0
				material.opacityNode = uv()
					.distance( .5 )           // 计算到中心的距离
					.remapClamp( .3, .5 )    // 重新映射距离范围
					.oneMinus();              // 反转透明度（中心不透明，边缘透明）
				
				// 设置材质为双面渲染：
				// 默认只渲染正面（法线指向相机的面）
				// 双面渲染确保从任何角度都能看到传送门
				material.side = THREE.DoubleSide;
				// 启用透明度：
				// 允许材质有透明部分，与opacityNode配合使用
				material.transparent = true;

				// 创建传送门平面网格：
				// 网格是Three.js中可渲染对象的基本单位，包含几何体和材质
				const plane = new THREE.Mesh( geometry, material );
				// 设置传送门位置：
				// x=0（场景中心），y=1（离地面1单位高度），z=0.8（稍微在角色前面）
				plane.position.set( 0, 1, .8 );
				// 将传送门添加到主场景
				sceneMain.add( plane );

				// ============== 渲染器设置部分 ==============
				
				// 创建WebGPU渲染器：
				// WebGPU是新一代图形API，相比WebGL有更好的性能和更现代的API设计
				// { antialias: true } - 启用抗锯齿，平滑边缘锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置渲染器的像素比：
				// 使用设备的像素比，在高DPI屏幕（如Retina屏幕）上渲染更高分辨率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数：
				// animate函数会在每一帧被调用
				// 这是Three.js的渲染循环，替代传统的requestAnimationFrame
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射：
				// 色调映射将HDR（高动态范围）颜色转换为显示器的LDR（低动态范围）
				// LinearToneMapping是线性色调映射，保持颜色线性关系
				renderer.toneMapping = THREE.LinearToneMapping;
				
				// 设置色调映射的曝光度：
				// 0.15是较低的曝光值，使场景看起来较暗，增加神秘感
				renderer.toneMappingExposure = 0.15;
				
				// 初始化调试检查器：
				// 允许在运行时检查和修改场景、材质、光照等属性
				// 按F12或右键点击场景可以打开检查器
				renderer.inspector = new Inspector();
				
				// 将渲染器的画布DOM元素添加到页面body中
				// renderer.domElement是<canvas>元素，所有3D内容都绘制在上面
				document.body.appendChild( renderer.domElement );

				// ============== 用户交互控制部分 ==============
				
				// 创建轨道控制器：
				// 参数1: camera - 要控制的相机对象
				// 参数2: renderer.domElement - 事件监听的DOM元素（canvas）
				// 轨道控制器允许用户通过鼠标交互控制相机
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置控制器的目标点（围绕旋转的中心点）
				// 这里设置为场景中心上方，与相机lookAt目标一致
				controls.target.set( 0, 1, 0 );
				
				// 更新控制器内部状态
				// 必须在更改相机或目标后调用
				controls.update();

				// ============== 事件监听器设置 ==============
				
				// 监听窗口大小变化事件：
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				// 确保3D场景始终正确适应窗口尺寸
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时调用，确保3D场景正确适应新尺寸
			 * 
			 * 这个函数没有参数，也没有返回值
			 */
			function onWindowResize() {
				// 更新相机的纵横比：
				// 相机需要知道渲染区域的宽高比，以正确计算透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵：
				// 当相机的属性（如纵横比）改变后，必须更新投影矩阵
				// 投影矩阵定义了3D空间到2D屏幕的映射方式
				camera.updateProjectionMatrix();

				// 更新渲染器的尺寸：
				// 将渲染器的画布大小设置为新的窗口尺寸
				// 这确保3D内容填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数 - 每一帧都会调用
			 * 这是Three.js渲染循环的核心，负责更新动画和渲染场景
			 * 
			 * 这个函数没有参数，也没有返回值
			 */
			function animate() {
				// 获取上一帧到当前帧的时间差（以秒为单位）：
				// clock.getDelta()返回自上次调用getDelta()以来经过的时间
				// 用于确保动画速度与时间相关，而不是与帧率相关
				const delta = clock.getDelta();

				// 更新所有动画混合器：
				// 遍历mixers数组中的每个动画混合器
				// mixer.update(delta)根据时间差更新动画状态
				for ( const mixer of mixers ) {
					mixer.update( delta );
				}

				// 渲染主场景：
				// 将sceneMain通过camera的视角渲染到画布上
				// 这是每一帧的主要渲染调用
				// 注意：portal场景通过材质的pass节点间接渲染
				renderer.render( sceneMain, camera );
			}
		</script>
	</body>
</html>