使用 Three.js 实现能量护盾效果，具体要求：

【核心特效】
- 六边形网格效果
- 护盾脉冲动画
- 能量波动效果

【场景与光照】
- 深蓝色渐变背景
- 自发光效果
- 多种护盾类型

【交互与控制】
- OrbitControls 视角控制
- GUI 参数调节面板
- 实时护盾信息显示

【技术要求】
- Three.js 最新版本
- lil-gui 控制面板

float hexagonGrid(vec2 uv, float size) {
  vec2 grid = uv * size * 10.0;
  vec2 hex = fract(grid);
  float hexagon = 1.0 - smoothstep(0.0, 0.1, length(hex - 0.5));
  return hexagon * 0.3;
}

void main() {
  float pulse = sin(uTime * uPulseSpeed) * 0.3 + 0.7;
  
  float hexagon = sin(position.x * uHexagonSize * 4.0 + uTime * 0.5) * 
                 cos(position.y * uHexagonSize * 4.0 + uTime * 0.5) *
                 sin(position.z * uHexagonSize * 4.0 + uTime * 0.5);
  
  vec3 newPosition = position + normal * (pulse + hexagon) * 0.2 * uShieldStrength;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

float energyWave(vec2 uv, float strength) {
  float wave = 0.0;
  wave += sin(uv.x * 8.0 + uTime * 2.0) * cos(uv.y * 8.0 + uTime * 2.0);
  wave += sin(uv.x * 12.0 + uTime * 3.0) * cos(uv.y * 12.0 + uTime * 3.0) * 0.5;
  return wave * strength;
}

vec3 getShieldType(int type) {
  if(type == 0) {
    return vec3(0.0, 0.5, 1.0);      // 蓝色
  } else if(type == 1) {
    return vec3(0.0, 1.0, 0.5);      // 绿色
  } else {
    return vec3(0.8, 0.2, 1.0);      // 紫色
  }
}