使用 Three.js 创建坐标系和函数图像，展示三维坐标系中的函数图像。

function createCoordinateSystem() {
    const params = {
        coordinateType: 'cartesian',
        showGrid: true,
        showLabels: true
    };

    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 zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(0, 0, -axisLength),
        new THREE.Vector3(0, 0, axisLength)
    ]);
    const zAxis = new THREE.Line(zAxisGeometry, axisMaterial);
    group.add(zAxis);

    if(params.showGrid) {
        const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
        group.add(gridHelper);
    }

    return group;
}

function createFunctionSurface() {
    const params = {
        functionType: 'paraboloid',
        a: 1.0,
        b: 1.0
    };

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

    const range = 5;
    const segments = 50;

    for(let i = 0; i <= segments; i++) {
        for(let j = 0; j <= segments; j++) {
            const x = (i / segments) * 2 * range - range;
            const y = (j / segments) * 2 * range - range;
            const z = calculateFunction(x, y, params);
            
            positions.push(x, y, z);
            
            const color = new THREE.Color().setHSL((z + range) / (2 * range), 0.8, 0.5);
            colors.push(color.r, color.g, color.b);
        }
    }

    const indices = [];
    for(let i = 0; i < segments; i++) {
        for(let j = 0; j < segments; j++) {
            const a = i * (segments + 1) + j;
            const b = a + 1;
            const c = a + segments + 1;
            const d = c + 1;
            
            indices.push(a, b, d);
            indices.push(a, d, c);
        }
    }

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

    const material = new THREE.MeshStandardMaterial({ 
        vertexColors: true,
        side: THREE.DoubleSide,
        metalness: 0.3,
        roughness: 0.7
    });
    
    return new THREE.Mesh(geometry, material);
}

function calculateFunction(x, y, params) {
    switch(params.functionType) {
        case 'paraboloid':
            return params.a * x * x + params.b * y * y;
        case 'hyperboloid':
            return params.a * x * x - params.b * y * y;
        case 'sine':
            return params.a * Math.sin(x) * Math.cos(y);
        case 'gaussian':
            return -params.a * Math.exp(-(x * x + y * y) / params.b);
        default:
            return 0;
    }
}