# Introduction

**glyphcss** turns 3D meshes into text. Drag to orbit; open **Code**.



```ts
import { createGlyphPerspectiveCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { loadMesh, recenterPolygons } 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" });
scene.output.style.fontSize = "10px";
scene.output.style.lineHeight = "1";
scene.fit();
const { polygons } = await loadMesh("/gallery/glb/apple.glb", { solidTextureSamples: false });
scene.add(recenterPolygons(polygons));
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



## The actual DOM output

```js
import { cubePolygons } from "@glyphcss/core";
import { compileScene, createGlyphOrthographicCamera } from "glyphcss";

const { html } = compileScene({
  polygons: cubePolygons({ center: [0, 0, 0], size: 1 }),
  camera: createGlyphOrthographicCamera({ rotX: 60, rotY: 30, zoom: 200 }),
  cols: 20, rows: 9, mode: "solid", useColors: false,
});
document.body.insertAdjacentHTML("beforeend", html);
```

Rendered HTML, blank margins omitted:

```html
<pre class="glyph-output">
        %%@%%
     %%%%%%%%%%@
     %%%@%%%@@@@
     %%%%%%%@@@@
     %@%%%@%@@@@
        %%%%@
</pre>
```

Use a monospace font and `line-height: 1`. Scenes update on changes; static output needs no JavaScript.

## Packages

| Package | Use |
|---|---|
| [glyphcss](/quickstart/) | Browser renderer |
| [@glyphcss/core](/api/types/) | Math, geometry, parsers |
| [@glyphcss/react](/api/react/) | React bindings |
| [@glyphcss/vue](/api/vue/) | Vue bindings |
| [@glyphcss/compile](/guides/compile/) | Build-time rendering and CLI |
| [@glyphcss/effects](/guides/effects/) | Animated surface effects |
| [@glyphcss/charts](/charts/overview/) | Data charts |
| [@glyphcss/diagrams](/diagrams/overview/) | Mermaid and graph diagrams |
| [@glyphcss/maps](/maps/overview/) | Geographic maps |
| [@glyphcss/fluid](/fluid/overview/) | Braille fluid text surface and speed reader |
| [@glyphcss/fonts](/guides/text/) | Extruded text meshes |

Try the [quickstart](/quickstart/) or [gallery](/gallery/).