使用 Three.js 实现【递归分形网格着色器】，具体要求：

【核心特效】
- 递归分形图案生成
- 动态色彩变化
- 指数衰减的距离场效果

【场景与光照】
- 网格辅助线
- 环境光照明

【交互与控制】
- OrbitControls 轨道控制器

【技术要求】
- Three.js 最新版本
- ShaderMaterial 自定义着色器
- 数学函数调色板

vec3 palette(float t){
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.263, 0.416, 0.557);
    return a + b * cos(PI * 2.0 * (c * t + d));
}

vec4 mainImage(){
    vec3 finalColor = vec3(0.0);
    vec2 uuv = vUv * 2.0 - 1.0;
    vec2 uv = vUv * 2.0 - 1.0;
    
    for(float i = 0.0; i < 4.0; i++){
        uv = fract(uv * 1.5) - 0.5;          // 缩放并偏移UV
        float d = length(uv) * exp(-length(uuv));  // 指数衰减距离
        
        vec3 col = palette(length(uuv) + i * 0.4 + iTime * 0.4);
        
        d = sin(d * 8.0 + iTime) / 8.0;      // 添加时间波动
        d = abs(d);
        d = pow(0.01 / d, 1.2);              // 对比度增强
        
        finalColor += col * d;
    }
    return vec4(finalColor, 1.0);
}

class Base {
    constructor() {
        this.init();
        this.main();
    }
    
    init() {
        this.clock = new THREE.Clock();
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        // ... 初始化相机、场景、控制器
    }
    
    animate() {
        this.controls.update();
        this.renderer.render(this.scene, this.camera);
        this.material.uniforms.iTime.value += 0.01;
    }
}