# Creating Shapes

```ts
import { createGlyphPerspectiveCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { resolveGeometry } from "@glyphcss/core";

const host = document.getElementById("scene");
const camera = createGlyphPerspectiveCamera({ rotX: 65, rotY: 0, zoom: 0.3, distance: 0, perspective: 32000, stretch: 1 });
const scene = createGlyphScene(host, { camera, autoSize: true, mode: "solid", colorEncoding: "spans" });
scene.output.style.fontSize = "10px";
scene.output.style.lineHeight = "1";
scene.fit();
const polygons = resolveGeometry("cuboctahedron", { size: 100 });
scene.add(polygons);
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



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 |

```ts
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

```ts
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

```ts
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

```ts
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](/guides/meshes/).