3D Graphing Calculator

The 3D Graphing Calculator plots surfaces z = f(x, y) in a WebGL scene with orbit controls, labeled axes, and a ground grid. Multiple surfaces can sit in the expression list with color and visibility toggles, and reduced-motion preferences disable auto-spin.

The 3D Graphing Calculator plots surfaces z = f(x, y) in a WebGL scene with orbit controls, labeled axes, and a ground grid. Multiple surfaces can sit in the expression list with color and visibility toggles, and reduced-motion preferences disable auto-spin.

Graph surfaces in 3D online

Concept diagram: Inputs leads to Graph surfaces in 3D online leads to ResultInputsGraph surfaces in 3DonlineResult
Graph surfaces in 3D online.

The 3D Graphing Calculator samples a function of two variables onto a mesh and shades it in the boxed scene. Axes mark X, Y, and Z directions, and a grid sits on the ground plane so height reads against a stable floor. Orbit controls rotate, pan, and zoom the camera around the origin.

Mesh rebuilds are throttled so typing in the expression list does not stall the frame loop on every keystroke.

Plot a function of two variables

Concept diagram: Inputs leads to Plot a function of two variables leads to ResultInputsPlot a function of twovariablesResult
Plot a function of two variables.

Enter a surface as z = expression in x and y. The samples z = x^2+y^2 produce an upward paraboloid bowl. The samples z = sin(x)*cos(y) produce an egg-carton wave. The engine evaluates through shared mathcore, so the same function vocabulary as the 2D Graphing Calculator applies inside the surface body.

Hidden surfaces skip meshing until shown again, which keeps the scene light while comparing two formulas.

Rotate, zoom and pan the 3D view

Concept diagram: Inputs leads to Rotate, zoom and pan 3D view leads to ResultInputsRotate, zoom and pan 3DviewResult
Rotate, zoom and pan the 3D view.

Drag to orbit, scroll to zoom, and use the control target to pan when the pointer gesture allows. Reset view returns the camera to a default corner position looking at the origin. Smooth orbit is the acceptance bar for interaction; the renderer uses Three.js r128 with explicit OrbitControls.

Toggle spin turns auto-rotation on or off. When the browser requests reduced motion, auto-spin starts off.

Graph multiple surfaces

Concept diagram: Inputs leads to Graph multiple surfaces leads to ResultInputsGraph multiple surfacesResult
Graph multiple surfaces.

The expression list holds numbered surfaces with swatches and hide controls. A second surface uses a distinct brand-derived color so two formulas remain separable in the same scene. Visibility toggles remove a mesh without deleting its expression, which helps isolate one surface during inspection.

Alt text beside the canvas summarizes which surfaces are sampled for screen reader users.

Switch between 2D and 3D views

Concept diagram: Inputs leads to Switch between 2D and 3D views leads to ResultInputsSwitch between 2D and3D viewsResult
Switch between 2D and 3D views.

Readers who need a planar plot can open the Graphing Calculator for y = f(x) and implicit curves. The 3D tool stays focused on z = f(x, y) meshes. Reset view and spin controls stay in the 3D toolbar so camera state is recoverable after exploration.

Cross-links under the page point back to the 2D Graphing Calculator and the Geometry Tool when a problem spans plane figures and surfaces.

Frequently asked questions

How do I graph a surface?

Enter an expression such as z=x^2+y^2 in the list. The mesh rebuilds over a default domain and appears in the scene.

How do I rotate the view?

Drag on the canvas to orbit. Scroll to zoom. Press Reset view to restore the default camera.

Can I plot more than one surface?

Yes. Keep multiple rows in the list and use Hide or Show on each row. Colors differ by row.

Does reduced motion change anything?

Yes. When prefers-reduced-motion is set, auto-spin starts disabled. Manual orbit still works.

Is the 3D graphing calculator free?

Yes. The 3D Graphing Calculator is free on Quick Calculators.

Summary

The 3D Graphing Calculator renders z = f(x, y) with Three.js r128, OrbitControls, and a throttled mesh rebuild. It completes the Math Tools set beside the 2D Graphing Calculator for plane curves and the Geometry Tool for constructions.