<!-- Three.js WebGPU 后像效果演示 - 功能与技术详解
🎯 主要功能
1. 核心视觉效果
动态粒子螺旋动画：50,000个彩色粒子在3D空间中形成复杂的螺旋运动

后像/残影效果：粒子运动会留下逐渐消失的运动轨迹，增强视觉冲击力

彩虹色渐变：粒子颜色按HSL色相环均匀分布，形成彩虹色效果

实时交互：用户可调整效果参数并旋转视角

2. 交互功能
参数调节：实时调整残影衰减系数（0.25-1）

效果开关：一键启用/禁用后像效果

视角控制：通过鼠标拖动旋转观察场景

调试面板：内置GUI控制界面

3. 响应式设计
自动适应窗口大小变化

支持高DPI显示设备

移动端适配布局

🛠 主要技术点
1. WebGPU渲染技术
javascript
// 使用Three.js的WebGPU后端
renderer = new THREE.WebGPURenderer();
技术特点：

现代图形API：替代传统的WebGL，提供更好的性能和功能

计算着色器支持：适合大规模并行计算（如粒子系统）

多线程渲染：更好的CPU/GPU利用率

显存管理优化：自动内存管理和资源回收

2. 实例化渲染(Instanced Rendering)
javascript
// 创建实例化缓冲区属性
const positionAttribute = new THREE.InstancedBufferAttribute(vertices, 3);
技术原理：

单次绘制调用：50,000个粒子只需一次GPU绘制指令

顶点属性共享：所有粒子共享相同的几何数据

实例属性独立：每个粒子有独立的颜色、位置、时间偏移

性能优势：相比单独渲染每个粒子，性能提升数十倍

3. TSL着色器语言
javascript
// TSL节点式着色器编程
const animated = vec3(
    pos.x.mul(accTime).add(pulse.x),
    pos.y.mul(accTime).add(pulse.y),
    pos.z.mul(accTime).mul(1.75)
);
技术特点：

节点式编程：可视化思维，易于理解和调试

类型安全：编译时类型检查，减少运行时错误

自动优化：编译器自动优化着色器代码

跨平台：自动转换为GLSL、WGSL等目标语言

4. 后处理管线
javascript
// 创建后处理管道
postProcessing = new THREE.PostProcessing(renderer);
afterImagePass = afterImage(scenePass, params.damp);
技术实现：

多通道渲染：场景渲染 → 后像处理 → 最终输出

帧缓冲对象(FBO)：中间结果存储在离屏缓冲区

全屏四边形：后处理效果通过全屏四边形应用

可组合性：支持多个后处理效果串联

5. 后像算法实现
glsl
// 后像效果伪代码
vec4 currentFrame = renderScene();
vec4 previousFrame = texture(historyBuffer, uv);
vec4 result = currentFrame + previousFrame * damp;
算法原理：

历史混合：新帧 = 当前帧 + 上一帧 × 衰减系数

衰减控制：damp值决定历史帧的保留程度

累积效应：快速运动产生明显的拖尾效果

内存优化：只需存储上一帧数据

6. 数学与算法
球面均匀分布算法
javascript
// 球坐标转直角坐标
x = cos(θ) * √(1 - u²) * r
y = sin(θ) * √(1 - u²) * r
z = u * r
数学原理：

均匀分布：确保粒子在球面上均匀分布（非随机半径）

球坐标转换：使用方位角θ和天顶角φ

雅可比因子：考虑球面面积元的变化

粒子运动算法
javascript
// 非线性加速度
const accTime = modTime.mul(modTime); // t²
// 圆周运动
const pulse = vec2(sin(angle).mul(20.0), cos(angle).mul(20.0));
运动类型：

加速运动：平方函数实现先慢后快的加速度

圆周运动：正弦余弦函数创建椭圆形轨迹

相位偏移：每个粒子有不同的开始时间

螺旋展开：粒子从中心向外扩散

7. 性能优化技术
GPU优化
批处理渲染：减少API调用开销

数据布局优化：使用交错存储提高缓存命中率

