home/js/ParticleSystem.js

class ParticleSystem {
    constructor(options = {}) {
        this.particleCount = options.particleCount || 22000;
        this.theme = options.theme || 'day';
        this.callbacks = options.callbacks || {};
        
        // 动画控制相关属性
        this.scaleFactor = 1.0;
        this.diffusionFactor = 1.0;
        this.forwardFactor = 0.0;
        this.speedFactor = 1.0;
        
        // 当前动画类型
        this.currentAnimation = 'saturn'; // 默认为土星动画
        
        // 动画状态
        this.animationState = 'scattered'; // 默认状态为分散状态
        
        this.init();
    }
    
    init() {
        this.geometry = new THREE.BufferGeometry();
        this.positions = new Float32Array(this.particleCount * 3);
        this.targets = new Float32Array(this.particleCount * 3);
        this.origin = new Float32Array(this.particleCount * 3);
        this.velocities = new Float32Array(this.particleCount * 3);
        this.sizes = new Float32Array(this.particleCount);
        this.seeds = new Float32Array(this.particleCount);
        
        this.simplex = new SimplexNoise();
        
        // 初始化为默认的平铺散布状态
        this.initScatteredParticles();
        
        this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));
        this.geometry.setAttribute('size', new THREE.BufferAttribute(this.sizes, 1));
        this.geometry.setAttribute('seed', new THREE.BufferAttribute(this.seeds, 1));
        
        this.createMaterial();
        this.particleSystem = new THREE.Points(this.geometry, this.material);
        
        if (this.callbacks.onInit) {
            this.callbacks.onInit(this.particleSystem);
        }
    }
    
    // 初始化平铺散布的粒子分布（默认状态）
    initScatteredParticles() {
        for (let i = 0; i < this.particleCount; i++) {
            const i3 = i * 3;
            
            // 在一个较大的空间内随机分布粒子
            const x = (Math.random() - 0.5) * 2000;
            const y = (Math.random() - 0.5) * 2000;
            const z = (Math.random() - 0.5) * 2000;
            
            this.positions[i3] = x;
            this.origin[i3] = x;
            this.targets[i3] = x;
            this.positions[i3 + 1] = y;
            this.origin[i3 + 1] = y;
            this.targets[i3 + 1] = y;
            this.positions[i3 + 2] = z;
            this.origin[i3 + 2] = z;
            this.targets[i3 + 2] = z;
            
            this.sizes[i] = (Math.random() * 2.5 + 0.5) * (this.theme === 'day' ? 1.3 : 1.0);
            this.seeds[i] = Math.random();
        }
    }
    
    // 初始化土星动画的粒子分布
    initSaturnParticles() {
        // 土星主体粒子数量 (约占70%)
        const planetParticleCount = Math.floor(this.particleCount * 0.7);
        // 土星环粒子数量 (约占30%)
        const ringParticleCount = this.particleCount - planetParticleCount;
        
        // 初始化土星主体粒子 (球形分布)
        for (let i = 0; i < planetParticleCount; i++) {
            const i3 = i * 3;
            const y = 1 - (i / (planetParticleCount - 1)) * 2;
            const radius = Math.sqrt(1 - y * y);
            const theta = i * 2.39996;
            const r = 100; // 土星半径
            
            const x = Math.cos(theta) * radius * r;
            const z = Math.sin(theta) * radius * r;
            const py = y * r;
            
            this.positions[i3] = x;
            this.origin[i3] = x;
            this.targets[i3] = x;
            this.positions[i3 + 1] = py;
            this.origin[i3 + 1] = py;
            this.targets[i3 + 1] = py;
            this.positions[i3 + 2] = z;
            this.origin[i3 + 2] = z;
            this.targets[i3 + 2] = z;
            
            this.sizes[i] = (Math.random() * 2.5 + 0.5) * (this.theme === 'day' ? 1.3 : 1.0);
            this.seeds[i] = Math.random();
        }
        
        // 初始化土星环粒子 (圆环分布)
        for (let i = planetParticleCount; i < this.particleCount; i++) {
            const i3 = i * 3;
            // 多个环的配置
            const ringConfigs = [
                { innerRadius: 130, outerRadius: 140 },
                { innerRadius: 150, outerRadius: 160 },
                { innerRadius: 170, outerRadius: 180 },
                { innerRadius: 190, outerRadius: 200 }
            ];
            
            // 分配到不同环
            const ringIndex = (i - planetParticleCount) % ringConfigs.length;
            const ringConfig = ringConfigs[ringIndex];
            
            // 在环内随机分布
            const angle = Math.random() * Math.PI * 2;
            const radius = ringConfig.innerRadius + Math.random() * (ringConfig.outerRadius - ringConfig.innerRadius);
            
            const x = Math.cos(angle) * radius;
            const z = Math.sin(angle) * radius;
            const y = (Math.random() - 0.5) * 20; // 环有一定的厚度
            
            this.positions[i3] = x;
            this.origin[i3] = x;
            this.targets[i3] = x;
            this.positions[i3 + 1] = y;
            this.origin[i3 + 1] = y;
            this.targets[i3 + 1] = y;
            this.positions[i3 + 2] = z;
            this.origin[i3 + 2] = z;
            this.targets[i3 + 2] = z;
            
            this.sizes[i] = (Math.random() * 1.5 + 0.5) * (this.theme === 'day' ? 1.3 : 1.0);
            this.seeds[i] = Math.random();
        }
    }
    
    createMaterial() {
        const colors = this.theme === 'day'
            ? {base: new THREE.Color(0x2c3e50), active: new THREE.Color(0x0055ff)}
            : {base: new THREE.Color(0xFFFFFF), active: new THREE.Color(0x00FFFF)};
            
        const paletteA = this.theme === 'day' ? new THREE.Color(0x6ec3ff) : new THREE.Color(0x00ffff);
        const paletteB = this.theme === 'day' ? new THREE.Color(0xffb4c8) : new THREE.Color(0xff7af3);
        const blending = this.theme === 'day' ? THREE.NormalBlending : THREE.AdditiveBlending;
        
        this.material = new THREE.ShaderMaterial({
            uniforms: {
                scale: {value: window.innerHeight / 2},
                baseColor: {value: colors.base},
                activeColor: {value: colors.active},
                mixVal: {value: 0.0},
                time: {value: 0.0},
                paletteA: {value: paletteA},
                paletteB: {value: paletteB},
                nebulaIntensity: {value: 0.0}
            },
            vertexShader: `
                attribute float size;
                attribute float seed;
                varying float vSeed;
                void main() {
                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                    gl_PointSize = size * (500.0 / -mvPosition.z);
                    gl_Position = projectionMatrix * mvPosition;
                    vSeed = seed;
                }
            `,
            fragmentShader: `
                uniform vec3 baseColor;
                uniform vec3 activeColor;
                uniform vec3 paletteA;
                uniform vec3 paletteB;
                uniform float mixVal;
                uniform float time;
                uniform float nebulaIntensity;
                varying float vSeed;
                void main() {
                    float r = length(gl_PointCoord - vec2(0.5));
                    if (r > 0.5) discard;
                    vec3 baseMix = mix(baseColor, activeColor, mixVal);
                    float drift = 0.5 + 0.5 * sin(time * 0.15 + vSeed * 6.28318);
                    vec3 nebula = mix(paletteA, paletteB, drift);
                    vec3 finalColor = mix(baseMix, nebula, nebulaIntensity);
                    gl_FragColor = vec4(finalColor, 1.0);
                }
            `,
            blending: blending,
            depthTest: false,
            transparent: true
        });
    }
    
    update(time, mode, handCount, handL, handR) {
        const adjustedTime = time * this.speedFactor;
        this.material.uniforms.time.value = adjustedTime;
        
        if (this.theme === 'night') {
            this.material.uniforms.nebulaIntensity.value = mode === 'UNLOCKED' ? 0.55 : 0.35;
        } else {
            this.material.uniforms.nebulaIntensity.value = mode === 'UNLOCKED' ? 0.22 : 0.12;
        }
        
        let targetMix = 0;
        
        if (mode === 'LOCKED') {
            targetMix = handCount > 0 ? 0.6 : 0.0;
            const ns = 0.002 * this.diffusionFactor;
            const ts = adjustedTime * 0.15;
            
            for (let i = 0; i < this.particleCount; i++) {
                const i3 = i * 3;
                const ox = this.origin[i3] * this.scaleFactor;
                const oy = this.origin[i3 + 1] * this.scaleFactor;
                const oz = this.origin[i3 + 2] * this.scaleFactor;
                const noise = this.simplex.noise3D(ox * ns + ts, oy * ns, oz * ns + ts);
                
                let offX = 0, offY = 0;
                if (handCount === 1) {
                    offX = handL.x * 0.15 * this.forwardFactor;
                    offY = handL.y * 0.15 * this.forwardFactor;
                }
                
                const scale = 1 + noise * 0.3;
                this.targets[i3] = ox * scale + offX;
                this.targets[i3 + 1] = oy * scale + offY;
                this.targets[i3 + 2] = oz * scale;
            }
        } else {
            targetMix = 1.0;
        }
        
        this.material.uniforms.mixVal.value += (targetMix - this.material.uniforms.mixVal.value) * 0.1;
        
        for (let i = 0; i < this.particleCount; i++) {
            const i3 = i * 3;
            const px = this.positions[i3];
            const py = this.positions[i3 + 1];
            const pz = this.positions[i3 + 2];
            
            const stiff = mode === 'LOCKED' ? 0.03 : 0.05;
            this.velocities[i3] += (this.targets[i3] - px) * stiff;
            this.velocities[i3 + 1] += (this.targets[i3 + 1] - py) * stiff;
            this.velocities[i3 + 2] += (this.targets[i3 + 2] - pz) * stiff;
            
            if (handCount === 1) {
                const hx = handL.x;
                const hy = handL.y;
                const dx = hx - px;
                const dy = hy - py;
                const distSq = dx * dx + dy * dy;
                
                if (distSq < 150000) {
                    const f = (150000 - distSq) / 150000;
                    this.velocities[i3] += dx * f * 0.05;
                    this.velocities[i3 + 1] += dy * f * 0.05;
                    this.velocities[i3 + 2] += Math.sin(adjustedTime * 10 + distSq * 0.0001) * 8 * f;
                }
            } else if (handCount === 2) {
                [handL, handR].forEach(h => {
                    const dx = px - h.x;
                    const dy = py - h.y;
                    const distSq = dx * dx + dy * dy;
                    if (distSq < 80000) {
                        const f = (80000 - distSq) / 80000;
                        this.velocities[i3] -= dx * f * 0.3;
                        this.velocities[i3 + 1] -= dy * f * 0.3;
                        this.velocities[i3 + 2] += 15 * f;
                    }
                });
            }
            
            this.velocities[i3] *= 0.90;
            this.velocities[i3 + 1] *= 0.90;
            this.velocities[i3 + 2] *= 0.90;
            
            this.positions[i3] += this.velocities[i3];
            this.positions[i3 + 1] += this.velocities[i3 + 1];
            this.positions[i3 + 2] += this.velocities[i3 + 2];
        }
        
        this.geometry.attributes.position.needsUpdate = true;
        
        if (this.callbacks.onUpdate) {
            this.callbacks.onUpdate(this.particleSystem);
        }
        
        return targetMix;
    }
    
    explode(force) {
        for (let i = 0; i < this.particleCount; i++) {
            this.velocities[i * 3] += (Math.random() - 0.5) * force;
            this.velocities[i * 3 + 1] += (Math.random() - 0.5) * force;
            this.velocities[i * 3 + 2] += (Math.random() - 0.5) * force;
        }
    }
    
    scatter() {
        // 将粒子散开到随机位置
        for (let i = 0; i < this.particleCount; i++) {
            const i3 = i * 3;
            this.targets[i3] = (Math.random() - 0.5) * 2000;
            this.targets[i3 + 1] = (Math.random() - 0.5) * 2000;
            this.targets[i3 + 2] = (Math.random() - 0.5) * 2000;
        }
        this.animationState = 'scattered';
    }
    
    // 聚合粒子形成土星形状
    aggregate() {
        this.initSaturnParticles();
        this.animationState = 'aggregated';
    }
    
    setScaleFactor(factor) {
        this.scaleFactor = Math.max(0.1, Math.min(2.0, factor));
    }
    
    setDiffusionFactor(factor) {
        this.diffusionFactor = Math.max(0.1, Math.min(3.0, factor));
    }
    
    setForwardFactor(factor) {
        this.forwardFactor = Math.max(-2.0, Math.min(2.0, factor));
    }
    
    setSpeedFactor(factor) {
        this.speedFactor = Math.max(0.01, Math.min(3.0, factor));
    }
    
    // 处理来自手势的指令
    handleGestureCommand(command, value) {
        switch(command) {
            case 'scale':
                this.setScaleFactor(value);
                break;
            case 'diffusion':
                this.setDiffusionFactor(value);
                break;
            case 'forward':
                this.setForwardFactor(value);
                break;
            case 'speed':
                this.setSpeedFactor(value);
                break;
            case 'explode':
                this.explode(value);
                break;
            case 'scatter':
                this.scatter();
                break;
            case 'aggregate':
                this.aggregate();
                break;
        }
    }
    
    dispose() {
        this.geometry.dispose();
        this.material.dispose();
    }
}