使用 Three.js 实现【马赛克滤镜效果】，具体要求：

【核心特效】
- UV坐标量化实现马赛克
- 可调节马赛克块大小
- 实时预览效果

【场景与光照】
- 深色背景
- 无需光源（纹理自发光）

【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节马赛克尺寸

【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- TextureLoader 加载图片

---

# 📖 效果拆解

| 层次 | 视觉效果 | 技术实现 |
|------|----------|----------|
| 基础 | 平面几何体 | PlaneGeometry(1, 1) |
| 核心特效 | 马赛克效果 | UV坐标量化取整 |
| 交互 | 参数调节 | lil-gui 控制面板 |
| 响应式 | 自适应图片比例 | 根据纹理尺寸调整平面缩放 |

---

# 🔧 核心技术点

## 1. **马赛克算法核心**

通过量化UV坐标实现像素化效果，将连续的UV坐标转换为离散的块状坐标。

```glsl
void main() {
    vec2 vUv2 = vUv;
    
    // X方向量化 - 将UV坐标按马赛克大小取整
    vUv2.x = floor(vUv2.x * vScreenSize.x / fMosaicScale) / 
             (vScreenSize.x / fMosaicScale) + 
             (fMosaicScale / 2.0) / vScreenSize.x;
    
    // Y方向量化
    vUv2.y = floor(vUv2.y * vScreenSize.y / fMosaicScale) / 
             (vScreenSize.y / fMosaicScale) + 
             (fMosaicScale / 2.0) / vScreenSize.y;
    
    // 从处理后的UV坐标采样纹理颜色
    vec4 color = texture2D(tDiffuse, vUv2);
    gl_FragColor = color;
}

textureLoader.load(
    `/files/author/AivoGenX.png`,
    (texture) => {
        uniforms.tDiffuse.value = texture;
        loadingIndicator.classList.add("hidden");
    },
    (xhr) => {
        const percent = Math.round((xhr.loaded / xhr.total) * 100);
        loadingIndicator.textContent = `加载中: ${percent}%`;
    },
    (error) => {
        console.error("图片加载错误:", error);
        loadingIndicator.textContent = "图片加载失败";
    }
);

material.onBeforeCompile = (shader) => {
    if (uniforms.tDiffuse.value) {
        const aspect = uniforms.tDiffuse.value.image.width / 
                      uniforms.tDiffuse.value.image.height;
        mesh.scale.set(aspect, 1, 1);
    }
};