使用 Three.js 实现**虚拟现实效果着色器**，具体要求：

【核心特效】
- 多层正弦/余弦叠加的虚拟现实场
- 动态像素粒子效果
- 增强现实/虚拟现实/混合现实三种模式切换
- 沉浸度、分辨率、像素密度等参数可调

【场景与光照】
- 紫色系主题背景 (#663366 → #331133 径向渐变)
- OrbitControls 轨道控制器
- 自定义着色器实现全息效果

【交互与控制】
- OrbitControls 鼠标拖拽旋转
- 鼠标滚轮缩放
- GUI 面板实时调节所有参数
- 实时显示沉浸度和分辨率状态

【技术要求】
- Three.js 版本 (ES Module)
- 自定义顶点着色器实现顶点位移
- 自定义片元着色器实现多层VR场和像素效果
- lil-gui 参数控制

float virtualReality(vec2 uv, float immersion) {
  float vrField = 0.0;
  vrField += sin(uv.x * 4.0 + uTime * 0.3) * cos(uv.y * 6.0 + uTime * 0.5);
  vrField += sin(uv.x * 6.0 + uTime * 0.7) * cos(uv.y * 8.0 + uTime * 0.9) * 0.7;
  vrField += sin(uv.x * 8.0 + uTime * 1.1) * cos(uv.y * 10.0 + uTime * 1.3) * 0.4;
  return vrField * immersion;
}

float pixels(vec2 uv, float density) {
  float pixelField = 0.0;
  for(int i = 0; i < 20; i++) {
    vec2 pixelPos = vec2(
      noise(vec2(float(i) * 0.123, 0.456)),
      noise(vec2(float(i) * 0.456, 0.789))
    );
    float dist = distance(uv, pixelPos);
    float pixelSize = noise(vec2(float(i) * 0.789, 0.123)) * 0.04 + 0.02;
    float pixelLife = mod(uTime * 1.5 + float(i) * 8.0, 6.28);
    float pixelIntensity = sin(pixelLife) * 0.7 + 0.3;
    pixelField += exp(-dist * 45.0) * pixelIntensity * density;
  }
  return pixelField;
}

uniform float uImmersionLevel;
uniform float uResolution;
uniform float uRefreshRate;

void main() {
  float immersion = sin(position.x * 3.0 + uTime * uImmersionLevel) *
                   cos(position.y * 4.0 + uTime * uImmersionLevel * 0.8) *
                   sin(position.z * 3.0 + uTime * uImmersionLevel * 0.6);
  float resolution = sin(position.x * 5.0 + uTime * uResolution * 2.0) *
                    cos(position.z * 5.0 + uTime * uResolution * 2.0);
  float refresh = sin(position.x * uRefreshRate * 6.0) *
                 cos(position.y * uRefreshRate * 8.0);
  vec3 newPosition = position + normal * (immersion + resolution * 0.5 + refresh * 0.3) * 0.15;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

vec3 getVrType(int type) {
  if(type == 0) {
    return vec3(0.2, 0.8, 0.4);  // 增强现实 - 绿色
  } else if(type == 1) {
    return vec3(0.2, 0.6, 1.0);  // 虚拟现实 - 蓝色
  } else {
    return vec3(1.0, 0.4, 0.2);   // 混合现实 - 橙色
  }
}

const vrParams = {
  immersionLevel: 0.8,
  resolution: 0.7,
  pixelDensity: 0.6,
  glowIntensity: 1.2,
  refreshRate: 0.8,
  vrType: 0,
  showPixels: true
};

const gui = new GUI();
gui.add(vrParams, 'immersionLevel', 0, 1).name('沉浸度');
gui.add(vrParams, 'resolution', 0, 1).name('分辨率');
gui.add(vrParams, 'pixelDensity', 0, 1).name('像素密度');
gui.add(vrParams, 'vrType', { '增强现实': 0, '虚拟现实': 1, '混合现实': 2 }).name('VR类型');