Graphics3D
<graphics-3d-box value="Plot3D(Sin(x) * Cos(y), (x, -3, 3), (y, -3, 3))"> -- a figure in space, the Graphics3DBox its expression lowers to. The element holds the expression (options and all, as a 2-D plot does), the page's kernel samples it, and the samples lower to boxes that graphics3dSvg draws. Drag rotates (Azimuth, Elevation), ⌘/Ctrl + wheel or a pinch zooms (Zoom), double-click returns to the first view. Its wildcards (_k) are a surrounding Manipulate's controls, and moving one samples the compiled code again.
- Plot3D(f, (x, a, b), (y, c, d)): a surface, f a list for several on one scale. Hover reads out a sample. Gpu -> True (or a grid size) evaluates the grid in a WebGPU shader, falling back to the CPU; Spin -> True turns the view on its own; N is the grid per side (2 to 60). PlotLegends -> True draws a height key; PlotLabel titles it. - ListPlot3D(grid) is a mesh of a height grid (or of [x, y, z] points, binned onto one), Type -> "points" a scatter, Wireframe -> True outlines only. - BarChart3D(matrix) is bars, one row of a flat list; Gap, ZRange, RowLabels, ColLabels. - Graphics3D(Line(points), Closed -> True) is a curve in space, points an expression the page evaluates (KnotCurve(TorusKnot(2, 3))). The nearer strand passes in front of the farther, color runs along the parameter, Torus -> (2, 1) draws the tube it lies on, Clock -> True sends a marker along it with the page's clock (Phase -> 0.3 pins it), Caption sets a caption.
Color is a gradient (ColorFunction -> "Magma", default viridis; sinebow for a curve); several surfaces are told apart by color instead.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | string | "" | The expression, in Epsil. |
azimuth | number | 45 | The view, which dragging changes; the expression's Azimuth, Elevation and Zoom start it. |
elevation | number | 15 | |
zoom | number | 1 |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <graphics-3d-box> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.
Settable only as a JS property, not an attribute -- points, box, bindings: bind with :points.prop="…" directly on the tag.