使用 Three.js 实现图片抖动粒子特效，具体要求：

**核心特效**
- 将图片解析为像素数据
- 根据像素亮度生成粒子深度分布
- 粒子系统沿 Z 轴周期性抖动
- 保留原图色彩信息

**场景与光照**
- 黑色背景
- 坐标轴辅助线辅助调试
- AmbientLight 环境光

**交互与控制**
- TrackballControls 自由旋转缩放
- 相机距离 3000 单位

**技术要求**
- Three.js 版本 (ES Module)
- TrackballControls 控制器
- Canvas 2D Context 解析图片
- 自定义 ShaderMaterial 处理粒子颜色和抖动

function createPixelData() {
    var image = document.createElement("img");
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    image.onload = function () {
        canvas.width = image.width;
        canvas.height = image.height;
        context.fillStyle = context.createPattern(image, 'no-repeat');
        context.fillRect(0, 0, imageWidth, imageHeight);
        // 获取像素 RGBA 数据
        imageData = context.getImageData(0, 0, imageWidth, imageHeight).data;
        createPaticles();
    };
    image.src = "https://img1.baidu.com/it/u=232967222,3421933282...";
}

var weights = [0.2126, 0.7152, 0.0722];  // RGB 转亮度系数
// 遍历每个像素
for (var i = 0; i < imageHeight; i++) {
    for (var j = 0; j < imageWidth; j++) {
        var color = new THREE.Color();
        color.setRGB(imageData[c] / 255, imageData[c + 1] / 255, imageData[c + 2] / 255);
        // 计算亮度
        var weight = color.r * weights[0] + color.g * weights[1] + color.b * weights[2];
        // 映射到 Z 轴范围
        vertex.z = (zRange * -0.5) + (zRange * weight);
    }
}

uniform float amplitude;
attribute vec3 customColor;
varying vec3 vColor;

void main() {
    vColor = customColor;
    vec4 pos = vec4(position, 1.0);
    // 正弦波抖动
    pos.z *= amplitude;
    vec4 mvPosition = modelViewMatrix * pos;
    // 根据深度调整粒子大小
    gl_PointSize = 2.0 * (300.0 / -mvPosition.z);
    gl_Position = projectionMatrix * mvPosition;
}

function update() {
    // 正弦波控制抖动幅度
    shaderUniforms.amplitude.value = Math.sin(animationTime);
    animationTime += animationDelta;
    controls.update();
}