Troika‑Three‑Text is a standalone library that enables premium text rendering in pure Three.js scenes through Signed Distance Field (SDF) techniques and built-in antialiasing. Unlike other solutions, it loads font files (.ttf, .otf, .woff) at runtime, generates only necessary glyphs dynamically, and handles kerning, ligatures, and full unicode support—all inside a web worker to avoid slowing down the main thread. It patches standard Three.js materials so text benefits from lighting, fog, and shadows. This makes it ideal for adding crisp, dynamic text to real‑time web graphics powered by Three.js.

Key Features

Parses font files at runtime and generates SDF atlases on demand
Full support for ligatures, kerning, right‑to‑left scripts, and unicode fallback
All heavy computation performed off the main thread (web worker) for smooth performance
Integrates directly with Three.js materials—supports lighting, shadows, fog, and other effects
Simple API: instantiate Text, set properties (text, fontSize, color, etc.), call sync() to render

Ideal Use Cases

Rendering crisp 3D labels, UI text, and annotations in Three.js scenes
Multilingual, dynamic layouts with right‑to‑left or complex scripts
Real‑time applications like games, product config, or data visualizations
Projects requiring text that responds to scene lighting, physics, or environment

Why Choose Troika‑Three‑Text?

Troika‑Three‑Text offers a performant and flexible way to render text in Three.js without pre‑baked textures or complex setup. It delivers high visual fidelity, dynamic layout control, and multilingual support in a lightweight package. Perfect for developers and designers wanting advanced, in‑scene text with minimal boilerplate and maximum control.

Tools & Resources Tagged with Three.js Extension