Chapter 809: Creating Text (Manual)

Core Idea

A survey of the different ways to render text in a three.js app, ranging from a plain HTML/CSS overlay to fully procedural 3D text geometry, each with different integration and quality trade-offs.

Key Concepts

• HTML + CSS overlay: the simplest and fastest option, used for most descriptive overlays in three.js examples; not actually part of the 3D scene.
• CSS2DRenderer / CSS3DRenderer: render real DOM elements as if they were objects in the 3D scene, more tightly integrated than a plain overlay.
• Canvas-texture text: draw text with the 2D canvas API and apply the canvas as a texture on a plane (see the canvas-textures chapter).
• 3D-authored text: model text in an external 3D tool and import it like any other model.
• TextGeometry: generates a procedural 3D text mesh from a string, but requires a THREE.Font (loaded from a JSON font file) as input.
• Bitmap/SDF font rendering: libraries like troika-three-text or BMFont-based renderers give crisp antialiased text directly from .ttf/.woff files without pre-baking a glyph atlas.

Code Examples

// TextGeometry needs a loaded THREE.Font:
const geometry = new THREE.TextGeometry(text, parameters);

• What it demonstrates: the minimal call shape for generating procedural 3D text once a Font is available.

Key Takeaways

1. HTML/CSS overlays are the easiest way to add text and are what most three.js examples use for UI-style labels.
2. CSS2DRenderer/CSS3DRenderer place real DOM elements inside the 3D scene's coordinate system.
3. TextGeometry produces real 3D text meshes but needs a THREE.Font loaded first.
4. For high-quality antialiased text without generating your own glyph atlas, libraries like troika-three-text render directly from standard font files.

Connects To

• TextGeometry: the procedural 3D text approach detailed in this lesson.
• BufferGeometry: the underlying geometry type TextGeometry builds on.
• Canvas Textures (manual): the technique behind drawing text to a texture instead of building 3D geometry.