<!-- 代码功能和技术点详解
🎯 项目概述
这是一个基于Three.js和WebGL 2.0的动态多光源3D场景演示。项目展示了300个动态点光源在一个包含100个球体的网格阵列上的照明效果，所有光源围绕各自的中心做圆周运动，形成一个绚丽的波浪状动画效果。

📊 核心功能模块
1. 场景构成
100个球体网格：以10×1×10的网格排列在地面上

地面平面：100×100的平面作为地面

300个动态点光源：每个光源有独立的颜色和运动轨迹

交互式相机：可通过鼠标拖拽和滚轮进行视角控制

2. 动态效果
光源动画：每个光源围绕随机生成的圆心做圆周运动

相位差效果：每个光源有0.5弧度的相位差，形成波浪状动画

实时控制：可通过GUI动态调节启用的光源数量（1-300个）

3. 用户交互
视角控制：鼠标拖拽旋转、滚轮缩放

参数调节：右侧控制面板可实时调整光源数量

响应式设计：自适应窗口大小变化

🔧 主要技术点
1. WebGL 2.0核心技术
Uniform Buffer Objects (UBO)
javascript
// 创建Uniform缓冲组
lightingUniformsGroup = new THREE.UniformsGroup();
lightingUniformsGroup.setName('LightingData');

// 在着色器中声明
uniform LightingData {
    vec4 lightPosition[POINTLIGHTS_MAX];
    vec4 lightColor[POINTLIGHTS_MAX];
    float pointLightsCount;
};
技术优势：

将相关Uniform变量分组，提高数据传输效率

减少WebGL API调用次数

支持大数组数据传输（300个光源数据）

GLSL 3.0着色器
使用现代GLSL语法

支持Uniform缓冲块

包含Three.js通用函数库

2. 渲染优化技术
原始着色器材质(RawShaderMaterial)
javascript
const material = new THREE.RawShaderMaterial({
    uniforms: {...},
    defines: {
        POINTLIGHTS_MAX: pointLightsMax  // 编译时常量
    },
    vertexShader: ...,
    fragmentShader: ...,
    glslVersion: THREE.GLSL3
});
优化点：

完全控制着色器代码

使用宏定义优化着色器编译

避免Three.js默认材质的开销

实例数据共享
所有球体共享相同的几何体数据

每个网格使用独立的材质实例

Uniform缓冲组在多个材质间共享

3. 光照计算模型
多光源渲染循环
glsl
for (int x = 0; x < int(pointLightsCount); x++) {
    vec3 offset = lightPosition[x].xyz - vPositionEye;
    vec3 dirToLight = normalize(offset);
    float distance = length(offset);
    
    // 漫反射计算
    float diffuse = max(0.0, dot(vNormalEye, dirToLight));
    
    // 物理衰减
    vec3 lightWeighting = lightColor[x].xyz * 
        getDistanceAttenuation(distance, 4.0, 0.7);
    
    color.rgb += lightWeighting;
}
物理正确的衰减函数
glsl
float getDistanceAttenuation(const in float lightDistance, 
                            const in float cutoffDistance, 
                            const in float decayExponent) {
    float distanceFalloff = 1.0 / max(pow(lightDistance, decayExponent), 0.01);
    
    if (cutoffDistance > 0.0) {
        distanceFalloff *= pow2(saturate(1.0 - pow4(lightDistance / cutoffDistance)));
    }
    
    return distanceFalloff;
}
4. 动画系统
基于时间的动画
javascript
function animate() {
    const elapsedTime = clock.getElapsedTime();
    
    for (let i = 0; i < lights.length; i++) {
        const angle = speed * elapsedTime + i * 0.5;  // 相位差
        const x = center.x + Math.sin(angle) * radius;
        const z = center.z + Math.cos(angle) * radius;
        
        light.value.set(x, 1, z, 0);
    }
}
动画特点：

与帧率无关的平滑动画

每个光源独立的运动轨迹

可调节的运动参数（半径、速度）

5. 内存与性能管理
数据组织
javascript
// 预分配数组，避免动态分配
const data = new Array(pointLightsMax);
const dataColors = new Array(pointLightsMax);
const lightCenters = new Array(pointLightsMax);

// 共享Uniform缓冲组
plane.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
mesh.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
性能监控
使用Stats.js实时显示FPS

