meowshapes

Graph3d

The graph3d() function creates a 3D graph of a mathematical function. The callback function should take two arguments (the x- and z-coordinates) and return the corresponding y-coordinate.

zoom(80);

graph3d(
    (x, z) => Math.sin(x) * Math.cos(z),
    // Optional width and depth configuration:
    [Math.PI, Math.PI]
)
    .color((_, y) => COLOR.heatmap((y + 1) / 2));

Returns the Graph3d object:


Graph3d

Example usage:
graph3d.grid().gridColor("coral");
field 
mesh: THREE.Group
The Group mesh containing the surface and any grid lines.
Example
graph3d.mesh.rotation.x = -Math.PI / 4;
field 
heightField: HeightField
The HeightField object representing the 3D graph surface.
Example
graph3d.heightField.material(new THREE.MeshStandardMaterial());
field 
linestrips: LineStrip[]
An array of line strips representing grid lines on the graph, if any were added.
Example
graph3d.linestrips.forEach((line) => line.linewidth(1));
field 
values: THREE.Vector3[]
The computed (x, y, z) values of the 3D graph.
Example
graph3d.values.filter((v) => v.y > 0).length;
method 
pos(position: Vec3): Graph3d
Set the position of the object.
param position
A vector-like object representing the position.
Example
graph3d.pos([0, 5, 0]);
method 
color(color: Graph3dColor): Graph3d
Sets the color of the 3D graph's surface.
param color
A color or a function that returns a color based on x, y, and z values, where y is the calculated graph value at (x, z).
Example
graph3d.color((x, y, z) => (y > 0 ? "coral" : "salmon"));
method 
material(material: THREE.Material): Graph3d
Sets the material of the 3D graph's surface.
param material
The material to apply.
Example
graph3d.material(new THREE.MeshStandardMaterial());
method 
grid(segments?: Vec2): Graph3d
Adds a grid of line strips over the 3D graph.
param segments
Number of segments in the grid along x and z axes.
Example
graph3d.grid([8, 8]);
method 
gridColor(color: LineStripColor): Graph3d
Sets the color of all grid lines in the 3D graph, if grid was added.
param color
A color or from/to gradient for the grid lines.
Example
graph3d.gridColor("coral");
method 
linewidth(width: number): Graph3d
Sets the line width of all grid lines in the 3D graph, if grid was added.
param width
The new line width.
Example
graph3d.linewidth(1);
method 
dashed(dashSize?: number, gapSize?: number): Graph3d
Sets all grid lines in the 3D graph to be dashed, if grid was added. If no parameters are provided, default values are used.
param dashSize
Size of the dashes.
param gapSize
Size of the gaps between dashes.
Example
graph3d.dashed(2, 1);
method 
noSurface(): Graph3d
Removes the surface from the 3D graph, leaving only the grid lines if they were added.
Example
graph3d.noSurface();
meowshapes