使用 Three.js 创建概率统计可视化，展示三维图表的概率分布特性。

function createDistributionChart() {
    const params = {
        distribution: 'normal',
        mean: 0.0,
        stdDev: 1.0,
        sampleSize: 1000
    };

    const group = new THREE.Group();

    const samples = generateSamples(params);
    const histogram = createHistogram(samples);
    group.add(histogram);

    const curve = createDistributionCurve(params);
    group.add(curve);

    return group;
}

function generateSamples(params) {
    const samples = [];
    
    switch(params.distribution) {
        case 'normal':
            for(let i = 0; i < params.sampleSize; i++) {
                samples.push(generateNormalRandom(params.mean, params.stdDev));
            }
            break;
        case 'uniform':
            for(let i = 0; i < params.sampleSize; i++) {
                samples.push(Math.random() * 2 * params.stdDev + params.mean - params.stdDev);
            }
            break;
    }
    
    return samples;
}

function generateNormalRandom(mean, stdDev) {
    let u = 0, v = 0;
    while(u === 0) u = Math.random();
    while(v === 0) v = Math.random();
    
    return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) * stdDev + mean;
}

function createHistogram(samples) {
    const bins = 50;
    const min = Math.min(...samples);
    const max = Math.max(...samples);
    const binWidth = (max - min) / bins;

    const histogram = new Float32Array(bins);
    
    samples.forEach(sample => {
        const binIndex = Math.floor((sample - min) / binWidth);
        if(binIndex >= 0 && binIndex < bins) {
            histogram[binIndex]++;
        }
    });

    const maxCount = Math.max(...histogram);
    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];

    for(let i = 0; i < bins; i++) {
        const x = min + i * binWidth + binWidth / 2;
        const height = (histogram[i] / maxCount) * 5;
        const color = new THREE.Color().setHSL(i / bins, 0.8, 0.5);

        positions.push(x, 0, 0);
        positions.push(x, height, 0);
        positions.push(x + binWidth, height, 0);
        positions.push(x + binWidth, 0, 0);

        for(let j = 0; j < 4; j++) {
            colors.push(color.r, color.g, color.b);
        }
    }

    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

    const material = new THREE.LineBasicMaterial({ vertexColors: true });
    return new THREE.LineSegments(geometry, material);
}