Graph of a function of two variables (Threejs)

Question

Hello all:) I want to create custom graphics with js. How i can do this? I try to use Threejs. I create coordinate axes, but i don't know how to create graphic for ex. this function: x^2+2*y^2.

class Graphic extends Component {

    constructor() {
        super();
        this.scene = new Three.Scene;
    }

    componentDidMount() {
        this.createScene();
    }

    createScene = () => {
        this.setCamera();
        this.getLight();
        this.coordinateAxes();
        this.reproduce();
    }

    coordinateAxes = () => {
        const lineGeometryFirst = new Three.Geometry();
        const lineGeometrySecond = new Three.Geometry();
        const lineGeometryThird = new Three.Geometry();
        const pointZero = new Three.Vector3(0, 0, 0);
        const pointX = new Three.Vector3(100, 0, 0);
        const pointY = new Three.Vector3(0, 100, 0);
        const pointZ = new Three.Vector3(0, 0, 100);
        const arrowX = {
            left: new Three.Vector3(95, -5, 0),
            right: new Three.Vector3(95, 5, 0),
        };
        const arrowY = {
            left: new Three.Vector3(-5, 95, 0),
            right: new Three.Vector3(5, 95, 0),
        };
        const arrowZ = {
            left: new Three.Vector3(0, -5, 95),
            right: new Three.Vector3(0, 5, 95),
        };

        lineGeometryFirst.vertices.push(pointZero, pointX, arrowX.left, pointX, arrowX.right);
        lineGeometrySecond.vertices.push(pointZero, pointY, arrowY.left, pointY, arrowY.right);
        lineGeometryThird.vertices.push(pointZero, pointZ, arrowZ.left, pointZ, arrowZ.right);

        const axisX = new Three.Line( lineGeometryFirst, new Three.LineBasicMaterial({ color: 0xffffff, linewidth: 500 }));
        const axisY = new Three.Line( lineGeometrySecond, new Three.LineBasicMaterial({ color: 0x00FF00, linewidth: 500 }));
        const axisZ = new Three.Line( lineGeometryThird, new Three.LineBasicMaterial({ color: 0xFFFF00, linewidth: 500 }));


        this.scene.add(axisX);
        this.scene.add(axisY);
        this.scene.add(axisZ);
    }

    reproduce = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        const renderer = new Three.WebGLRenderer({ canvas: this.canvas });
        const camera = this.setCamera(width, height);

        renderer.setSize(width, height);
        renderer.render(this.scene, camera);
    }

    setCamera = (width, height) => {
        const camera = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);

        camera.position.set(120, 50, 300);

        return camera;
    }

    getLight = () => {
        const light = new Three.AmbientLight(0xffffff);

        this.scene.add(light);
    }

    render() {
        return <canvas ref={canvas => this.canvas = canvas} />;
    }
}

Who can put me on the right path?

Answer 1

A good starting place would be this example:
https://stemkoski.github.io/Three.js/Graphulus-Curve.html
Basically you define a function and sample it at some precision, then generate geometry from it.

Another good example:
https://threejs.org/docs/#api/geometries/ParametricGeometry

More examples for using ParametricGeometry can be found here:
https://github.com/josdirksen/threejs-cookbook/blob/master/02-geometries-meshes/02.10-create-parametric-geometries.html

If you have a 2-dimensional function, you could simply set the z component of the vector to 0.

I have added an example of how you could implement an elliptic paraboloid with a parametric function in Three.js. The reference can be found here: http://mathworld.wolfram.com/EllipticParaboloid.html

       var func = function (u, v) {
            //Play with these 2 values to get the exact result you want
            //The height variable is pretty self-explanatory, the size variable acts like a scale on the x/z axis.
            var height = 300; //Limit the height
            var size = 1; //Limit the x/z size, try the value 10 for example

            var u = u * height;
            var v = (v * 2 * Math.PI);

            var x = size * Math.sqrt(u) * Math.cos(v);
            var y = u;
            var z = size * 2 * Math.sqrt(u) * Math.sin(v);
            //Note that the y and z axes are swapped because of how they are displayed in Three.js. Alternatively you could just rotate the resulting mesh and get the same result.
            return new THREE.Vector3(x, y, z);
        };
        var geometry = new THREE.ParametricGeometry(func, 25, 25);
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

Some more information about conversions to the parametric form: https://en.wikipedia.org/wiki/Parametric_equation#Circle