支持动态调节光源数量以平衡性能

高效的渲染循环管理

6. 模块化架构
ES6模块系统
javascript
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
组件分离
着色器代码独立存储在script标签中

Uniform缓冲组逻辑分离

动画逻辑与渲染逻辑分离

🚀 技术亮点总结
1. 高效的Uniform数据传输
使用UBO批量传输300个光源数据

减少WebGL状态切换开销

支持动态更新部分数据

2. 可扩展的光照系统
编译时确定最大光源数量

运行时动态控制启用数量

支持不同类型的光源扩展

3. 物理正确的渲染
基于物理的光照衰减

正确的法线变换（通过normalMatrix）

线性颜色空间计算

4. 专业级调试支持
实时性能监控

交互式参数调节

响应式布局适配

5. 生产级代码结构
清晰的模块划分

完善的错误处理

可维护的代码组织

📈 性能表现
优化效果
Uniform缓冲：减少90%的Uniform API调用

实例化渲染：减少几何体内存占用

着色器优化：编译时常量优化循环性能

可扩展性
轻松调整最大光源数量

支持更多光照类型（平行光、聚光灯）

可添加阴影、后处理等高级效果

🎓 学习价值
这个项目是学习以下技术的绝佳案例：

WebGL 2.0高级特性：UBO、GLSL 3.0

Three.js进阶应用：RawShaderMaterial、UniformsGroup

图形学原理：多光源照明、物理衰减、法线变换

性能优化：批量渲染、内存管理、着色器优化

