troika-3d-text

troika-3d-text

PLEASE NOTE: The standalone TextMesh for Three.js, which used to be accessible from this package in a custom dist/textmesh-standalone.umd.js file, has been promoted to its own package, troika-three-text. You can now just import Text from that package directly:

import { Text } from 'troika-three-text'

let myText = new Text()

---

This package provides high quality text rendering in the Troika scene management framework, using signed distance fields (SDF) and antialiasing using standard derivatives. It is based on troika-three-text.

Demo

Here's an online demo.

Installation

Get it from NPM:

npm install troika-3d-text

You will also need to install a compatible version of Three.js; see the notes in the Troika 3D Readme for details.

Usage

Import the Text3DFacade class:

import { Text3DFacade } from 'troika-3d-text'

...then use it within your scene descriptor to configure it:

{
  key: 'my-text',
  facade: Text3DFacade,
  text: 'Hello world!',
  fontSize: 0.2,
  color: 0x9966FF,
  z: -2
  // ...etc.
}

Supported properties

Text3DFacade supports all properties supported by the Text mesh from troika-three-text; see the documentation there for details.

Changelog

0.39.0 (2021-02-15)

Bug Fixes

• restore compatibility with three versions <0.113.0 by copying MathUtils.generateUUID (35856b5)

Features

• troika-core: add requestRender method as nicer shortcut (c79254c)
• troika-three-text: add curveRadius for applying cylindrical curvature (6fdfbbf)
• troika-three-text: export a function for debugging SDF textures (3fb0c23)
• troika-three-text: pack SDFs using all 4 color channels, to increase max glyphs in a texture (d236caf)
• troika-xr: add basic TeleportControls (319ed29)