How to make a NURBS surface with NxN Control Points in Three.js

Question

Yesterday I was trying to draw a Math function in 3D [ F(x,y) ]. How I did it? I calculated some points (x, y, z) in the space and I draw a white point there.

Here the example:

The first problem: When I move the scenario (using Orbital Control), the performance is too bad! So, I was looking for a solution and I realiced that NURBS surfaces could be my solution. But, the problem here is that I can't find a way to define a lot of Control Points. I was thinking to create a NURBS surface with 50 x 50 control points (as the previous image), but I only can create a NURB surface with 3 x 4 points. Here the code:

var nsControlPoints = [
    [
        new THREE.Vector4 ( -150, 0, 150, 1 ),
        new THREE.Vector4 ( 150, 0, 150, 1 ),
        new THREE.Vector4 ( 150, 0, -150, 1 ),
        new THREE.Vector4 ( -150, 0, -150, 1 ),
        new THREE.Vector4 ( -150, 0, 150, 1 )
    ],
    [
        new THREE.Vector4 ( -50, 50, 50, 1 ),
        new THREE.Vector4 ( 50, 50, 50, 1 ),
        new THREE.Vector4 ( 50, 50, -50, 1 ),
        new THREE.Vector4 ( -50, 50, -50, 1 ),
        new THREE.Vector4 ( -50, 50, 50, 1 )
    ],
    [
        new THREE.Vector4 ( -100, -50, 100, 1 ),
        new THREE.Vector4 ( 100, -50, 100, 1 ),
        new THREE.Vector4 ( 100, -50, -100, 1 ),
        new THREE.Vector4 ( -100, -50, -100, 1 ),
        new THREE.Vector4 ( -100, -50, 100, 1 )
    ],
];


var degree1 = 2;
var degree2 = 3;
var knots1 = [0, 0, 0, 1, 1, 1];
var knots2 = [0, 0, 0, 0, 1, 1, 1, 1];
var nurbsSurface = new THREE.NURBSSurface(degree1, degree2, knots1, knots2, nsControlPoints);

var map = new THREE.TextureLoader().load( 'styles/grid.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;

getSurfacePoint = function(u, v) {
    return nurbsSurface.getPoint(u, v);
};

var geometry = new THREE.ParametricGeometry( getSurfacePoint, 20, 20 );
var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
var object = new THREE.Mesh( geometry, material );
object.position.set( - 200, 100, 0 );
object.scale.multiplyScalar( 1 );
group.add( object );

Result:

The Question: Do you know if there is a way to say something like: "Hey NURBS Surface, you should take this 50x50 array/matrix of vectors and draw it!"?

The second problem: What about those points where the function doesn't exists?

The Question: Can I draw kind of plane in function of a Math function?

Answer 1

An abstraction above THREE but verburbs is an open source library built to work with NURB surfaces. Here is a screen shot from one of their examples detailing what you're talking about. I have no affiliation with the codebase.