<!-- 代码功能和技术点分析
一、核心功能概述
1. 主要功能
这是一个基于Three.js WebGPU渲染器实现的色差特效(Chromatic Aberration) 交互式3D演示。色差效果模拟相机镜头的光学缺陷，将RGB颜色通道在不同位置渲染，产生彩色边缘的视觉效果。

2. 交互体验
3D场景探索：用户可以通过鼠标拖拽旋转视角，滚轮缩放

实时参数调整：通过右侧GUI面板可实时调整色差参数

动态场景：包含自动旋转的3D物体和粒子系统

效果切换：可随时启用/禁用色差效果对比

3. 视觉展示
中央展示区：大型旋转圆环 + 6个内环旋转物体

外围环状区：12个几何体组成的动态环

背景粒子：200个随机分布的星空粒子

参考网格：辅助空间定位的网格平面

二、主要技术架构
1. 渲染引擎
javascript
// 核心渲染技术栈
Three.js WebGPU Renderer + TSL Shader Language + PostProcessing Pipeline
WebGPU渲染器：下一代图形API，相比WebGL性能更好，功能更强大

TSL着色器语言：Three.js的声明式着色器编程语言

后期处理管道：非破坏性特效应用架构

2. 核心技术点
2.1 WebGPU集成
javascript
// 关键实现
const renderer = new THREE.WebGPURenderer({ antialias: true });
await renderer.init(); // 异步初始化
异步初始化：WebGPU需要等待GPU设备就绪

自动抗锯齿：通过硬件加速实现边缘平滑

现代API特性：支持计算着色器、存储缓冲区等高级功能

2.2 色差特效实现
javascript
// 色差核心节点
const caPass = chromaticAberration(outputPass, strength, center, scale);
着色器节点系统：使用TSL构建可组合的着色器图

RGB通道分离：通过偏移三个颜色通道产生彩色边缘

径向强度衰减：色差效果从中心向外逐渐增强

2.3 物理渲染(PBR)
javascript
// PBR材质配置
new THREE.MeshStandardMaterial({
    roughness: 0.2,    // 表面粗糙度
    metalness: 0.8,    // 金属质感
    color: 0xff0000    // 基础色
});
环境光照：使用HDR环境贴图提供真实光照

物理材质：模拟真实世界的材质光学属性

阴影系统：动态阴影投射和接收

2.4 动画系统
javascript
// 基于时间的动画
const time = clock.getElapsedTime();
mesh.rotation.y = time * 0.5; // 随时间旋转
时钟驱动：使用Clock确保动画速度与时间一致

三角函数动画：使用sin/cos产生平滑周期运动

层级动画：父子关系的相对运动

2.5 粒子系统
javascript
// 高效粒子实现
const particles = new THREE.Points(geometry, material);
BufferGeometry：使用类型化数组高效存储顶点数据

球面分布算法：将粒子随机分布在球体表面

性能优化：单次绘制调用渲染所有粒子

2.6 模块化架构
javascript
// ES6模块系统
import * as THREE from 'three/webgpu';
import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';
按需导入：只导入需要的模块，减小打包体积

importmap配置：浏览器原生模块别名系统

代码分离：清晰的模块边界和职责划分

2.7 响应式设计
javascript
// 窗口大小自适应
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应相机：根据窗口比例调整视野

动态分辨率：匹配设备像素比

完整视口：始终填充整个浏览器窗口

三、技术亮点
1. 现代图形技术栈
WebGPU：浏览器下一代图形API，支持更高效的GPU编程

TSL节点系统：可视化着色器编程范式

物理渲染管道：基于物理的光照和材质模型

2. 性能优化策略
实例化渲染：大量相似物体的高效渲染

批量绘制：粒子系统单次绘制调用

智能更新：只在必要时重新编译着色器

3. 用户体验设计
渐进式加载：异步初始化避免界面卡顿

实时反馈：所有参数调整立即生效

直观控制：自然的3D导航和参数调节

4. 可维护性设计
配置驱动：所有效果参数集中管理

模块化结构：清晰的代码组织和职责分离

详细调试：内置Inspector工具实时调试

四、技术难点与解决方案
1. WebGPU兼容性
挑战：WebGPU是新兴标准，浏览器支持有限

解决方案：提供优雅降级机制，检测浏览器支持