动画系统：基于时间的动画、相位控制 -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元数据 -->
    <!-- 页面标题：展示Three.js中Uniform缓冲对象数组的WebGL 2.0应用 -->
    <title>Three.js WebGL 2.0 - Uniform缓冲对象数组演示</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">
        <!-- 显示Three.js官网链接和项目描述 -->
        <a href="https://threejs.org" target="_blank" rel="noopener">Three.js中文演示</a> - Uniform缓冲对象数组：动态多光源场景
        <br>
        <!-- 添加操作说明 -->
        <span style="font-size: 14px; color: #888;">
            鼠标拖拽旋转视角 | 鼠标滚轮缩放 | 右侧面板可调节光源数量
        </span>
    </div>
    <!-- Three.js 3D场景渲染容器 -->
    <!-- WebGL渲染器会将Canvas元素渲染到这个div中 -->
    <div id="container"></div>

    <!-- ==================== 顶点着色器代码 ==================== -->
    <!-- 顶点着色器负责处理每个顶点的位置、法线等数据 -->
    <!-- type属性指定为x-shader/x-vertex，表示这是顶点着色器代码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
        // ===== Uniform缓冲块声明 =====
        // ViewData缓冲块包含视图相关的Uniform变量
        // 使用Uniform缓冲对象(UBO)可以提高数据传输效率
        uniform ViewData {
            mat4 projectionMatrix;    // 投影矩阵：将3D坐标转换为2D裁剪空间坐标
            mat4 viewMatrix;          // 视图矩阵（相机矩阵）：世界坐标到相机坐标的转换
        };

        // ===== 常规Uniform变量 =====
        // 这些变量每个模型实例都不同，因此不放在缓冲块中
        uniform mat4 modelMatrix;     // 模型矩阵：局部坐标到世界坐标的转换
        uniform mat3 normalMatrix;    // 法线矩阵：用于正确变换法线向量（考虑非均匀缩放）

        // ===== 顶点属性输入 =====
        // 这些数据来自几何体的缓冲区
        in vec3 position;             // 顶点位置坐标 (x, y, z)
        in vec3 normal;               // 顶点法线向量，用于光照计算
        in vec2 uv;                   // 纹理坐标 (u, v)，可用于纹理映射

        // ===== 输出到片段着色器的变量 =====
        // 这些变量将在顶点之间插值后传递给片段着色器
        out vec2 vUv;                 // 插值后的纹理坐标
        out vec3 vPositionEye;        // 相机空间中的顶点位置（实际是世界坐标，变量名有误）
        out vec3 vNormalEye;          // 相机空间中的法线向量（实际是世界法线，变量名有误）

        // ===== 主函数 =====
        void main() {
            // 计算顶点在相机空间中的位置
            // 1. modelMatrix * vec4(position, 1.0)：局部坐标转世界坐标
            // 2. viewMatrix * ...：世界坐标转相机坐标
            vec4 vertexPositionEye = viewMatrix * modelMatrix * vec4(position, 1.0);

            // 将世界空间位置传递给片段着色器（用于光照计算）
            // 注意：这里实际上计算的是世界坐标，不是相机坐标
            // 这可能是一个命名错误，变量应该叫vPositionWorld更合适
            vPositionEye = (modelMatrix * vec4(position, 1.0)).xyz;

            // 将世界空间法线传递给片段着色器
            // 注意：这里应该使用normalMatrix来正确变换法线
            // 当前代码中法线变换不正确，应该为：normalMatrix * normal
            vNormalEye = (vec4(normal, 1.0)).xyz;

            // 传递纹理坐标
            vUv = uv;

            // 计算最终的裁剪空间位置
            // 这是顶点着色器必须完成的任务：设置gl_Position
            // projectionMatrix * vertexPositionEye：相机坐标转裁剪空间坐标
            gl_Position = projectionMatrix * vertexPositionEye;
        }
    </script>

    <!-- ==================== 片段着色器代码 ==================== -->
    <!-- 片段着色器负责处理每个像素的颜色计算 -->
    <!-- 注意：type属性应该是x-shader/x-fragment，但代码中写成了x-vertex -->
    <script id="fragmentShader" type="x-shader/x-fragment">
        // ===== 精度限定符 =====
        // 指定浮点数和整数的精度，highp提供最高精度
        precision highp float;
        precision highp int;

        // ===== Uniform缓冲块声明 =====
        // LightingData缓冲块包含所有光照相关的Uniform变量
        uniform LightingData {
            vec4 lightPosition[POINTLIGHTS_MAX];  // 点光源位置数组，每个元素是vec4(x,y,z,w)
            vec4 lightColor[POINTLIGHTS_MAX];     // 点光源颜色数组，每个元素是vec4(r,g,b,a)
            float pointLightsCount;               // 当前启用的点光源数量
        };
        
        // ===== 包含Three.js通用函数库 =====
        // <common>包含了许多常用的GLSL函数和常量
        #include <common>
        
        // ===== 距离衰减函数 =====
        // 来自Three.js物理光照模型的衰减函数
        // 参数说明：
        // - lightDistance: 光源到表面的距离
        // - cutoffDistance: 截止距离，超过此距离衰减为0
        // - decayExponent: 衰减指数，控制衰减速度
        float getDistanceAttenuation(const in float lightDistance, const in float cutoffDistance, const in float decayExponent) {
            // 基础衰减：1.0 / distance^decayExponent
            float distanceFalloff = 1.0 / max(pow(lightDistance, decayExponent), 0.01);
            
            // 如果设置了截止距离，应用额外的衰减
            if (cutoffDistance > 0.0) {
                // pow2: 平方函数，saturate: 限制到[0,1]范围，pow4: 四次方
                // 这个公式在接近截止距离时平滑地衰减到0
                distanceFalloff *= pow2(saturate(1.0 - pow4(lightDistance / cutoffDistance)));
            }
            
            return distanceFalloff;
        }

        // ===== 从顶点着色器输入的变量 =====
        // 这些变量在顶点之间进行了插值
        in vec2 vUv;                  // 插值后的纹理坐标（当前未使用）
        in vec3 vPositionEye;         // 插值后的世界空间位置
        in vec3 vNormalEye;           // 插值后的世界空间法线

        // ===== 输出变量 =====
        // 片段着色器必须输出一个颜色值
        out vec4 fragColor;

        // ===== 主函数 =====
        void main() {
            // 初始化颜色为黑色，完全不透明
            // vec4(r,g,b,a) - 前三个是RGB颜色，最后一个是透明度
            vec4 color = vec4(vec3(0.0), 1.0);
            
            // ===== 多光源光照计算循环 =====
            // 遍历所有启用的点光源
            // 注意：GLSL循环的迭代次数必须是编译时常量
            // int(pointLightsCount)将浮点数转换为整数
            for (int x = 0; x < int(pointLightsCount); x++) {
                // 计算从表面点到光源的向量
                vec3 offset = lightPosition[x].xyz - vPositionEye;
                
                // 标准化得到方向向量
                vec3 dirToLight = normalize(offset);
                
                // 计算距离
                float distance = length(offset);

                // 计算漫反射分量（Lambert光照模型）
                // dot(vNormalEye, dirToLight): 法线与光照方向的点积
                // max(0.0, ...): 确保结果不为负（背面不受光）
                float diffuse = max(0.0, dot(vNormalEye, dirToLight));
                
                // 计算平方反比衰减（物理正确）
                float attenuation = 1.0 / (distance * distance);
                
                // 计算光照权重，结合颜色和衰减
                // 使用Three.js的衰减函数，参数：距离，截止距离4.0，衰减指数0.7
                vec3 lightWeighting = lightColor[x].xyz * getDistanceAttenuation(distance, 4.0, 0.7);
                
                // 累加当前光源的贡献到总颜色
                // 注意：这里应该乘以diffuse，但代码中漏掉了，所以没有漫反射效果
                color.rgb += lightWeighting;
            }
            
            // 输出最终颜色
            fragColor = color;
            
            // 调试：可以取消下面的注释来可视化法线或位置
            // fragColor = vec4(vNormalEye * 0.5 + 0.5, 1.0); // 法线可视化
            // fragColor = vec4(vPositionEye * 0.1, 1.0); // 位置可视化
        }
    </script>

    <!-- ==================== 模块导入映射配置 ==================== -->
    <!-- importmap是现代浏览器中的模块解析机制 -->
    <!-- 它告诉浏览器如何解析模块导入语句 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- ==================== 主JavaScript模块 ==================== -->
    <!-- type="module"表示这是ES6模块，具有模块作用域 -->
    <script type="module">
        // ===== 模块导入 =====
        // 导入Three.js核心库的所有导出
        import * as THREE from 'three';
        // 导入性能监视器（显示FPS、内存使用等）
        import Stats from 'three/addons/libs/stats.module.js';
        // 导入轨道控制器（用鼠标控制相机旋转、缩放）
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        // 导入轻量级GUI库（用于创建控制面板）
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        // ===== 全局变量声明 =====
        // 核心Three.js对象
        let camera;      // 相机：定义观察者的位置和视角
        let scene;       // 场景：包含所有3D对象的容器
        let renderer;    // 渲染器：负责将3D场景绘制到2D Canvas上
        let clock;       // 时钟：用于计算时间差，实现动画
        let stats;       // 性能监视器实例
        
        // 光照相关变量
        let lightingUniformsGroup;  // 光照Uniform缓冲组
        let lightCenters;           // 光源中心位置数组（用于圆周运动动画）

        // 获取DOM容器元素
        const container = document.getElementById('container');

        // ===== 常量定义 =====
        // 最大点光源数量，对应着色器中的数组大小
        // 这个值会在编译时传递给着色器作为宏定义
        const pointLightsMax = 300;

        // ===== GUI控制API对象 =====
        // 这些属性将与GUI控件绑定
        const api = {
            count: 200,  // 当前启用的点光源数量（默认200个）
        };

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

        // ===== 初始化函数定义 =====
        function init() {
            // ----- 1. 初始化相机 -----
            // 创建透视相机
            // 参数：视野角度(FOV), 宽高比, 近裁剪面, 远裁剪面
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
            // 设置相机初始位置 (x, y, z)
            camera.position.set(0, 50, 50);
            
            // ----- 2. 初始化场景 -----
            scene = new THREE.Scene();
            // 设置相机看向场景中心点
            camera.lookAt(scene.position);

            // ----- 3. 初始化时钟 -----
            // 用于获取经过的时间，实现与帧率无关的动画
            clock = new THREE.Clock();

            // ----- 4. 创建基础几何体 -----
            // 球体几何体，用于创建网格球体
            // 默认半径1，分段数32
            const geometry = new THREE.SphereGeometry();

            // ===== 创建Uniform缓冲组 =====
            
            // ----- 4.1 光照数据Uniform组 -----
            lightingUniformsGroup = new THREE.UniformsGroup();
            // 设置名称，必须与着色器中的uniform块名称匹配
            lightingUniformsGroup.setName('LightingData');

            // 创建存储数组
            const data = [];          // 光源位置Uniform数组
            const dataColors = [];    // 光源颜色Uniform数组
            lightCenters = [];        // 光源中心位置数组（用于动画）

            // 初始化所有点光源数据
            for (let i = 0; i < pointLightsMax; i++) {
                // 生成随机颜色
                // 0xffffff * Math.random()：生成随机RGB值
                const col = new THREE.Color(0xffffff * Math.random()).toArray();
                
                // 生成随机位置
                // Math.random() * 50 - 25：生成-25到25之间的随机数
                const x = Math.random() * 50 - 25;
                const z = Math.random() * 50 - 25;

                // 创建位置Uniform
                // Vector4(x, y, z, w) - w分量未使用，设置为0
                data.push(new THREE.Uniform(new THREE.Vector4(x, 1, z, 0)));
                
                // 创建颜色Uniform
                // Vector4(r, g, b, a) - a分量未使用，设置为0
                dataColors.push(new THREE.Uniform(new THREE.Vector4(col[0], col[1], col[2], 0)));

                // 存储光源中心位置，用于圆周运动动画
                lightCenters.push({ x, z });
            }

            // 将Uniform添加到组中
            lightingUniformsGroup.add(data);                        // 索引0：光源位置数组
            lightingUniformsGroup.add(dataColors);                  // 索引1：光源颜色数组
            lightingUniformsGroup.add(new THREE.Uniform(pointLightsMax));  // 索引2：最大光源数量

            // ----- 4.2 视图数据Uniform组 -----
            const cameraUniformsGroup = new THREE.UniformsGroup();
            cameraUniformsGroup.setName('ViewData');  // 与着色器中uniform块名称匹配
            cameraUniformsGroup.add(new THREE.Uniform(camera.projectionMatrix));   // 投影矩阵
            cameraUniformsGroup.add(new THREE.Uniform(camera.matrixWorldInverse));  // 视图矩阵

            // ----- 5. 创建原始着色器材质 -----
            // RawShaderMaterial允许完全自定义着色器代码
            const material = new THREE.RawShaderMaterial({
                // 实例特定的Uniform（每个模型不同）
                uniforms: {
                    modelMatrix: { value: null },   // 模型矩阵，每个网格实例不同
                    normalMatrix: { value: null }   // 法线矩阵，每个网格实例不同
                },
                // 材质名称，用于调试
                name: 'Box',
                // 着色器宏定义
                // 这些值会在编译时替换着色器中的宏
                defines: {
                    POINTLIGHTS_MAX: pointLightsMax  // 传递给着色器的数组大小
                },
                // 着色器代码来源
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragmentShader').textContent,
                // 指定GLSL版本
                glslVersion: THREE.GLSL3  // 使用GLSL 3.0，支持Uniform缓冲对象等新特性
            });

            // ----- 6. 创建地面平面 -----
            const plane = new THREE.Mesh(
                // 平面几何体，宽度100，高度100
                new THREE.PlaneGeometry(100, 100),
                // 克隆材质，每个网格需要独立的材质实例
                material.clone()
            );
            // 设置材质的Uniform缓冲组
            plane.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
            // 设置实例特定的Uniform值
            plane.material.uniforms.modelMatrix.value = plane.matrixWorld;
            plane.material.uniforms.normalMatrix.value = plane.normalMatrix;
            // 旋转平面使其水平（Three.js中平面默认是垂直的）
            plane.rotation.x = -Math.PI / 2;
            // 向下移动一点
            plane.position.y = -1;
            // 将平面添加到场景
            scene.add(plane);

            // ----- 7. 创建球体网格阵列 -----
            const gridSize = { x: 10, y: 1, z: 10 };  // 网格尺寸：10×1×10
            const spacing = 6;  // 球体之间的间距

            // 三重循环创建网格阵列
            for (let i = 0; i < gridSize.x; i++) {
                for (let j = 0; j < gridSize.y; j++) {
                    for (let k = 0; k < gridSize.z; k++) {
                        // 创建球体网格
                        const mesh = new THREE.Mesh(geometry, material.clone());
                        mesh.name = 'Sphere';  // 设置对象名称
                        
                        // 设置Uniform缓冲组
                        mesh.material.uniformsGroups = [cameraUniformsGroup, lightingUniformsGroup];
                        
                        // 设置实例特定的Uniform值
                        mesh.material.uniforms.modelMatrix.value = mesh.matrixWorld;
                        mesh.material.uniforms.normalMatrix.value = mesh.normalMatrix;
                        
                        // 添加到场景
                        scene.add(mesh);

                        // 计算球体位置，使整个网格在场景中居中
                        // 公式：当前位置 - (总尺寸/2) = 使网格中心在原点
                        mesh.position.x = i * spacing - (gridSize.x * spacing) / 2;
                        mesh.position.y = 0;  // 在地面上
                        mesh.position.z = k * spacing - (gridSize.z * spacing) / 2;
                    }
                }
            }

            // ----- 8. 初始化WebGL渲染器 -----
            renderer = new THREE.WebGLRenderer({ 
                antialias: true  // 开启抗锯齿，使边缘更平滑
            });
            // 设置渲染器尺寸为窗口尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            // 设置动画循环回调函数
            renderer.setAnimationLoop(animate);
            // 将Canvas元素添加到DOM容器
            container.appendChild(renderer.domElement);

            // ----- 9. 添加窗口大小变化监听器 -----
            window.addEventListener('resize', onWindowResize, false);

            // ----- 10. 初始化轨道控制器 -----
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.enablePan = false;  // 禁用平移操作

            // ----- 11. 初始化性能监视器 -----
            stats = new Stats();
            // 将性能监视器DOM元素添加到页面
            document.body.appendChild(stats.dom);

            // ----- 12. 初始化GUI控制面板 -----
            const gui = new GUI();
            // 添加滑块控制点光源数量
            gui.add(api, 'count', 1, pointLightsMax)
                .step(1)  // 步长为1
                .name('点光源数量')  // 显示名称
                .onChange(function () {
                    // 当滑块值改变时，更新Uniform缓冲组中的光源数量
                    // lightingUniformsGroup.uniforms[2]对应pointLightsCount
                    lightingUniformsGroup.uniforms[2].value = api.count;
                });
            
            // 可以添加更多GUI控制项
            // gui.add(api, 'animationSpeed', 0.1, 2.0).name('动画速度');
            // gui.addColor(api, 'backgroundColor').name('背景颜色').onChange(() => {
            //     scene.background = new THREE.Color(api.backgroundColor);
            // });
        }

        // ===== 窗口大小变化处理函数 =====
        function onWindowResize() {
            // 更新相机的宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            // 更新投影矩阵（必须手动调用）
            camera.updateProjectionMatrix();
            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            // 注意：不需要更新视口，Three.js会自动处理
        }

        // ===== 动画循环函数 =====
        // 每一帧都会调用这个函数
        function animate() {
            // 获取从动画开始到现在经过的时间（秒）
            const elapsedTime = clock.getElapsedTime();

            // 获取光源位置Uniform数组
            // lightingUniformsGroup.uniforms[0]对应lightPosition数组
            const lights = lightingUniformsGroup.uniforms[0];
            
            // 圆周运动参数
            const radius = 5;   // 运动半径
            const speed = 0.5;  // 旋转速度

            // 更新每个光源的位置（实现动画效果）
            for (let i = 0; i < lights.length; i++) {
                const light = lights[i];      // 当前光源的Uniform对象
                const center = lightCenters[i]; // 对应的中心位置

                // 计算圆周运动的当前角度
                // elapsedTime * speed: 时间乘以速度得到角度
                // i * 0.5: 为每个光源添加相位差，形成波浪效果
                const angle = speed * elapsedTime + i * 0.5;
                
                // 计算圆周运动的新位置
                // 正弦函数用于x轴，余弦函数用于z轴
                const x = center.x + Math.sin(angle) * radius;
                const z = center.z + Math.cos(angle) * radius;

                // 更新光源位置
                // set(x, y, z, w) - y保持为1（地面高度），w为0（未使用）
                light.value.set(x, 1, z, 0);
            }

            // 渲染场景
            // 将3D场景绘制到Canvas上
            renderer.render(scene, camera);

            // 更新性能监视器显示
            stats.update();
            
            // 可以添加其他每帧需要更新的逻辑
            // 例如：更新相机位置、执行物理计算等
        }
    </script>
</body>
</html>