使用 Three.js 实现**环形着色器**，具体要求：

【核心特效】
- 极坐标变换实现环形图案
- 双层火焰环形叠加
- 鼠标控制内圆大小
- 动态噪声扰动

【场景与光照】
- 深色背景
- OrbitControls 轨道控制器
- 自定义着色器实现火焰环形效果

【交互与控制】
- OrbitControls 鼠标拖拽旋转
- 鼠标滚轮缩放
- 鼠标X轴位置控制内圆半径

【技术要求】
- Three.js 版本 (ES Module)
- 自定义 ShaderMaterial 实现极坐标变换
- GLSL 噪声函数和火焰着色
- 实时鼠标交互

vec2 polarMap(vec2 uv, float shift, float inner) {
  uv = vec2(0.5) - uv;
  float px = 1.0 - fract(atan(uv.y, uv.x) / 6.28 + 0.25) + shift;
  float py = (sqrt(uv.x * uv.x + uv.y * uv.y) * (1.0 + inner * 2.0) - inner) * 2.0;
  return vec2(px, py);
}

float fire(vec2 n) {
  return noise(n) + noise(n * 2.1) * .6 + noise(n * 5.4) * .42;
}

float shade(vec2 uv, float t) {
  uv.x += uv.y < .5 ? 23.0 + t * .035 : -11.0 + t * .03;
  uv.y = abs(uv.y - .5);
  uv.x *= 35.0;
  float q = fire(uv - t * .013) / 2.0;
  vec2 r = vec2(fire(uv + q / 2.0 + t - uv.x - uv.y), fire(uv + q - t));
  return pow((r.y + r.y) * max(.0, uv.y) + .1, 4.0);
}

void main() {
  vec2 uv = vUv;
  float ff = 1.0 - uv.y;
  uv.x -= (iResolution.x / iResolution.y - 1.0) / 2.0;
  vec2 uv2 = uv;
  uv2.y = 1.0 - uv2.y;
  uv = polarMap(uv, 1.3, m1);
  uv2 = polarMap(uv2, 1.9, m1);

  vec3 c1 = color(shade(uv, t)) * ff;
  vec3 c2 = color(shade(uv2, t)) * (1.0 - ff);

  gl_FragColor = vec4(c1 + c2, 1.0);
}

const { mesh, uniforms } = getShaderMesh();

function getShaderMesh() {
  const uniforms = {
    iTime: { value: 0 },
    iResolution: { value: new THREE.Vector2(1900, 1900) },
    iMouse: { value: new THREE.Vector2(0, 0) }
  };

  renderer.domElement.addEventListener('mousemove', (event) => {
    uniforms.iMouse.value.x = event.clientX;
    uniforms.iMouse.value.y = event.clientY;
  });

  // 在着色器中使用 iMouse
  float m1 = iMouse.z < 0.0001 ? 3.6 : iMouse.x * 5.0 / iResolution.x;
}