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

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

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

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

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

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);
    }
};