Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词

📋 AI 提示词

prompt 复制代码

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

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个展示如何创建初中数学函数可视化的示例，展示三维场景中的函数图像。

效果特性

函数图像：展示函数图像
二次函数：实现二次函数
三角函数：实现三角函数
参数调整：调整函数参数
三维显示：三维显示效果
坐标系：显示坐标系

核心参数

参数	值	说明
函数类型	二次函数	函数类型
参数a	1.0	函数参数a
参数b	0.0	函数参数b
参数c	0.0	函数参数c

核心代码解析

创建函数图像

javascript 复制代码

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;
    }
}

创建坐标系

javascript 复制代码

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;
}

技术亮点

函数图像：展示函数图像
二次函数：实现二次函数
三角函数：实现三角函数
参数调整：调整函数参数
三维显示：三维显示效果

调试技巧

函数类型：调整函数类型观察不同函数
参数a：调整参数a改变函数形状
参数b：调整参数b改变函数周期
参数c：调整参数c改变函数位置
显示范围：调整显示范围观察函数

扩展方向

更多函数：添加更多函数类型
三维函数：添加三维函数
动画效果：添加动画效果
交互控制：添加交互控制
函数比较：支持函数比较

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。