使用 Three.js 创建初中数学函数可视化，展示三维场景中的函数图像。

function createFunctionGraph() {
    const params = {
        functionType: 'quadratic',
        a: 1.0,
        b: 0.0,
        c: 0.0
    };

    const geometry = new THREE.BufferGeometry();
    const positions = [];
    const colors = [];

    const range = 10;
    const segments = 200;

    for(let i = 0; i <= segments; i++) {
        const x = (i / segments) * 2 * range - range;
        const y = calculateFunction(x, params);
        
        positions.push(x, y, 0);
        
        const color = new THREE.Color().setHSL((i / segments) * 0.7, 0.8, 0.5);
        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, linewidth: 2 });
    return new THREE.Line(geometry, material);
}

function calculateFunction(x, params) {
    switch(params.functionType) {
        case 'quadratic':
            return params.a * x * x + params.b * x + params.c;
        case 'sine':
            return params.a * Math.sin(params.b * x) + params.c;
        case 'cosine':
            return params.a * Math.cos(params.b * x) + params.c;
        case 'exponential':
            return params.a * Math.exp(params.b * x) + params.c;
        default:
            return 0;
    }
}

function createCoordinateSystem() {
    const group = new THREE.Group();
    
    const axisLength = 10;
    const axisMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
    
    const xAxisGeometry = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-axisLength, 0, 0),
        new THREE.Vector3(axisLength, 0, 0)
    ]);
    const xAxis = new THREE.Line(xAxisGeometry, axisMaterial);
    group.add(xAxis);

    const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(0, -axisLength, 0),
        new THREE.Vector3(0, axisLength, 0)
    ]);
    const yAxis = new THREE.Line(yAxisGeometry, axisMaterial);
    group.add(yAxis);

    const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
    group.add(gridHelper);

    return group;
}