使用 Three.js 实现**交互式着色器效果**，具体要求：

【核心特效】
- 五种交互模式：涟漪效果、粒子跟随、画笔效果、引力场、声音可视化
- 实时响应鼠标/触摸输入
- 点击产生扩散涟漪
- 鼠标速度影响效果强度

【场景与光照】
- 深蓝色背景 (#0f0f23 → #1e1e3f 径向渐变)
- OrbitControls 自由视角控制
- 自定义着色器实现交互反馈

【交互与控制】
- 鼠标移动：控制效果方向
- 鼠标点击：触发涟漪扩散
- 鼠标拖拽：绘制轨迹
- GUI 面板切换交互类型、调节灵敏度和衰减

【技术要求】
- Three.js 版本 (ES Module)
- 自定义顶点着色器实现交互变形
- 自定义片元着色器实现五种交互效果
- 完整的鼠标和触摸事件处理

float rippleEffect(vec2 pos) {
  vec2 clickPos = vec2(uClickX, uClickY);
  float distanceToClick = length(pos - clickPos);
  float waveSpeed = 2.0;
  float waveFront = uTimeSinceClick * waveSpeed;
  float waveWidth = 0.3;
  float wave = smoothstep(waveFront - waveWidth, waveFront, distanceToClick) -
              smoothstep(waveFront, waveFront + waveWidth, distanceToClick);
  wave *= exp(-distanceToClick * 2.0);
  return wave * uMouseDown;
}

float particleFollow(vec2 pos) {
  vec2 mousePos = vec2(uMouseX, uMouseY);
  float distanceToMouse = length(pos - mousePos);
  float attraction = 1.0 / (1.0 + distanceToMouse * 10.0);
  float noise = sin(pos.x * 20.0 + uTime * 3.0) * 0.1;
  attraction += noise;
  return attraction;
}

float brushEffect(vec2 pos) {
  vec2 mousePos = vec2(uMouseX, uMouseY);
  float distanceToMouse = length(pos - mousePos);
  float brushSize = 0.1;
  float brush = 1.0 - smoothstep(0.0, brushSize, distanceToMouse);
  return brush;
}

float gravityField(vec2 pos) {
  vec2 mousePos = vec2(uMouseX, uMouseY);
  float distanceToMouse = length(pos - mousePos);
  float gravity = 1.0 / (distanceToMouse * distanceToMouse + 0.01);
  float angle = atan(pos.y - mousePos.y, pos.x - mousePos.x);
  float swirl = sin(angle * 3.0 + uTime * 2.0) * 0.5 + 0.5;
  return gravity * swirl;
}

const interactionState = {
  mouseX: 0.0,
  mouseY: 0.0,
  mouseDown: false,
  clickPosition: new THREE.Vector2(0, 0),
  timeSinceClick: 0.0,
  velocity: new THREE.Vector2(0, 0),
};

renderer.domElement.addEventListener('mousemove', (event) => {
  interactionState.mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  interactionState.mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  const deltaX = interactionState.mouseX - interactionState.dragPosition.x;
  const deltaY = interactionState.mouseY - interactionState.dragPosition.y;
  interactionState.velocity.x = deltaX * 10;
  interactionState.velocity.y = deltaY * 10;
  interactionState.dragPosition.set(interactionState.mouseX, interactionState.mouseY);
});

renderer.domElement.addEventListener('mousedown', (event) => {
  interactionState.mouseDown = true;
  interactionState.clickPosition.set(interactionState.mouseX, interactionState.mouseY);
  interactionState.timeSinceClick = 0.0;
});

function animate() {
  interactionState.timeSinceClick += 0.016;

  material.uniforms.uMouseX.value = interactionState.mouseX;
  material.uniforms.uMouseY.value = interactionState.mouseY;
  material.uniforms.uMouseDown.value = interactionState.mouseDown ? 1.0 : 0.0;
  material.uniforms.uClickX.value = interactionState.clickPosition.x;
  material.uniforms.uClickY.value = interactionState.clickPosition.y;
  material.uniforms.uTimeSinceClick.value = interactionState.timeSinceClick;
  material.uniforms.uVelocityX.value = interactionState.velocity.x;
  material.uniforms.uVelocityY.value = interactionState.velocity.y;

  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}