2. 着色器性能
挑战：实时色差计算需要高效着色器

解决方案：使用预编译的着色器节点，优化纹理采样

3. 内存管理
挑战：3D场景需要大量GPU内存

解决方案：使用BufferGeometry减少内存占用，及时释放资源

4. 动画同步
挑战：多个独立动画的时间同步

解决方案：基于全局时钟的统一时间系统

五、扩展可能性
1. 技术扩展
更多后期特效：添加辉光、景深、运动模糊等

交互增强：VR/AR支持，手势控制

动态加载：按需加载3D模型和纹理

2. 应用场景
产品展示：3D产品可视化与特效展示

艺术创作：交互式数字艺术装置

教育演示：光学原理和图形学教学

3. 性能优化
Web Worker：将计算密集型任务移出主线程

Level of Detail：根据距离动态调整模型细节

缓存策略：预计算和重用着色器编译结果 -->


<!DOCTYPE html>
<!-- 
  这是一个使用 three.js WebGPU 渲染器实现的色差(Chromatic Aberration)特效示例
  色差是一种模拟相机镜头缺陷的光学效果，将不同颜色的光分离，产生彩色边缘
-->
<html lang="zh-CN">
	<head>
		<!-- 
		  页面元数据设置
		  title: 页面标题，显示在浏览器标签页上
		  meta charset: 字符编码设置为UTF-8，支持中文
		  meta viewport: 移动端适配，禁止用户缩放，确保3D渲染区域正确显示
		-->
		<title>Three.js WebGPU 渲染器 - 色差特效演示</title>
		<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>
		<!-- 
		  页面顶部信息展示区域
		  id="info": 用于CSS样式选择器标识
		  这个区域展示项目信息和导航链接
		-->
		<div id="info">
			<!-- 
			  three.js官方网站链接
			  class="logo-link": CSS类名，可能用于设置logo背景图片
			  target="_blank": 在新标签页打开链接
			  rel="noopener": 安全设置，防止新页面通过window.opener访问原页面
			-->
			<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>色差效果展示：模拟相机镜头光学缺陷，将RGB颜色通道分离产生视觉特效</small>
		</div>

		<!-- 
		  importmap: 现代浏览器支持的模块导入映射
		  允许我们为模块定义别名，简化import语句
		  类似npm的别名配置，但直接在浏览器中运行
		-->
		<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版本
			// THREE变量将包含所有three.js的核心类和方法
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入特定的着色器节点函数
			// pass: 创建一个渲染通道节点
			// renderOutput: 创建渲染输出节点
			// uniform: 创建uniform变量节点，用于从CPU向GPU着色器传递数据
			import { pass, renderOutput, uniform } from 'three/tsl';

			// 导入three.js的附加组件
			// OrbitControls: 轨道控制器，允许用户用鼠标控制相机旋转和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// RoomEnvironment: 房间环境，提供预设的HDR环境贴图，用于物理渲染
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			// chromaticAberration: 色差特效节点函数，TSL着色器节点
			import { chromaticAberration } from 'three/addons/tsl/display/ChromaticAberrationNode.js';

			// Inspector: 调试检查器，提供GUI界面调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局参数配置对象 ==========
			// 这个对象存储所有可调整的效果参数
			// 这些参数可以通过GUI界面实时修改
			const params = {
				enabled: true,                    // 是否启用色差效果，开关控制
				animated: true,                   // 是否启用场景动画，控制所有物体的运动
				strength: 1.5,                    // 色差强度值，控制RGB通道分离的程度，值越大分离越明显
				center: new THREE.Vector2(0.5, 0.5), // 色差中心点，归一化坐标(0-1)，(0.5,0.5)表示屏幕中心
				scale: 1.2,                       // 缩放比例，影响色差的径向分布模式
				autoRotate: true,                 // 是否启用相机自动旋转，提供动态预览
				cameraDistance: 40                // 相机初始距离，控制视角远近
			};

			// ========== 全局变量声明 ==========
			// 这些变量将在多个函数中使用，因此声明在模块作用域
			let camera;       // 3D相机对象，定义观察视角
			let scene;        // 3D场景对象，包含所有要渲染的物体
			let renderer;     // WebGPU渲染器，负责将3D场景渲染到2D画布
			let clock;        // 时钟对象，用于精确的时间计算和动画控制
			let mainGroup;    // 主组对象，用于组织和管理所有3D物体

			let controls;      // 轨道控制器对象，处理用户输入
			let postProcessing; // 后期处理对象，管理渲染管道和特效应用

			// ========== 初始化函数调用 ==========
			// 程序入口点，开始初始化整个3D应用
			init();

			// ========== 异步初始化函数 ==========
			// async关键字表示这是一个异步函数，可以内部使用await
			// WebGPU渲染器的初始化是异步的，需要等待设备准备就绪
			async function init() {
				// ---------- 1. 创建WebGPU渲染器 ----------
				// 使用WebGPURenderer类创建渲染器实例
				// { antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				// 设置设备像素比，匹配屏幕的物理像素和CSS像素比例
				// 在高DPI屏幕(如Retina)上提高渲染分辨率
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数，每帧自动调用animate函数
				// 这是three.js动画系统的核心机制
				renderer.setAnimationLoop(animate);
				
				// 创建并附加调试检查器
				// Inspector提供可视化界面调整场景参数
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素(Canvas画布)添加到页面body中
				// 这样用户才能看到渲染结果
				document.body.appendChild(renderer.domElement);

				// 等待WebGPU渲染器初始化完成
				// WebGPU需要与GPU硬件通信，可能需要时间
				await renderer.init();

				// ---------- 2. 创建相机 ----------
				// 使用透视相机(PerspectiveCamera)，模拟人眼视角
				// 参数说明：
				// 45 - 视野角度(FOV)，单位度，值越小视角越窄，类似长焦镜头
				// window.innerWidth / window.innerHeight - 宽高比，匹配窗口比例
				// 0.1 - 近裁剪面，距离相机多近的物体开始渲染
				// 200 - 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera(
					45, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					200
				);
				
				// 设置相机初始位置
				// x=0: 中心水平位置
				// y=15: 离地面15个单位高度，提供俯视视角
				// z=40: 距离场景中心40个单位，控制整体可见范围
				camera.position.set(0, 15, params.cameraDistance);

				// ---------- 3. 创建轨道控制器 ----------
				// 将相机和渲染器的Canvas元素传递给控制器
				// 控制器会监听鼠标/触摸事件，更新相机位置
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 启用阻尼效果，使相机运动更平滑，有惯性感
				controls.enableDamping = true;
				
				// 阻尼系数，值越小惯性越大，运动越平滑
				controls.dampingFactor = 0.1;
				
				// 启用自动旋转，相机缓慢自转，方便展示
				controls.autoRotate = true;
				
				// 自动旋转速度，负值表示反向旋转
				controls.autoRotateSpeed = -0.1;
				
				// 设置控制器焦点位置，相机围绕此点旋转
				// (0, 0.5, 0) 表示场景中心略偏上的位置
				controls.target.set(0, 0.5, 0);
				
				// 初始化控制器，计算初始状态
				controls.update();

				// ---------- 4. 创建场景 ----------
				// Scene对象是所有3D对象的容器
				// 包含几何体、光源、相机等所有渲染元素
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 0x0a0a0a是十六进制颜色值，深灰色
				scene.background = new THREE.Color(0x0a0a0a);

				// ---------- 5. 设置环境光照 ----------
				// PMREM: Prefiltered, Mipmapped Radiance Environment Map
				// 预过滤、多级渐远的环境辐射贴图
				// 用于物理渲染(PBR)的环境光照计算
				const pmremGenerator = new THREE.PMREMGenerator(renderer);
				
				// 从RoomEnvironment场景生成环境贴图
				// RoomEnvironment是一个预设的室内HDR环境
				// 0.04是曝光值，控制环境亮度
				scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;

				// ---------- 6. 创建时钟对象 ----------
				// Clock用于精确的时间测量
				// 在animate函数中获取经过的时间，驱动动画
				clock = new THREE.Clock();

				// ---------- 7. 创建主组 ----------
				// Group对象用于组织多个3D对象
				// 可以对整个组进行变换(移动、旋转、缩放)
				mainGroup = new THREE.Group();
				
				// 将主组添加到场景中
				scene.add(mainGroup);

				// ---------- 8. 创建3D形状 ----------
				// 调用自定义函数，创建各种几何体并添加到主组
				createShapes();

				// ---------- 9. 添加参考网格 ----------
				// GridHelper创建平面网格，便于观察空间位置和比例
				// 参数说明：
				// 40 - 网格大小，40x40单位
				// 20 - 网格细分数量，20x20个格子
				// 0x444444 - 主网格线颜色，深灰色
				// 0x222222 - 细分网格线颜色，更深的灰色
				const gridHelper = new THREE.GridHelper(40, 20, 0x444444, 0x222222);
				
				// 将网格下移10个单位，放在场景底部
				gridHelper.position.y = -10;
				
				// 将网格添加到场景中
				scene.add(gridHelper);

				// ---------- 10. 设置后期处理管道 ----------
				// PostProcessing对象管理渲染管道
				// 允许在基础渲染之上应用多个特效
				postProcessing = new THREE.PostProcessing(renderer);
				
				// 禁用输出颜色变换，保持原始颜色处理
				postProcessing.outputColorTransform = false;

				// ---------- 11. 创建渲染节点 ----------
				// 使用TSL(Three.js Shader Language)创建渲染节点图
				// 节点图定义渲染管道的各个阶段
				
				// 创建场景渲染通道节点
				// pass函数将场景和相机包装为渲染节点
				const scenePass = pass(scene, camera);
				
				// 创建渲染输出节点
				// 这是基础渲染的结果，没有应用任何特效
				const outputPass = renderOutput(scenePass);

				// ---------- 12. 创建uniform节点 ----------
				// uniform节点允许从JavaScript向着色器传递动态值
				// 这些值在着色器执行期间保持不变(uniform)
				
				// 色差强度uniform节点，初始值为params.strength
				const staticStrength = uniform(params.strength);
				
				// 色差中心点uniform节点，使用Vector2类型
				const staticCenter = uniform(new THREE.Vector2(params.center.x, params.center.y));
				
				// 色差缩放uniform节点
				const staticScale = uniform(params.scale);

				// ---------- 13. 应用色差特效 ----------
				// 调用色差节点函数，将特效应用到基础渲染输出
				// chromaticAberration函数参数：
				// 1. inputNode - 输入节点，基础渲染结果
				// 2. strength - 色差强度节点
				// 3. center - 色差中心点节点
				// 4. scale - 色差缩放节点
				const caPass = chromaticAberration(outputPass, staticStrength, staticCenter, staticScale);

				// ---------- 14. 设置最终输出 ----------
				// 根据参数决定使用哪个输出节点
				// 如果启用色差效果，使用caPass(应用了色差的输出)
				// 否则使用outputPass(原始渲染输出)
				postProcessing.outputNode = params.enabled ? caPass : outputPass;

				// ---------- 15. 添加窗口大小变化监听 ----------
				// 当浏览器窗口大小改变时，调整渲染尺寸和相机参数
				window.addEventListener('resize', onWindowResize);

				// ---------- 16. 创建GUI调试界面 ----------
				// 使用Inspector创建参数调整面板
				// 'Settings'是面板的标题
				const gui = renderer.inspector.createParameters('色差特效设置');

				// 添加色差效果启用/禁用开关
				// onChange回调在值改变时触发
				gui.add(params, 'enabled')
					.name('启用色差效果')  // 显示在GUI中的名称
					.onChange((value) => {
						// 根据开关状态切换输出节点
						postProcessing.outputNode = value ? caPass : outputPass;
						// 标记后期处理需要更新，重新编译着色器
						postProcessing.needsUpdate = true;
					});

				// 创建静态参数文件夹，组织相关参数
				const staticFolder = gui.addFolder('静态参数设置');
				
				// 添加色差强度滑块
				// staticStrength.value是uniform节点的值属性
				// 参数说明：
				// staticStrength.value - 绑定的值对象
				// 0 - 最小值
				// 3 - 最大值
				staticFolder.add(staticStrength, 'value', 0, 3)
					.name('色差强度')
					.step(0.1);  // 滑块步长，每次调整的最小单位
				
				// 添加中心点X坐标滑块
				staticFolder.add(staticCenter.value, 'x', -1, 1)
					.name('中心点 X')
					.step(0.01);
				
				// 添加中心点Y坐标滑块
				staticFolder.add(staticCenter.value, 'y', -1, 1)
					.name('中心点 Y')
					.step(0.01);
				
				// 添加缩放比例滑块
				staticFolder.add(staticScale, 'value', 0.5, 2)
					.name('缩放比例')
					.step(0.01);

				// 创建动画设置文件夹
				const animationFolder = gui.addFolder('动画设置');
				
				// 添加动画启用开关
				animationFolder.add(params, 'animated')
					.name('启用场景动画');
				
				// 添加自动旋转开关
				animationFolder.add(params, 'autoRotate')
					.name('启用自动旋转')
					.onChange((value) => {
						// 将GUI值同步到轨道控制器
						controls.autoRotate = value;
					});
				
				// 添加相机距离滑块
				animationFolder.add(params, 'cameraDistance', 10, 100)
					.name('相机距离')
					.step(1)
					.onChange((value) => {
						// 当滑块值改变时，更新相机Z轴位置
						camera.position.z = value;
					});
			}

			// ========== 创建3D形状函数 ==========
			/**
			 * 创建各种3D几何体并添加到场景中
			 * 包括：中心展示组、外围形状环、背景粒子
			 * 这个函数展示了three.js中多种几何体的创建和使用
			 */
			function createShapes() {
				// 存储所有形状的数组，便于后续动画控制
				const shapes = [];
				
				// 材质数组，存储不同颜色的材质
				const materials = [];

				// 定义材质颜色数组
				// 使用十六进制颜色值，0x开头表示十六进制
				const colors = [
					0xff0000,  // 红色 - 纯红
					0x00ff00,  // 绿色 - 纯绿
					0x0000ff,  // 蓝色 - 纯蓝
					0xffff00,  // 黄色 - 红+绿
					0xff00ff,  // 品红色/洋红 - 红+蓝
					0x00ffff,  // 青色 - 绿+蓝
					0xffffff,  // 白色 - 红+绿+蓝
					0xff8800   // 橙色 - 红+部分绿
				];

				// 为每种颜色创建MeshStandardMaterial材质
				// MeshStandardMaterial是基于物理的渲染(PBR)材质
				// 会响应环境光照，产生真实的光照效果
				colors.forEach(color => {
					materials.push(new THREE.MeshStandardMaterial({
						color: color,        // 基础颜色
						roughness: 0.2,      // 粗糙度，0-1，值越小表面越光滑
						metalness: 0.8       // 金属度，0-1，值越高金属感越强
					}));
				});

				// 创建各种几何体定义
				// 几何体定义了物体的形状
				const geometries = [
					// 立方体/长方体：宽度、高度、深度
					new THREE.BoxGeometry(3, 3, 3),
					
					// 球体：半径、水平分段数、垂直分段数
					// 分段数越高，球体越光滑，但性能消耗越大
					new THREE.SphereGeometry(2, 32, 16),
					
					// 圆锥体：底面半径、高度、底面分段数
					new THREE.ConeGeometry(2, 4, 8),
					
					// 圆柱体：顶面半径、底面半径、高度、侧面分段数
					new THREE.CylinderGeometry(1.5, 1.5, 4, 8),
					
					// 圆环体：圆环半径、管道半径、圆环分段数、管道分段数
					new THREE.TorusGeometry(2, 0.8, 8, 16),
					
					// 八面体：半径
					new THREE.OctahedronGeometry(2.5),
					
					// 二十面体：半径
					new THREE.IcosahedronGeometry(2.5),
					
					// 环面纽结：圆环半径、管道半径、管状体分段数、圆环分段数
					// 一种复杂的几何形状，像打结的圆环
					new THREE.TorusKnotGeometry(1.5, 0.5, 64, 8)
				];

				// ---------- 创建中央展示组 ----------
				// 这是场景的视觉焦点，位于中心位置
				const centralGroup = new THREE.Group();

				// 创建大型中央圆环
				// 作为中心展示的基础结构
				const centralTorus = new THREE.Mesh(
					// 圆环几何体：半径5，管道半径1.5
					new THREE.TorusGeometry(5, 1.5, 16, 32),
					
					// 特殊材质：白色金属材质
					new THREE.MeshStandardMaterial({
						color: 0xffffff,      // 白色
						roughness: 0.1,       // 很低的粗糙度，非常光滑
						metalness: 1,         // 完全的金属质感
						emissive: 0x222222    // 自发光颜色，暗灰色
					})
				);
				
				// 将中央圆环添加到中央组
				centralGroup.add(centralTorus);

				// ---------- 创建内部旋转形状 ----------
				// 在中央圆环内部添加6个小形状，围绕中心旋转
				for (let i = 0; i < 6; i++) {
					// 计算当前形状的角度位置
					// 将圆分成6等份，每个形状占据60度
					const angle = (i / 6) * Math.PI * 2;
					
					// 旋转半径，距离中心点的距离
					const radius = 3;

					// 创建网格(Mesh)：几何体 + 材质 = 可渲染的3D对象
					const mesh = new THREE.Mesh(
						// 循环使用几何体数组中的几何体
						geometries[i % geometries.length],
						
						// 循环使用材质数组中的材质
						materials[i % materials.length]
					);

					// 设置形状位置
					// 使用三角函数计算圆形分布的位置：
					// x = radius * cos(angle) - 水平方向
					// z = radius * sin(angle) - 深度方向
					// y = 0 - 保持在同一水平面
					mesh.position.set(
						Math.cos(angle) * radius,  // X坐标
						0,                          // Y坐标
						Math.sin(angle) * radius   // Z坐标
					);

					// 统一缩放，所有轴缩放为0.5倍
					// setScalar方法将所有分量设置为相同的值
					mesh.scale.setScalar(0.5);
					
					// 将形状添加到中央组
					centralGroup.add(mesh);
					
					// 将形状添加到形状数组，便于后续动画控制
					shapes.push(mesh);
				}

				// 将中央组添加到主组
				mainGroup.add(centralGroup);
				
				// 将整个中央组也添加到形状数组
				shapes.push(centralGroup);

				// ---------- 创建外层形状环 ----------
				// 在更远的位置创建12个形状，形成外环
				const numShapes = 12;      // 外层形状数量
				const outerRadius = 15;    // 外层半径，比内层大
				
				// 循环创建每个外层形状
				for (let i = 0; i < numShapes; i++) {
					// 计算当前形状在圆环上的角度
					const angle = (i / numShapes) * Math.PI * 2;
					
					// 为每个形状创建一个组
					// 组可以包含多个网格，便于整体控制
					const shapesGroup = new THREE.Group();

					// 选择几何体和材质
					// 使用取模运算循环使用数组中的元素
					const geometry = geometries[i % geometries.length];
					const material = materials[i % materials.length];

					// 创建网格对象
					const mesh = new THREE.Mesh(geometry, material);
					
					// 启用阴影投射，这个物体会在光照下产生阴影
					mesh.castShadow = true;
					
					// 启用阴影接收，这个物体会接收其他物体投射的阴影
					mesh.receiveShadow = true;

					// 将网格添加到形状组
					shapesGroup.add(mesh);
					
					// 设置形状组的位置
					// X和Z坐标形成圆形分布
					// Y坐标使用正弦函数产生波浪效果，每个形状高度不同
					shapesGroup.position.set(
						Math.cos(angle) * outerRadius,      // X坐标
						Math.sin(i * 0.5) * 2,              // Y坐标，波浪起伏
						Math.sin(angle) * outerRadius       // Z坐标
					);

					// 将形状组添加到主组
					mainGroup.add(shapesGroup);
					
					// 将形状组添加到形状数组
					shapes.push(shapesGroup);
				}

				// ---------- 添加浮动粒子系统 ----------
				// 粒子系统用于创建大量小点，营造星空或魔法效果
				
				// 创建BufferGeometry，一种高效的几何体类型
				// 使用缓冲数组存储顶点数据，性能优于普通Geometry
				const particlesGeometry = new THREE.BufferGeometry();
				
				// 粒子数量
				const particlesCount = 200;
				
				// 创建Float32Array存储顶点位置
				// 每个粒子有3个坐标(x, y, z)，所以总长度是particlesCount * 3
				const positions = new Float32Array(particlesCount * 3);

				// 为每个粒子生成随机位置（球面分布）
				for (let i = 0; i < particlesCount * 3; i += 3) {
					// 球面坐标参数
					const radius = 25 + Math.random() * 10;  // 半径，25-35之间的随机值
					const theta = Math.random() * Math.PI * 2;  // 经度角，0-2π
					const phi = Math.random() * Math.PI;        // 纬度角，0-π
					
					// 球面坐标转直角坐标公式：
					// x = r * sin(φ) * cos(θ)
					// y = r * cos(φ)
					// z = r * sin(φ) * sin(θ)
					positions[i] = radius * Math.sin(phi) * Math.cos(theta);      // X坐标
					positions[i + 1] = radius * Math.cos(phi);                     // Y坐标
					positions[i + 2] = radius * Math.sin(phi) * Math.sin(theta);  // Z坐标
				}

				// 将位置数据设置为几何体的属性
				// BufferAttribute包装Float32Array，告诉three.js如何解析数据
				// 参数：数据数组，每个顶点的分量数（这里是3：x, y, z）
				particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

				// 创建点材质
				// PointsMaterial专门用于渲染点粒子
				const particlesMaterial = new THREE.PointsMaterial({
					color: 0xffffff,        // 粒子颜色，白色
					size: 0.5,              // 粒子大小，单位像素
					sizeAttenuation: true   // 启用大小衰减，远处的粒子看起来更小
				});

				// 创建点粒子系统
				// Points对象将几何体和材质组合成粒子系统
				const particles = new THREE.Points(particlesGeometry, particlesMaterial);
				
				// 将粒子系统添加到主组
				mainGroup.add(particles);
				
				// 注意：粒子系统没有添加到shapes数组，因为它不需要动画
			}

			// ========== 窗口大小变化处理函数 ==========
			/**
			 * 当浏览器窗口大小改变时调用
			 * 调整相机参数和渲染器尺寸，保持正确显示
			 */
			function onWindowResize() {
				// 更新相机宽高比，匹配新的窗口比例
				// 如果不更新，渲染会变形拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法重新计算内部矩阵
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸，填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 注意：后期处理系统会自动处理尺寸变化
				// 因为postProcessing使用的是渲染器的内部尺寸
			}

			// ========== 动画循环函数 ==========
			/**
			 * 每一帧渲染时自动调用
			 * 这是three.js动画系统的核心
			 * 负责更新场景状态和重新渲染
			 */
			function animate() {
				// 获取从程序开始到现在经过的时间（秒）
				// 用于基于时间的动画，避免帧率波动导致动画速度不一致
				const time = clock.getElapsedTime();

				// 更新轨道控制器
				// 如果启用了阻尼或自动旋转，需要每帧更新
				controls.update();

				// 如果启用了场景动画
				if (params.animated) {
					// 遍历主组的所有子对象
					// mainGroup.children是包含所有直接子对象的数组
					mainGroup.children.forEach((child, index) => {
						// 检查对象是否有子对象（是Group类型）
						if (child.children.length > 0) {
							// 中央组：整体绕Y轴旋转
							// time * 0.5控制旋转速度，每2秒转一圈
							child.rotation.y = time * 0.5;
							
							// 遍历中央组的每个子对象（内部小形状）
							child.children.forEach((subChild, subIndex) => {
								// 检查子对象是否有几何体（是Mesh类型）
								if (subChild.geometry) {
									// 为每个小形状添加独立旋转
									// 旋转速度与索引相关，产生错落的动画效果
									subChild.rotation.x = time * (1 + subIndex * 0.1);  // X轴旋转
									subChild.rotation.z = time * (1 - subIndex * 0.1);  // Z轴旋转
								}
							});
						} 
						// 检查是否是外层的形状组
						else if (child.type === 'Group') {
							// 外层形状组：各自独立旋转
							child.rotation.x = time * 0.5 + index;  // X轴旋转，每个形状不同
							child.rotation.y = time * 0.3 + index;  // Y轴旋转，每个形状不同
							
							// Y轴上下浮动，使用正弦函数产生波浪效果
							// Math.sin(time + index)产生周期运动，*2控制幅度
							child.position.y = Math.sin(time + index) * 2;
						}
						// 注意：粒子系统(Points类型)没有动画，保持静态
					});
				}

				// 执行后期处理渲染
				// 这是最终将场景绘制到屏幕的调用
				// postProcessing.render()会处理整个渲染管道：
				// 1. 渲染基础场景到纹理
				// 2. 应用色差特效（如果启用）
				// 3. 输出到屏幕
				postProcessing.render();
				
				// 注意：这里没有调用renderer.render()，因为使用了后期处理系统
				// postProcessing.render()内部会处理所有渲染
			}
		</script>
	</body>
</html>