Creating Shapes

Loading…

Rendering

Code

Choose a built-in shape; Code shows the matching geometry call in JavaScript, React, or Vue. resolveGeometry(name, options) and the named helpers return Polygon[] for scene.add() or GlyphMesh.

Built-in helpers

Helper	Shape / size convention
tetrahedronPolygons	Four triangles; circumradius
cubePolygons	Six quads; edge length
octahedronPolygons	Eight triangles; center-to-pole distance
dodecahedronPolygons	Twelve pentagons; circumradius
icosahedronPolygons	Twenty triangles; circumradius
planePolygons	One quad; size is half-extent; axis: 0=YZ, 1=XZ, 2=XY
ringPolygons	Annulus; axis, radius, halfThickness, segments
axesHelperPolygons	XYZ bars; size, thickness, negative, axis colors

import { cubePolygons, planePolygons } from "@glyphcss/core";
const cube = cubePolygons({ center: [0, 0, 0], size: 1, color: "#4488ff" });
const floor = planePolygons({ axis: 1, size: 2, offset: 0 });

planePolygons defaults offset to size * 2; pass 0 to center it. Other helper dimensions vary by shape: do not assume every size means edge length.

Your own polygons

import type { Polygon } from "@glyphcss/core";
const triangle: Polygon = {
  vertices: [[-1, 0, 0], [1, 0, 0], [0, 1, 0]],
  color: "#44ffcc",
};

Vertices use [x, y, z]; wind faces counterclockwise from outside. Color is optional. N-gons are fan-triangulated, so split concave faces into triangles yourself. Add the polygon with scene.add([triangle]).

Procedural surfaces

import { gridSurfacePolygons } from "@glyphcss/core";
const { polygons: waves } = gridSurfacePolygons({
  z: [[0, 0.3, 0], [0.3, 0.6, 0.3], [0, 0.3, 0]],
});

Pass the generated polygons to a mesh. Use mesh.setPolygons(nextPolygons) when the surface changes; rebuild geometry only when its data changes.

Combine shapes

scene.add(cube, { position: [-2, 0, 0] });
scene.add(floor, { position: [0, -1, 0] });

Each call returns a handle with setTransform, setPolygons, and dispose. Framework bindings compose multiple GlyphMesh children. For file-based geometry, see loading meshes.