使用 Three.js 实现【彩虹圆环动画】，具体要求：

【核心特效】
- 极坐标转换实现环形效果
- 动态颜色渐变动画
- 多层圆环叠加效果

【场景与光照】
- 透明背景
- 无光源（纯着色器效果）
- 平面几何体

【交互与控制】
- OrbitControls 视角控制
- 自动播放动画

【技术要求】
- Three.js 版本
- 自定义 ShaderMaterial

void main() {
    vec2 p = (vUv - 0.5) * 2.0;  // 归一化到 [-1, 1]
    float tau = PI * 2.0;
    float a = atan(p.x, p.y);     // 计算角度
    float r = length(p) * 0.75;   // 计算半径并缩放
    vec2 uv = vec2(a / tau, r);   // 转换为极坐标
}

// 获取颜色 - 根据角度计算彩虹色
float xCol = (uv.x - (iTime / 3.0)) * 3.0;
xCol = mod(xCol, 3.0);
vec3 horColour = vec3(0.25, 0.25, 0.25);

if (xCol < 1.0) {
    horColour.r += 1.0 - xCol;
    horColour.g += xCol;
} else if (xCol < 2.0) {
    xCol -= 1.0;
    horColour.g += 1.0 - xCol;
    horColour.b += xCol;
} else {
    xCol -= 2.0;
    horColour.b += 1.0 - xCol;
    horColour.r += xCol;
}

// 绘制彩色光束
uv = (2.0 * uv) - 1.0;
float beamWidth = (0.7 + 0.5 * cos(uv.x * 10.0 * tau * 0.15 * 
    clamp(floor(5.0 + 10.0 * cos(iTime)), 0.0, 10.0))) * abs(1.0 / (30.0 * uv.y));
vec3 horBeam = vec3(beamWidth); 
gl_FragColor = vec4(((horBeam) * horColour), 1.0);