<!-- 一、代码功能概述
这是一个基于Three.js的屏幕空间反射(Screen Space Reflection, SSR)技术演示应用。它创建了一个交互式3D场景，展示实时反射效果，并提供了丰富的参数调节功能。

主要功能模块：
3D场景展示

包含一个兔子模型（DRACO压缩格式）

多个测试几何体（立方体、二十面体、圆锥体）

地面平面和雾效环境

动态光照系统

屏幕空间反射效果

实时计算物体间的反射关系

地面反射增强（使用专用反射器）

多种反射参数可调

交互控制

鼠标拖拽/缩放/旋转查看场景

自动旋转相机模式

实时参数调节面板

性能监控显示

渲染模式切换

可开关SSR效果对比

多种渲染缓冲区可视化模式

分辨率和质量调节

二、主要技术点详解
1. 屏幕空间反射(SSR)技术
text
工作原理：
1. 从屏幕像素出发，沿反射方向发射射线
2. 与深度缓冲区进行相交测试
3. 找到相交点并采样对应颜色
4. 应用菲涅尔、距离衰减等物理效果
5. 混合到原始场景

技术特点：
- 基于屏幕空间：只能反射屏幕内可见内容
- 性能较高：相比传统反射平面，消耗更可控
- 伪影问题：存在边缘缺失、采样噪点等典型问题
2. Three.js核心架构
javascript
// 三大核心组件
1. 场景(Scene)：容器，管理所有3D对象
2. 相机(Camera)：观察者视角，控制可见范围
3. 渲染器(Renderer)：将3D转换为2D图像

// 核心渲染流程
原始渲染 → 深度/法线缓冲区生成 → SSR计算 → 后期混合 → 最终输出
3. 后期处理管线
javascript
EffectComposer工作流程：
┌─────────────────────────────────────────┐
│ 原始场景渲染通道 (隐式)                  │
├─────────────────────────────────────────┤
│ SSR计算通道                              │
│  - 采样深度/法线缓冲区                   │
│  - 射线追踪计算反射                      │
│  - 应用反射参数（厚度、衰减等）           │
├─────────────────────────────────────────┤
│ 输出通道：混合SSR到原始场景               │
└─────────────────────────────────────────┘
4. 关键技术实现细节
a. 深度缓冲区利用
javascript
// SSR的核心是深度缓冲区
深度缓冲区 → 3D空间位置重建 → 射线相交测试

优点：
- 无需额外的几何体信息
- 硬件加速，性能好
- 与延迟渲染兼容性好
b. 反射器优化
javascript
// ReflectorForSSRPass专用反射器
特殊功能：
1. 深度纹理支持：提高反射精度
2. 裁剪偏置：避免z-fighting
3. 参数同步：与SSRPass共享菲涅尔、衰减等参数
4. 隐藏渲染：只用于计算，不直接显示
c. 性能优化策略
javascript
1. 分辨率缩放：降低SSR计算分辨率
2. DRACO压缩：模型文件大小减少60-90%
3. 可选功能：可关闭地面反射器、多次反射等
4. 抗锯齿策略：SSR后处理替代MSAA
5. 物理效果模拟
菲涅尔效应(Fresnel Effect)
text
公式：R(θ) = R₀ + (1 - R₀)(1 - cosθ)⁵
实现：视线与表面法线夹角越大，反射越强
用途：模拟水和金属的真实反射特性
距离衰减
javascript
// 反射强度随距离增加而减弱
衰减公式：I = I₀ × e^(-k×d)
实现：maxDistance参数控制衰减范围
表面粗糙度模拟
javascript
// 通过模糊实现粗糙表面反射
实现方式：
1. 采样周围多个点
2. 加权平均颜色
3. 可调节模糊强度
6. 交互与调试功能
GUI参数调节
javascript
调节类别：
1. 基础控制：开关、旋转、显示
2. 反射参数：厚度、距离、不透明度
3. 物理效果：菲涅尔、衰减、模糊
4. 调试视图：深度图、法线图等
可视化模式
javascript
OUTPUT模式：
- Default：最终效果
- SSR Only：只显示反射部分
- Beauty：原始场景（无SSR）
- Depth：深度缓冲区可视化
- Normal：法线缓冲区可视化
- Metalness：材质金属度可视化
7. 资源管理与优化
DRACO模型加载
javascript
工作流程：
1. 异步加载压缩的.drc文件
2. 使用WebAssembly解码器解压
3. 计算法线等附加数据
4. 释放解码器内存
纹理管理
javascript
纹理系统：
1. 渲染目标：存储中间计算结果
2. 深度纹理：用于SSR射线检测
3. 反射纹理：地面反射器的专用纹理
4. 动态调整：窗口大小改变时重建
8. 渲染质量与性能平衡
javascript
质量调节参数：
1. resolutionScale：分辨率（0-1）
   - 1.0：全分辨率，质量最高
   - 0.5：半分辨率，性能提升4倍
   
