
Troika Three Text
High‑quality text rendering in Three.js using SDF on‑the‑fly for crisp and dynamic text output.
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Sponsors
Links
Newsletter
Stay Updated with Three.js Resources!
- Weekly curated Three.js resources and tools.
No spam, unsubscribe at any time.
Description
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.), callsync()
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.