使用 Three.js 实现可定制颜色的罗盘特效，具体要求：

**核心特效**
- 多层圆环结构
- 辐射状刻度线
- 旋转动画效果
- 三色实时切换
- 动态颜色混合

**场景与光照**
- 自定义深色背景
- PlaneGeometry 全屏
- 2D GLSL 绘制

**交互与控制**
- 颜色选择器面板
- 主色调/次级色调/强调色
- 背景色实时切换

**技术要求**
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial
- PlaneGeometry 1x1
- 2D 几何绘制算法

float circle(float pre, vec2 p, float r1, float r2, float power) {
    float len = length(p);
    float d = min(abs(len - r1), abs(len - r2));
    if (len > r1 && len < r2) pre /= exp(d) / r2;
    float res = power / d;
    return clamp(pre + res, 0.0, 1.0);
}

float rectangle(float pre, vec2 p, vec2 half1, vec2 half2, float power) {
    p = abs(p);
    float dx1 = (p.y < half1.y) ? abs(half1.x - p.x) : length(p - half1);
    float dx2 = (p.y < half2.y) ? abs(half2.x - p.x) : length(p - half2);
    float dy1 = (p.x < half1.x) ? abs(half1.y - p.y) : length(p - half1);
    float dy2 = (p.x < half2.x) ? abs(half2.y - p.y) : length(p - half2);
    float d = min(min(dx1, dx2), min(dy1, dy2));
    float res = power / d;
    return clamp(pre + res, 0.0, 1.0);
}

float radiation(float pre, vec2 p, float r1, float r2, int num, float power) {
    float angle = 2.0 * PI / float(num);
    float d = 1e10;
    for (int i = 0; i < 360; i++) {
        if (i >= num) break;
        float _d = (r1 < p.y && p.y < r2) ? abs(p.x) : min(length(p - vec2(0.0, r1)), length(p - vec2(0.0, r2)));
        d = min(d, _d);
        p = rotate(p, angle);
    }
    float res = power / d;
    return clamp(pre + res, 0.0, 1.0);
}

vec2 rotate(vec2 p, float rad) {
    float c = cos(rad), s = sin(rad);
    return mat2(c, -s, s, c) * p;
}