2. thickness：射线厚度容差
   - 太小：反射缺失
   - 太大：错误反射
   
3. maxDistance：最大反射距离
   - 控制性能消耗
   - 影响视觉效果范围
三、技术难点与解决方案
1. 边缘缺失问题
text
问题：屏幕边缘物体反射不完整
原因：反射内容超出屏幕范围
解决方案：
- 使用地面反射器补充
- 调整相机视角避免
2. 性能瓶颈
text
瓶颈点：
1. 射线步进计算
2. 深度缓冲区采样
3. 多次反射计算

优化方案：
- 限制最大步进次数
- 降低分辨率
- 选择性启用高级功能
3. 伪影处理
javascript
常见伪影：
1. 噪点：采样不足
   → 增加采样次数或使用模糊

2. 断裂：深度不连续
   → 调整厚度参数

3. 闪烁：时间相干性
   → 增加帧间混合（未实现）
四、应用场景与扩展
1. 适用场景
游戏开发：水面、镜子、光滑地面

产品展示：汽车漆面、珠宝反射

建筑可视化：玻璃幕墙、大理石地板

教育演示：光学物理教学

2. 可扩展方向
javascript
扩展功能：
1. 时间抗锯齿(TAA)：减少闪烁
2. 半透明反射：支持玻璃材质
3. 平面反射混合：结合传统反射
4. 动态模糊：运动物体反射模糊
5. 多分辨率：根据距离调整质量
3. 性能指标参考
text
测试环境：现代GPU
- 基础渲染：60 FPS
- SSR全开：30-45 FPS
- 半分辨率：45-60 FPS
- 无地面反射器：提升10-15 FPS
五、学习价值
这个代码示例提供了：

完整的SSR实现：从原理到实践的完整流程

可调式架构：每个参数都可以实时调整观察效果

性能优化示例：展示了实际项目中的优化策略

Three.js最佳实践：模块化、异步加载、内存管理

图形学教学工具：可视化不同渲染缓冲区，帮助理解底层原理 -->


<!DOCTYPE html>
<html lang="zh-CN"> <!-- 修改为中文语言 -->

<head>
    <head>
        <!-- 修改标题为中文 -->
        <title>Three.js WebGL - 后期处理 - 屏幕空间反射(SSR)演示</title>
        <meta charset="utf-8">
        <!-- 视口设置：适应设备宽度，禁用用户缩放，设置最小和最大缩放比例 -->
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="main.css">
    </head>

