Troika Three Text

Troika Three Text

High‑quality text rendering in Three.js using SDF on‑the‑fly for crisp and dynamic text output.

Do you know a Resource we should add?Submit a new Resource!

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.), 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.