着色器常量：将不变的数据设为uniform

纹理压缩：粒子纹理使用适当压缩格式

内存管理
javascript
// 使用TypedArray减少内存分配
new Float32Array(vertices)
避免垃圾回收：重用Vector3和Color对象

内存池：预分配数据缓冲区

及时释放：组件销毁时清理GPU资源

8. 调试与开发工具
javascript
// 内置调试器
renderer.inspector = new Inspector();
开发支持：

实时参数调整：无需重新编译即可测试效果

性能分析：帧率监控和GPU时间测量

着色器调试：查看编译后的着色器代码

状态检查：检查WebGPU设备状态和限制

📊 技术架构层次
text
应用层
├── 用户界面 (HTML/CSS)
├── 参数控制 (GUI)
└── 交互处理 (事件监听)

业务逻辑层
├── 动画系统 (粒子运动)
├── 后处理系统 (效果管道)
└── 场景管理 (对象组织)

渲染层
├── WebGPU渲染器
├── TSL着色器编译
├── 实例化渲染
└── 后处理管线

数学层
├── 几何变换
├── 颜色空间
├── 随机分布
└── 插值算法

硬件层
├── GPU计算
├── 显存管理
└── 图形API驱动
🔧 扩展可能性
1. 效果增强
添加辉光/发光效果

实现深度感知模糊

加入颜色分级和滤镜

2. 交互增强
粒子吸引/排斥交互

鼠标互动效果

物理模拟集成

3. 性能优化
LOD系统（根据距离调整粒子数量）

异步资源加载

基于可见性的剔除

🎨 视觉艺术特点
色彩美学：HSL色相环产生和谐的色彩过渡

运动韵律：非线性的加速运动增强视觉动感

空间层次：粒子的深度排序和透明度变化

时间维度：后像效果在视觉上延展了时间

⚡ 性能指标
粒子数量：50,000个实例化粒子

绘制调用：1次/帧（实例化渲染）

内存占用：~3MB顶点数据 + 纹理

