@threepipe/plugin-troika-text

Troika Three Text provides high quality text rendering in Three.js scenes, using signed distance fields (SDF) and antialiasing using standard derivatives.

This plugin adds support for troika text objects with uiconfig, g-buffer and serialization support.

It also adds a generator to the Object3DGeneratorPlugin to create text objects from the UI, which can then be saved in glTF and loaded back with the plugin.

Example — Source Code — API Reference

npm install @threepipe/plugin-troika-text

Includes TroikaTextPlugin that exposes API to create and update troika text objects, attaches object extension to objects in scene with troika text properties for editable UI, and handles serialization and deserialization of text data by storing it in userData.

To use the plugin, simply add it to the viewer or editor:

import { ThreeViewer } from 'threepipe';
import { TroikaTextPlugin } from '@threepipe/plugin-troika-text';

const viewer = new ThreeViewer({...});
const root = document.body // set a custom html root to add the timeline panel, document.body is the default if not passed
const troikaText = viewer.addPluginSync(new TroikaTextPlugin());

// Create a text object
const textObj = troikaText.createText({
    text: 'Hello, ThreePipe!',
    fontSize: 1,
    position: { x: 0, y: 1, z: 0 }
});
// add it to the scene
viewer.scene.addObject(textObj);

// or use the Object3DGeneratorPlugin to create text objects from the UI or API
const textObj2 = viewer.getPlugin(Object3DGeneratorPlugin)?.generate('troika-text-plane', {text: 'Hello'})

// Update a text object
troikaText.updateText(textObj, {
    text: 'Updated Text',
    fontSize: 2,
});