<body>
    <!-- Three.js渲染的3D场景容器 -->
    <div id="container"></div>
    <!-- 修改信息区域为中文 -->
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> -
        屏幕空间反射(SSR)演示 by <a href="https://github.com/gonnavis" target="_blank">Vis</a>.<br />
        屏幕空间反射是一种实时渲染技术，用于在3D场景中模拟表面的反射效果。
    </div>

    <!-- 导入映射(Import Map)：定义模块导入的别名和路径 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <script type="module">
        // ==================== 导入Three.js核心模块 ====================
        import * as THREE from 'three';

        // ==================== 导入第三方库和插件 ====================
        // 性能监控器：显示FPS、渲染时间等性能指标
        import Stats from 'three/addons/libs/stats.module.js';

        // 轨道控制器：允许用户用鼠标拖拽、缩放、旋转查看3D场景
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // GUI控制面板：创建可交互的参数调节界面
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
        
        // ==================== 导入后期处理相关组件 ====================
        // EffectComposer：后期处理合成器，管理和执行多个后期处理效果
        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
        // SSRPass：屏幕空间反射(SSR)的后期处理通道
        import { SSRPass } from 'three/addons/postprocessing/SSRPass.js';
        // OutputPass：输出通道，将处理后的结果输出到屏幕
        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
        // ReflectorForSSRPass：专门为SSR优化的反射平面对象
        import { ReflectorForSSRPass } from 'three/addons/objects/ReflectorForSSRPass.js';

        // ==================== 导入模型加载器 ====================
        // DRACOLoader：用于加载Google开发的DRACO压缩格式的3D模型（文件更小，加载更快）
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

        // ==================== 全局参数配置对象 ====================
        // 这些参数可以通过GUI界面动态调整
        const params = {
            enableSSR: true,        // 是否启用屏幕空间反射效果
            autoRotate: true,       // 是否启用相机自动旋转
            otherMeshes: true,      // 是否显示场景中的其他测试几何体
            groundReflector: true,  // 是否启用地面反射器（特殊的反射平面）
        };

        // ==================== 全局变量声明 ====================
        let composer;      // 后期处理合成器实例
        let ssrPass;       // SSR后期处理通道实例
        let gui;           // GUI控制面板实例
        let stats;         // 性能统计器实例
        let controls;      // 轨道控制器实例
        let camera;        // 3D相机（观察者视角）
        let scene;         // 3D场景（包含所有3D对象）
        let renderer;      // WebGL渲染器（负责将3D场景绘制到2D屏幕上）
        
        const otherMeshes = [];    // 存储场景中额外创建的测试几何体（立方体、圆锥体等）
        let groundReflector;       // 地面反射器实例（用于增强地面反射效果）
        const selects = [];        // 可被SSR反射的对象数组（兔子模型和测试几何体）

        // 获取HTML页面中用于显示3D场景的DOM容器元素
        const container = document.querySelector('#container');

        // ==================== 初始化DRACO加载器 ====================
        // DRACO是Google开发的一种3D模型压缩格式，可以显著减小文件大小
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('jsm/libs/draco/');  // 设置DRACO解码器文件的路径
        dracoLoader.setDecoderConfig({ type: 'js' });   // 配置使用JavaScript版本解码器（也可用WebAssembly版）

        // ==================== 调用初始化函数 ====================
        init();

        /**
         * 主初始化函数 - 设置整个3D应用程序
         * 这个函数负责创建所有Three.js对象、设置场景、灯光、相机、控制器等
         */
        function init() {
            // ==================== 创建相机 ====================
            // PerspectiveCamera：透视相机，模拟人眼视角，有近大远小的透视效果
            // 参数：视野角度(FOV)、宽高比、近裁剪面、远裁剪面
            camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 15);
            // 设置相机初始位置（x, y, z坐标）
            camera.position.set(0.13271600513224902, 0.3489546826045913, 0.43921296427927076);

            // ==================== 创建场景 ====================
            scene = new THREE.Scene();
            // 设置场景背景颜色（深褐色）
            scene.background = new THREE.Color(0x443333);
            // 添加雾效：模拟远处物体逐渐淡出的效果，增强场景深度感
            // 参数：雾的颜色、近处雾的起始距离、远处雾的完全覆盖距离
            scene.fog = new THREE.Fog(0x443333, 1, 4);

            // ==================== 创建地面平面 ====================
            // PlaneGeometry：平面几何体，参数：宽度、高度
            const planeGeometry = new THREE.PlaneGeometry(8, 8);
            // MeshPhongMaterial：Phong材质，支持高光反射，适合表现光滑表面
            const planeMaterial = new THREE.MeshPhongMaterial({ color: 0xcbcbcb });
            const plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -Math.PI / 2;  // 旋转-90度（绕X轴），使平面水平放置
            plane.position.y = -0.0001;       // 稍微下移，避免与反射平面产生z-fighting（深度冲突）
            scene.add(plane);

            // ==================== 创建灯光系统 ====================
            // HemisphereLight：半球光，模拟天空和地面的环境光照
            // 参数：天空颜色、地面颜色、光照强度
            const hemiLight = new THREE.HemisphereLight(0x8d7c7c, 0x494966, 3);
            scene.add(hemiLight);

            // SpotLight：聚光灯，模拟有方向性的锥形光照
            const spotLight = new THREE.SpotLight();
            spotLight.intensity = 8;          // 光照强度
            spotLight.angle = Math.PI / 16;   // 光束角度（弧度制），控制光照范围
            spotLight.penumbra = 0.5;         // 半影系数（0-1），控制光照边缘的柔化程度
            spotLight.position.set(-1, 1, 1); // 灯光位置（x, y, z坐标）
            scene.add(spotLight);

            // ==================== 加载DRACO压缩的兔子模型 ====================
            // load()方法：异步加载模型文件
            dracoLoader.load('models/draco/bunny.drc', function (geometry) {
                // 加载完成后的回调函数，geometry参数是解析出的几何体数据
                geometry.computeVertexNormals();  // 计算顶点法线（用于光照计算）

                // 创建标准材质（PBR材质的一种，支持物理正确渲染）
                const material = new THREE.MeshStandardMaterial({ color: 0xa5a5a5 });
                const mesh = new THREE.Mesh(geometry, material);
                mesh.position.y = -0.0365;  // 调整兔子模型的位置（y坐标）
                scene.add(mesh);
                selects.push(mesh);  // 将兔子添加到可反射对象数组中

                // 释放DRACO解码器占用的内存资源
                dracoLoader.dispose();
            });

            // ==================== 创建其他测试几何体 ====================
            // 这些几何体用于测试SSR反射在不同形状和颜色物体上的效果
            let geometry, material, mesh;

            // 1. 创建立方体（绿色）
            geometry = new THREE.BoxGeometry(.05, .05, .05);  // 参数：宽度、高度、深度
            material = new THREE.MeshStandardMaterial({ color: 'green' });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(-.12, .025, .015);  // 设置位置（x, y, z）
            scene.add(mesh);
            otherMeshes.push(mesh);  // 添加到其他几何体数组
            selects.push(mesh);      // 添加到可反射对象数组

            // 2. 创建二十面体（青色）
            // IcosahedronGeometry：二十面体几何体，参数：半径、细分层级
            geometry = new THREE.IcosahedronGeometry(.025, 4);
            material = new THREE.MeshStandardMaterial({ color: 'cyan' });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(-.05, .025, .08);
            scene.add(mesh);
            otherMeshes.push(mesh);
            selects.push(mesh);

            // 3. 创建圆锥体（黄色）
            // ConeGeometry：圆锥体几何体，参数：底面半径、高度、底面分段数
            geometry = new THREE.ConeGeometry(.025, .05, 64);
            material = new THREE.MeshStandardMaterial({ color: 'yellow' });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(-.05, .025, -.055);
            scene.add(mesh);
            otherMeshes.push(mesh);
            selects.push(mesh);

            // ==================== 创建地面反射器 ====================
            // ReflectorForSSRPass：专门为SSR优化的反射平面
            // 它使用特殊的着色器来生成高质量的反射效果
            geometry = new THREE.PlaneGeometry(1, 1);
            groundReflector = new ReflectorForSSRPass(geometry, {
                clipBias: 0.0003,                     // 裁剪偏置：避免反射面与原始表面产生z-fighting
                textureWidth: window.innerWidth,      // 反射纹理的宽度（像素）
                textureHeight: window.innerHeight,    // 反射纹理的高度（像素）
                color: 0x888888,                      // 反射颜色混合系数
                useDepthTexture: true,                // 使用深度纹理：提高反射精度
            });
            groundReflector.material.depthWrite = false;  // 禁用深度写入：防止反射面干扰深度测试
            groundReflector.rotation.x = -Math.PI / 2;    // 旋转到水平位置
            groundReflector.visible = false;              // 初始不可见（只用于反射计算，不直接渲染）
            scene.add(groundReflector);

            // ==================== 创建WebGL渲染器 ====================
            // WebGLRenderer：Three.js的核心渲染器，使用WebGL API进行硬件加速渲染
            renderer = new THREE.WebGLRenderer({ 
                antialias: false  // 关闭抗锯齿（提高性能，SSR本身会进行后处理抗锯齿）
            });
            renderer.setSize(window.innerWidth, window.innerHeight);  // 设置渲染器尺寸为窗口大小
            renderer.setAnimationLoop(animate);  // 设置动画循环回调函数（替代传统的requestAnimationFrame）
            container.appendChild(renderer.domElement);  // 将渲染器的canvas元素添加到DOM中

            // ==================== 创建轨道控制器 ====================
            // OrbitControls：允许用户通过鼠标交互控制相机
            controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;          // 启用阻尼效果：相机移动时有惯性，更自然
            controls.target.set(0, 0.0635, 0);      // 设置控制的目标点（相机围绕这个点旋转）
            controls.update();                       // 手动更新一次控制器状态
            controls.enabled = !params.autoRotate;   // 根据是否启用自动旋转来决定是否启用控制器

            // ==================== 初始化性能监控器 ====================
            stats = new Stats();
            // Stats.js默认显示FPS（帧率）、MS（每帧渲染时间）、MB（内存使用）
            container.appendChild(stats.dom);

            // ==================== 添加窗口大小改变事件监听 ====================
            window.addEventListener('resize', onWindowResize);

            // ==================== 创建后期处理合成器 ====================
            // EffectComposer：后期处理管线的管理器
            composer = new EffectComposer(renderer);
            
            // 创建SSR后期处理通道
            ssrPass = new SSRPass({
                renderer: renderer,         // WebGL渲染器实例
                scene: scene,               // 3D场景
                camera: camera,             // 相机
                width: innerWidth,          // 渲染宽度
                height: innerHeight,        // 渲染高度
                groundReflector: params.groundReflector ? groundReflector : null,  // 地面反射器（可选）
                selects: params.groundReflector ? selects : null                   // 可反射对象（可选）
            });

            // 将处理通道添加到合成器中（按顺序执行）
            composer.addPass(ssrPass);               // 1. SSR处理通道：计算屏幕空间反射
            composer.addPass(new OutputPass());      // 2. 输出通道：将处理结果输出到屏幕

            // ==================== 创建GUI控制面板 ====================
            gui = new GUI({ width: 260 });  // 设置GUI面板宽度
            
            // 添加基础控制选项
            gui.add(params, 'enableSSR').name('启用SSR');  // 开关SSR效果
            
            // 地面反射器开关
            gui.add(params, 'groundReflector').name('启用地面反射器').onChange(() => {
                // 当开关状态改变时的回调函数
                if (params.groundReflector) {
                    // 启用地面反射器：将反射器和可反射对象传递给SSR通道
                    ssrPass.groundReflector = groundReflector;
                    ssrPass.selects = selects;
                } else {
                    // 禁用地面反射器：清空相关参数
                    ssrPass.groundReflector = null;
                    ssrPass.selects = null;
                }
            });
            
            // 配置SSR参数并添加到GUI
            ssrPass.thickness = 0.018;  // 设置反射厚度（控制反射射线检测的深度容差）
            gui.add(ssrPass, 'resolutionScale').name('分辨率缩放').min(0).max(1);  // 降低分辨率可提高性能
            gui.add(ssrPass, 'thickness').name('反射厚度').min(0).max(.1).step(.0001);  // 精细调节厚度
            ssrPass.infiniteThick = false;  // 无限厚度模式（忽略厚度参数）
            gui.add(ssrPass, 'infiniteThick').name('无限厚度');  
            gui.add(params, 'autoRotate').name('自动旋转').onChange(() => {
                // 切换自动旋转时，相应启用或禁用轨道控制器
                controls.enabled = !params.autoRotate;
            });

            // ==================== 创建高级设置折叠面板 ====================
            const folder = gui.addFolder('高级设置');
            
            // 菲涅尔效应：模拟视角越倾斜反射越强的物理现象
            folder.add(ssrPass, 'fresnel').name('菲涅尔强度').onChange(() => {
                groundReflector.fresnel = ssrPass.fresnel;  // 同步到地面反射器
            });
            
            // 距离衰减：反射强度随距离增加而减弱
            folder.add(ssrPass, 'distanceAttenuation').name('距离衰减').onChange(() => {
                groundReflector.distanceAttenuation = ssrPass.distanceAttenuation;
            });
            
            // 最大反射距离：控制反射效果可见的最远距离
            ssrPass.maxDistance = .1;
            groundReflector.maxDistance = ssrPass.maxDistance;
            folder.add(ssrPass, 'maxDistance').name('最大反射距离').min(0).max(.5).step(.001).onChange(() => {
                groundReflector.maxDistance = ssrPass.maxDistance;
            });
            
            // 其他几何体显示开关
            folder.add(params, 'otherMeshes').name('显示测试几何体').onChange(() => {
                if (params.otherMeshes) {
                    otherMeshes.forEach(mesh => mesh.visible = true);
                } else {
                    otherMeshes.forEach(mesh => mesh.visible = false);
                }
            });
            
            // 多次反射：允许光线在多个表面间反射
            folder.add(ssrPass, 'bouncing').name('多次反射');
            
            // 输出模式选择：可以查看不同的渲染缓冲区内容
            folder.add(ssrPass, 'output', {
                '默认模式': SSRPass.OUTPUT.Default,    // 正常渲染结果
                '仅SSR': SSRPass.OUTPUT.SSR,           // 只显示SSR反射部分
                '原始场景': SSRPass.OUTPUT.Beauty,      // 无SSR的原始场景
                '深度图': SSRPass.OUTPUT.Depth,         // 深度缓冲区可视化
                '法线图': SSRPass.OUTPUT.Normal,        // 法线缓冲区可视化
                '金属度图': SSRPass.OUTPUT.Metalness,   // 金属度缓冲区可视化
            }).name('输出模式').onChange(function (value) {
                ssrPass.output = value;  // 更新SSR通道的输出模式
            });
            
            // 反射不透明度：控制反射效果的强度
            ssrPass.opacity = 1;
            groundReflector.opacity = ssrPass.opacity;
            folder.add(ssrPass, 'opacity').name('反射不透明度').min(0).max(1).onChange(() => {
                groundReflector.opacity = ssrPass.opacity;
            });
            
            // 模糊效果：对反射结果进行模糊处理，模拟粗糙表面
            folder.add(ssrPass, 'blur').name('反射模糊');
            
            // folder.open();  // 可以取消注释来自动展开高级设置面板
            // gui.close();    // 可以取消注释来自动关闭GUI面板
        }

        /**
         * 窗口大小改变事件处理函数
         * 当浏览器窗口大小改变时，需要更新相机、渲染器、后期处理合成器等的大小
         */
        function onWindowResize() {
            // 更新相机纵横比（保持正确透视）
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();  // 必须调用此方法使相机参数生效

            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 更新后期处理合成器尺寸
            composer.setSize(window.innerWidth, window.innerHeight);
            
            // 更新地面反射器的渲染目标尺寸
            if (groundReflector) {
                groundReflector.getRenderTarget().setSize(window.innerWidth, window.innerHeight);
                groundReflector.resolution.set(window.innerWidth, window.innerHeight);
            }
        }

        /**
         * 动画循环函数
         * 这是Three.js的渲染循环，每帧都会执行
         */
        function animate() {
            stats.begin();  // 开始性能统计（记录当前帧的开始时间）
            render();       // 执行渲染逻辑
            stats.end();    // 结束性能统计（计算并更新显示）
        }

        /**
         * 渲染函数
         * 负责更新场景状态并执行渲染
         */
        function render() {
            // 根据是否启用自动旋转来更新相机位置
            if (params.autoRotate) {
                // 自动旋转模式：相机围绕场景中心做圆周运动
                const timer = Date.now() * 0.0003;  // 基于时间的计时器（慢速变化）

                // 计算相机在圆形轨道上的位置
                camera.position.x = Math.sin(timer) * 0.5;  // X坐标：正弦函数
                camera.position.y = 0.2135;                 // Y坐标：固定高度
                camera.position.z = Math.cos(timer) * 0.5;  // Z坐标：余弦函数
                camera.lookAt(0, 0.0635, 0);                // 让相机始终看向场景中心点
            } else {
                // 手动控制模式：更新轨道控制器状态
                controls.update();
            }

            // 根据SSR启用状态选择渲染方式
            if (params.enableSSR) {
                // 启用SSR：使用后期处理合成器进行渲染
                // SSR渲染流程：
                // 1. 渲染原始场景到纹理
                // 2. SSRPass计算反射信息
                // 3. 将反射混合到原始场景
                // 4. OutputPass输出最终结果
                composer.render();
                
                // TODO注释（开发者笔记）：
                // 1. 地面反射器包含完整的地面信息，可以用它来解决当相机靠近地面时物体反射出现间隙的问题
                // 2. 需要修改地面反射器反射区域的法线和深度信息，使其更准确
            } else {
                // 禁用SSR：直接使用渲染器渲染原始场景（性能更高）
                renderer.render(scene, camera);
            }
        }
    </script>
</body>

</html>