兼容性：需要支持WebGPU的现代浏览器 -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 
        页面元数据设置
        title: 页面标题，显示在浏览器标签页上
        meta charset: 设置字符编码为UTF-8，支持中文显示
        meta viewport: 移动端适配设置
            - width=device-width: 宽度等于设备宽度
            - user-scalable=no: 禁止用户手动缩放页面
            - minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1
    -->
    <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样式选择器识别
        包含：three.js标志链接、标题、描述信息和版权声明
    -->
    <div id="info">
        <!-- 
            three.js官方标志链接
            class="logo-link": 通过CSS设置背景图片为three.js标志
            target="_blank": 在新标签页打开链接
            rel="noopener": 安全设置，防止新页面访问原页面的window对象
        -->
        <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>标签表示次要信息，通常字体较小
        -->
        <small>
            <!-- 演示效果基于的原始作品 -->
            本演示基于 <a href="https://oosmoxiecode.com/archive/js_webgl/spiral/" target="_blank" rel="noopener">粒子螺旋效果</a>
            <!-- 原作者信息 -->
            原作者：<a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>。
            <br>
            <!-- 技术说明 -->
            使用 Three.js WebGPU 渲染器和 TSL 着色器语言实现。
        </small>
        
    </div>

    <!-- 
        importmap 模块导入映射
        作用：将模块名称映射到实际的JavaScript文件路径
        这是现代浏览器支持的模块加载机制
    -->
    <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渲染器的核心库
        // WebGPU是新一代图形API，替代WebGL，提供更好的性能和功能
        import * as THREE from 'three/webgpu';
        
        // 导入TSL（Three.js Shader Language）着色器语言的相关函数
        // TSL允许在JavaScript中编写着色器代码，具有类型安全和自动优化
        // instancedBufferAttribute: 实例化缓冲区属性，用于高效渲染大量相同对象
        // uniform: 统一变量，在着色器中保持不变的值
        // mod: 取模运算，用于创建循环动画
        // pass: 创建渲染通道
        // texture: 纹理采样
        // float, vec2, vec3, vec4: 标量和向量类型
        // sin, cos: 三角函数，用于创建周期性动画
        // time: 时间变量，自动更新
        import { 
            instancedBufferAttribute, 
            uniform, 
            mod, 
            pass, 
            texture, 
            float, 
            time, 
            vec2, 
            vec3, 
            vec4, 
            sin, 
            cos 
        } from 'three/tsl';
        
        // 导入后像（残影）效果节点
        // 后像效果原理：混合当前帧和之前帧的渲染结果，创建运动轨迹
        import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
        
        // 导入调试器，用于创建GUI控制面板
        // Inspector提供实时参数调整和性能监控功能
        import { Inspector } from 'three/addons/inspector/Inspector.js';

        // ====================== 全局变量声明 ======================
        
        // Three.js核心对象
        let camera;      // 相机：决定观察场景的视角和投影方式
        let scene;       // 场景：包含所有3D对象的容器
        let renderer;    // 渲染器：负责将3D场景绘制到2D画布上
        let particles;   // 粒子系统：包含大量粒子的对象，用于创建粒子效果
        
        // 后处理相关对象
        let postProcessing;   // 后处理管理器，协调多个后处理效果
        let afterImagePass;   // 后像效果处理通道
        let scenePass;        // 原始场景渲染通道

        // ====================== 效果参数配置 ======================
        
        // params对象存储可调整的效果参数
        const params = {
            // damp: 衰减系数，控制残影消失的速度
            // uniform(0.8, 'float'): 创建浮点类型的统一变量，初始值0.8
            // setName('damp'): 设置变量名，便于在调试器中识别
            // 取值范围建议：0.25-1，值越小残影越短，值越大残影越长
            damp: uniform(0.8, 'float').setName('damp'),
            
            // enabled: 是否启用后像效果
            // 布尔值，可以通过GUI开关控制
            enabled: true
        };

        // ====================== 初始化函数调用 ======================
        
        // 页面加载完成后执行的初始化函数
        init();

        /**
         * 初始化函数 - 整个应用程序的入口点
         * 负责创建渲染器、相机、场景、粒子系统、后处理效果和GUI
         */
        function init() {
            // ---------- 1. 创建WebGPU渲染器 ----------
            // WebGPURenderer是Three.js的WebGPU实现，相比WebGLRenderer有更好的性能
            renderer = new THREE.WebGPURenderer();
            
            // 设置设备像素比，确保在高DPI屏幕（如Retina显示屏）上清晰显示
            renderer.setPixelRatio(window.devicePixelRatio);
            
            // 设置渲染器尺寸为浏览器窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 设置动画循环回调函数，替代传统的requestAnimationFrame
            // animate函数会在每一帧被自动调用
            renderer.setAnimationLoop(animate);
            
            // 附加调试器到渲染器，便于调试和参数调整
            renderer.inspector = new Inspector();
            
            // 将渲染器的canvas元素添加到页面body中
            // domElement是渲染器创建的<canvas>元素
            document.body.appendChild(renderer.domElement);

            // ---------- 2. 创建相机 ----------
            // PerspectiveCamera: 透视相机，模拟人眼视角，有近大远小的透视效果
            // 参数说明：
            //   - 60: 视野角度（FOV），单位度，60度是常见的选择
            //   - window.innerWidth / window.innerHeight: 宽高比
            //   - 1: 近裁剪面，距离相机1个单位内的物体不显示
            //   - 10000: 远裁剪面，距离相机10000个单位外的物体不显示
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
            
            // 设置相机位置：沿Z轴向后移动1000个单位
            // 在Three.js中，坐标系为：X轴向右，Y轴向上，Z轴从屏幕向外
            camera.position.z = 1000;

            // ---------- 3. 创建场景 ----------
            // Scene是Three.js中所有3D对象的容器
            // 可以添加灯光、相机、网格物体等
            scene = new THREE.Scene();

            // ---------- 4. 加载粒子纹理 ----------
            // 创建纹理加载器，用于加载图片作为粒子纹理
            const textureLoader = new THREE.TextureLoader();
            
            // 加载圆形精灵图
            // 精灵图（sprite）是始终面向相机的2D图像，常用于粒子效果
            const sprite = textureLoader.load('textures/sprites/circle.png');

            // ---------- 5. 准备粒子几何体数据 ----------
            // 定义粒子系统参数
            const radius = 600;   // 粒子分布球体的半径
            const count = 50000;  // 粒子总数，数量越多效果越密集，性能要求越高

            // 创建临时变量用于计算
            const vertex = new THREE.Vector3(); // 三维向量，存储顶点位置
            const color = new THREE.Color();    // 颜色对象，存储RGB值

            // 数据数组，用于存储所有粒子的属性
            const colors = [];      // 粒子颜色数组，每个粒子3个值（R,G,B）
            const vertices = [];    // 粒子位置数组，每个粒子3个值（X,Y,Z）
            const timeOffsets = []; // 时间偏移数组，每个粒子1个值，用于错开动画相位

            // 循环生成每个粒子的数据
            for (let i = 0; i < count; i++) {
                // ---------- 5.1 生成随机位置 ----------
                // 在球面上均匀生成随机点
                // getRandomPointOnSphere函数确保粒子在球面上均匀分布
                getRandomPointOnSphere(radius, vertex);
                
                // 将顶点坐标添加到数组
                vertices.push(vertex.x, vertex.y, vertex.z);

                // ---------- 5.2 生成颜色 ----------
                // 使用HSL颜色模型生成彩虹色渐变
                // 参数说明：
                //   - i / count: 色相（Hue），0到1，根据粒子索引渐变
                //   - 0.7: 饱和度（Saturation），0.7表示较高的饱和度，颜色鲜艳
                //   - 0.7: 亮度（Lightness），0.7表示中等亮度
                //   - THREE.SRGBColorSpace: 颜色空间，sRGB是标准颜色空间
                color.setHSL(i / count, 0.7, 0.7, THREE.SRGBColorSpace);
                
                // 将颜色值添加到数组
                colors.push(color.r, color.g, color.b);

                // ---------- 5.3 生成时间偏移 ----------
                // 时间偏移使每个粒子的动画开始时间不同，形成波浪效果
                // i / count: 0到1之间的值，均匀分布
                timeOffsets.push(i / count);
            }

            // ---------- 6. 创建实例化缓冲区属性 ----------
            // InstancedBufferAttribute用于高效渲染大量相同几何体
            // 相比普通BufferAttribute，实例化渲染性能更高
            
            // 位置属性：存储所有粒子的初始位置
            const positionAttribute = new THREE.InstancedBufferAttribute(
                new Float32Array(vertices), // 将普通数组转换为TypedArray提高性能
                3  // 每个顶点的分量数（X,Y,Z）
            );
            
            // 颜色属性：存储所有粒子的颜色
            const colorAttribute = new THREE.InstancedBufferAttribute(
                new Float32Array(colors),
                3  // 每个颜色的分量数（R,G,B）
            );
            
            // 时间偏移属性：存储每个粒子的动画相位偏移
            const timeAttribute = new THREE.InstancedBufferAttribute(
                new Float32Array(timeOffsets),
                1  // 每个时间偏移的分量数
            );

            // ---------- 7. 创建材质并设置TSL节点 ----------
            // SpriteNodeMaterial: 专门用于精灵粒子的材质，支持TSL节点
            const material = new THREE.SpriteNodeMaterial({
                blending: THREE.AdditiveBlending, // 混合模式：加法混合
                // 加法混合公式：结果颜色 = 源颜色 + 目标颜色
                // 适合发光效果，颜色叠加会变亮
                
                depthWrite: false // 禁用深度写入
                // 深度写入：将像素的深度值写入深度缓冲区
                // 禁用后，透明物体不会相互遮挡，适合粒子效果
            });

            // ---------- 7.1 时间计算节点 ----------
            // 计算每个粒子的本地时间
            // time.mul(0.1): 全局时间乘以0.1，减慢动画速度
            // instancedBufferAttribute(timeAttribute): 获取粒子的时间偏移
            // .add(): 将全局时间偏移和粒子本地偏移相加
            const localTime = instancedBufferAttribute(timeAttribute).add(time.mul(0.1));
            
            // 取模运算，创建0-1的循环
            // mod(localTime, 1.0): localTime除以1取余数
            // 使动画无限循环，0-1-0-1...
            const modTime = mod(localTime, 1.0);
            
            // 平方运算，创建非线性加速度
            // modTime.mul(modTime): modTime的平方
            // 平方函数在0-1范围内产生先慢后快的加速度效果
            const accTime = modTime.mul(modTime);

            // ---------- 7.2 运动计算节点 ----------
            // 计算粒子旋转角度
            // accTime.mul(40.0): 加速度时间乘以40，控制旋转速度
            const angle = accTime.mul(40.0);
            
            // 创建圆周运动（脉冲效果）
            // sin(angle).mul(20.0): X轴方向的正弦波运动，振幅20
            // cos(angle).mul(20.0): Y轴方向的余弦波运动，振幅20
            const pulse = vec2(sin(angle).mul(20.0), cos(angle).mul(20.0));
            
            // 获取粒子的原始位置
            const pos = instancedBufferAttribute(positionAttribute);

            // ---------- 7.3 计算最终动画位置 ----------
            // 位置 = 原始位置 × 加速度时间 + 脉冲偏移
            const animated = vec3(
                pos.x.mul(accTime).add(pulse.x), // X轴：缩放 + 正弦波
                pos.y.mul(accTime).add(pulse.y), // Y轴：缩放 + 余弦波
                pos.z.mul(accTime).mul(1.75)     // Z轴：额外缩放1.75倍
            );
            
            // ---------- 7.4 计算透明度 ----------
            // 创建淡入淡出效果
            // modTime.oneMinus(): 1 - modTime，反转时间
            // .mul(2.0): 乘以2，增强对比度
            // 结果：透明度从2到0渐变，粒子逐渐消失
            const fAlpha = modTime.oneMinus().mul(2.0);

            // ---------- 7.5 设置材质节点 ----------
            // 颜色节点：纹理颜色 × 粒子颜色 × 透明度
            material.colorNode = texture(sprite)  // 采样圆形纹理
                .mul(vec4(                       // 乘以颜色向量
                    instancedBufferAttribute(colorAttribute), // 粒子颜色
                    fAlpha                      // 透明度
                ));
            
            // 位置节点：使用计算后的动画位置
            material.positionNode = animated;
            
            // 缩放节点：固定值2，控制粒子大小
            material.scaleNode = float(2);

            // ---------- 8. 创建粒子系统 ----------
            // Sprite: 精灵对象，使用SpriteNodeMaterial材质
            particles = new THREE.Sprite(material);
            particles.count = count; // 设置粒子数量
            scene.add(particles);    // 将粒子系统添加到场景

            // ---------- 9. 设置后处理 ----------
            // PostProcessing: Three.js的后处理管理器
            // 后处理是指在场景渲染完成后，对渲染结果进行额外的图像处理
            postProcessing = new THREE.PostProcessing(renderer);
            
            // 创建场景渲染通道
            // pass(scene, camera): 创建一个渲染场景的通道
            scenePass = pass(scene, camera);
            
            // 创建后像效果通道
            // afterImage(scenePass, params.damp): 对场景通道应用后像效果
            // 参数说明：
            //   - scenePass: 输入通道（原始场景）
            //   - params.damp: 衰减系数，控制残影消失速度
            afterImagePass = afterImage(scenePass, params.damp);
            
            // 设置后处理输出节点
            postProcessing.outputNode = afterImagePass;

            // ---------- 10. 创建GUI控制面板 ----------
            // 使用调试器创建参数控制界面
            const gui = renderer.inspector.createParameters('效果设置');
            
            // 添加衰减系数滑块
            // 参数说明：
            //   - afterImagePass.damp: 控制的目标对象和属性
            //   - 'value': 要控制的属性名
            //   - 0.25: 最小值
            //   - 1: 最大值
            gui.add(afterImagePass.damp, 'value', 0.25, 1)
               .name('衰减系数')  // 显示名称
               .onChange(() => {
                   // 值改变时，手动更新后处理
                   postProcessing.needsUpdate = true;
               });
            
            // 添加效果开关
            gui.add(params, 'enabled')
               .name('启用后像效果')
               .onChange(updatePassChain); // 开关改变时调用更新函数

            // ---------- 11. 添加事件监听器 ----------
            // 监听窗口大小变化事件
            window.addEventListener('resize', onWindowResize);
            
            // 初始更新后处理链
            updatePassChain();
        }

        /**
         * 更新后处理通道链
         * 根据enabled参数切换是否应用后像效果
         */
        function updatePassChain() {
            if (params.enabled === true) {
                // 启用后像效果：原始场景 → 后像处理 → 输出
                postProcessing.outputNode = afterImagePass;
            } else {
                // 禁用后像效果：原始场景直接输出
                postProcessing.outputNode = scenePass;
            }
            
            // 标记后处理需要更新
            // 这确保管道重新编译，应用新的节点配置
            postProcessing.needsUpdate = true;
        }

        /**
         * 在球面上生成均匀分布的随机点
         * 使用球坐标转换方法，确保点在球面上均匀分布（非随机半径）
         * 
         * @param {number} r - 球体半径
         * @param {THREE.Vector3} v - 用于存储结果的向量对象（避免创建新对象）
         * @returns {THREE.Vector3} 生成的点坐标
         */
        function getRandomPointOnSphere(r, v) {
            // 生成随机方位角（0到2π）
            // 方位角决定点在XY平面上的方向
            const angle = Math.random() * Math.PI * 2;
            
            // 生成随机高度值（-1到1）
            // u = cos(φ)，其中φ是天顶角（与Z轴的夹角）
            // 均匀分布在天顶角上，而不是在u上，需要后续转换
            const u = Math.random() * 2 - 1;
            
            // 球坐标转直角坐标公式：
            // x = r * sin(φ) * cos(θ)
            // y = r * sin(φ) * sin(θ)
            // z = r * cos(φ)
            // 其中：φ = arccos(u), θ = angle, sin(φ) = √(1 - u²)
            
            v.set(
                // X坐标：cos(angle) * sin(φ) * r
                Math.cos(angle) * Math.sqrt(1 - Math.pow(u, 2)) * r,
                
                // Y坐标：sin(angle) * sin(φ) * r
                Math.sin(angle) * Math.sqrt(1 - Math.pow(u, 2)) * r,
                
                // Z坐标：cos(φ) * r = u * r
                u * r
            );

            return v;
        }

        /**
         * 窗口大小变化处理函数
         * 当浏览器窗口大小改变时，更新相机和渲染器
         */
        function onWindowResize() {
            // 更新相机宽高比
            // 宽高比 = 窗口宽度 / 窗口高度
            camera.aspect = window.innerWidth / window.innerHeight;
            
            // 更新相机投影矩阵
            // 必须调用此方法，否则相机不会应用新的宽高比
            camera.updateProjectionMatrix();

            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 更新后处理，确保效果适应新尺寸
            postProcessing.needsUpdate = true;
        }

        /**
         * 动画循环函数
         * 每一帧自动调用，更新场景状态并渲染
         * 
         * @param {number} time - 从页面加载开始经过的时间（毫秒）
         * 由requestAnimationFrame或setAnimationLoop提供
         */
        function animate(time) {
            // 更新粒子系统旋转
            // time * 0.001: 将毫秒转换为秒，并减慢旋转速度
            // 粒子系统绕Z轴缓慢旋转，增强动态效果
            particles.rotation.z = time * 0.001;

            // 执行后处理渲染
            // 这会自动处理所有配置的后处理效果
            postProcessing.render();
        }

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