使用 Three.js 实现【图像扭曲滤镜效果】，具体要求：

【核心特效】
- 基于随机噪声的图像扭曲
- 可调节扭曲程度参数
- 实时预览滤镜效果

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

【交互与控制】
- OrbitControls 轨道控制器
- GUI 面板调节扭曲程度

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

float generateRandom(vec2 co) {
    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
    // 将UV坐标转换为像素坐标
    vec2 pixelCoord = v_uv * u_resolution;
    
    // 生成随机偏移值
    float randomX = generateRandom(v_uv) * u_distortion * 2.0 - u_distortion;
    float randomY = generateRandom(vec2(v_uv.y, v_uv.x)) * u_distortion * 2.0 - u_distortion;
    
    // 应用随机偏移
    vec2 distortedCoord = (pixelCoord + vec2(randomX, randomY)) / u_resolution;
    
    // 从纹理中采样颜色
    vec4 finalColor = texture2D(u_texture, distortedCoord);
    gl_FragColor = finalColor;
}

const onWindowResize = () => {
    this.uniforms.u_resolution.value.set(
        this.container.clientWidth,
        this.container.clientHeight
    );
};
window.addEventListener("resize", onWindowResize);