Online 3D Graphing Calculator: Surfaces, Parametric Curves & Scatter (WebGL)
An interactive 3D plotter powered by WebGL (three.js). Render z=f(x,y) surfaces with adjustable resolution, parametric space curves, or 3D scatter point clouds — adding points individually or pasting them in bulk. Rotate, zoom and pan with OrbitControls, reset the view, and copy scatter points, all running locally in your browser.
3D Graphing Calculator Guide
Surfaces, parametric curves and point clouds in WebGL
The 3D graphing calculator renders three kinds of objects in an interactive WebGL viewport: surfaces z = f(x, y), parametric space curves (x(t), y(t), z(t)), and scatter point clouds. Switch modes, enter the expressions or points, and orbit the scene with your mouse or touch to inspect the shape from any angle.
01 Choosing a mode
In Surface mode, enter z as a function of x and y (for example sin(sqrt(x^2 + y^2))) and set the x and y ranges; resolution controls mesh density. In Parametric mode, enter x(t), y(t) and z(t) as functions of a parameter t over [tmin, tmax]; samples controls how many points define the curve. In Scatter mode, add individual (x, y, z) points by entering coordinates and clicking +; use Clear to remove all points and × to remove one.
Click and drag to rotate the camera, scroll to zoom, and right-drag (or two-finger drag) to pan. The view renders in your browser via WebGL and is wrapped in ClientOnly so it does not affect server rendering.
- Surface: z = f(x,y), sampled over a rectangular grid
- Parametric: a curve traced as t varies through [tmin, tmax]
- Scatter: a discrete cloud of (x, y, z) points
- Higher resolution/samples give smoother results at the cost of performance
Mode toggle
- SurfacePlot z = f(x, y) over a grid.
- ParametricPlot a parametric curve x(t), y(t), z(t).
- ScatterPlot individual 3D points.
Surface controls
- z = f(x, y)Expression for height in terms of x and y.
- x / y rangeSets the rectangular domain sampled for the surface.
- resolutionMesh density (24–64); higher is smoother but slower.
Parametric controls
- x(t) / y(t) / z(t)Three expressions defining the curve over parameter t.
- tmin / tmaxRange of the parameter t.
- samplesNumber of points along the curve (100–2000).
Scatter controls
- x / y / z fieldsCoordinates for a new point.
- +Adds the entered point to the cloud.
- ClearRemoves all scattered points (and clears the bulk text box).
- × (on a point)Removes that single point.
- bulk text boxPaste or type many points at once, one point per line as x, y, z separated by commas or spaces.
- ApplyParses the bulk text box and replaces the point cloud with the entered points.
- CopyCopies all current points as lines of x, y, z for pasting elsewhere.
Viewport
- dragOrbit/rotate the 3D scene.
- scrollZoom the camera in and out.
- right-dragPan the camera.
- reset viewOn-canvas button that restores the default camera angle after rotating, panning or zooming.
- Lower the resolution while experimenting, then raise it for a final render.
- Parametric curves are ideal for helixes, orbits and trajectories.
- If a surface looks jagged, increase resolution or narrow the x/y ranges.
- WebGL must be enabled in your browser for the 3D view to appear.
A free online 3D graphing calculator. Render surfaces z = f(x,y), draw parametric curves x(t)/y(t)/z(t), and plot scatter point clouds, all interactively in WebGL with orbit controls. Choose resolution and parameter ranges, rotate and zoom in the browser. three.js is bundled, so there is no plug-in or data upload.
Surface plots
Enter z as a function of x and y, such as sin(sqrt(x^2+y^2)) or x^2-y^2, and choose the x/y domain and mesh resolution. The surface renders in WebGL with lighting; increase resolution for a smoother mesh at the cost of performance.
Parametric curves and scatter
For parametric curves, enter x(t), y(t), z(t) and a range for t to draw knots, helices and trajectories. For scatter plots, enter x, y, z coordinate lists to visualize point clouds. Switch object types from the panel; each is independent.
Navigation and performance
Drag to rotate, scroll to zoom and right-drag (or two-finger drag) to pan using orbit controls; the reset button returns to the default view. The three.js engine is loaded only when this tool opens, so the initial page stays fast. WebGL must be available in your browser.
FAQ
QWhat can I plot in 3D?
Surfaces z=f(x,y), parametric curves x(t)/y(t)/z(t), and scatter point clouds from x/y/z coordinate lists.
QDo I need to install anything?
No. three.js is bundled with the site and 3D uses WebGL built into modern browsers — no plug-in or app required.
QCan I rotate and zoom the view?
Yes — drag to rotate, scroll to zoom, right-drag or two-finger drag to pan, and use reset to return to the default camera.
QWhy is the surface blocky at high resolution?
Higher mesh resolution gives smoother surfaces but more triangles to render. Lower the resolution if your device is slow; WebGL performance depends on your GPU.