---
date: 2026-6-17
---

<!-- markdownlint-disable MD001 -->

# Create Text

![text](https://threejs.org/examples/screenshots/webgl_modifier_tessellation.jpg)

Sometimes you need text in your Three.js scene — a label, a title, a UI element. There are two main ways to do it, and which you choose depends on what you're building.

### method 1: HTML + CSS (fastest)

The quickest way to add text is to just put it in an HTML element and position it on top of your canvas. This is the simplest approach and works great for titles, descriptions, and UI labels.

<div style="font-size: .75rem">HTML</div>

```html
<div id="description">Your text goes here</div>
```

<div style="font-size: .75rem">CSS</div>

```css
#description {
    position: absolute;
    top: 10px;
    left: 0;
    display: block;
    inline-size: 100%;
    text-align: center;
    z-index: 100;
    color: white;
    font-family: sans-serif;
}
```

The text sits **on top** of your 3D canvas but doesn't exist inside the 3D world. That means it never moves, rotates, or scales with the scene — it stays fixed on screen like a subtitle.

**Good for:** Titles, labels, instructions, UI text.

**Not good for:** Text that needs to exist inside the 3D world (like a sign on a wall).

### method 2: TextGeometry (3D text)

If you want actual 3D text that exists inside your scene — something that rotates with the camera, casts shadows, or sits on a surface — you need `TextGeometry`.

```javascript
import * as THREE from 'three';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';

const loader = new FontLoader();

// Load a font file first (you need a .json font)
loader.load('/fonts/helvetiker_regular.typeface.json', (font) => {
    const geometry = new TextGeometry('Hello Three.js', {
        font: font,
        size: 1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelSegments: 5,
    });

    const material = new THREE.MeshStandardMaterial({ color: 0x4488ff });
    const text = new THREE.Mesh(geometry, material);
    scene.add(text);
});
```

This creates real 3D geometry — the letter shapes have depth, catch light, and cast shadows.

**Good for:** 3D titles, logos, in-world signs.

**Not good for:** Long paragraphs of text (it creates a lot of geometry).

### which method should you use?

| You want to...                              | Use this     |
| ------------------------------------------- | ------------ |
| Add a title or label quickly                | HTML + CSS   |
| Text that stays fixed on screen             | HTML + CSS   |
| 3D text that exists inside the scene        | TextGeometry |
| Text that rotates, scales, or moves with 3D | TextGeometry |
| Long paragraphs or dynamic content          | HTML + CSS   |

Most of the time, HTML + CSS is the right answer. But when you need 3D text, `TextGeometry` has you covered.
