Text

To add text to a scene use:

const textObject = Text("hi!");

or add a Text object in the UI editor: edit-> + icon ->Text.

Properties

const optionalProps = {
  anchorX: "left | center | right", // default = 'left'
  anchorY: "top | center | bottom", // default = 'center'
  lineHeight: 1.1,
  letterSpacing: 1.1,
  wrap: 0.5, // default = 0 (none)
  font: "yourFontAssetName.tff",
  color: new THREE.Color() | "#fff0f0",
  material: someMaterial,
  // Allocate geometry for 250 characters
  // This is more efficient for dynamic text
  preallocate: 250,
};

const text = Text("Hello World", props);

Methods

// update the text
textObject.set("new string value");

// update text color
textObject.setColor("#fff000");
textObject.setColor(new THREE.Color());

Text Shader

All text in a scene uses one draw call per font.

Uva's text shader is performant and uses a texture atlas with one rectangle per character for rendering.