TextElement

TextElement represents a rich, stylized text object that can be placed in a 2D/3D scene. Allows full control over typography, alignment, wrapping, anchoring, and visual effects.

Example:

const textElement = new TextElement();
scene.add(textElement);

text: string

The actual string content to display.

Example:

textElement.text = "Hello World!";

fontSize: number

The font size in world units or pixels, depending on the render context.

Example:

textElement.fontSize = 1.5;

color: THREE.Color | string

The main fill color of the text. Accepts either a THREE.Color instance or a string (e.g., "#fff", "red").

Example:

textElement.color = "#ff0000"; // Red text

maxWidth: number

Maximum width of the text block. Text exceeding this width will wrap according to the overflowWrap and whiteSpace settings.

Example:

textElement.maxWidth = 5;

letterSpacing: number

Space between characters (letter spacing). Positive values increase spacing, negative values tighten it.

Example:

textElement.letterSpacing = 0.05;

lineHeight: number

The vertical distance between lines of text. Expressed in world units or relative scale.

Example:

textElement.lineHeight = 1.2;

textAlign: TextAlign

Horizontal alignment of text lines within the text box.

Example:

textElement.textAlign = "center";

anchorX: TextAnchorX

Horizontal anchor point for text placement.

Example:

textElement.anchorX = "middle";

anchorY: TextAnchorY

Vertical anchor point for text placement.

Example:

textElement.anchorY = "middle";

overflowWrap: TextOverflow

Determines how long words or content are wrapped when they exceed maxWidth.

Example:

textElement.overflowWrap = "break-word";

textIndent: number

Indentation applied to the first line of each paragraph.

Example:

textElement.textIndent = 0.5;

curveRadius: number

Defines a radius for laying text along a curved path. Values > 0 will bend the text along a circular arc.

Example:

textElement.curveRadius = 2;

whiteSpace: TextWhitespace

Controls how whitespace characters and wrapping are handled. 'nowrap' will force single-line rendering.

Example:

textElement.whiteSpace = "nowrap";

strokeWidth: number

Width of the stroke (outline) around each character.

Example:

textElement.strokeWidth = 0.05;

strokeColor: THREE.Color | string

Color of the character stroke.

Example:

textElement.strokeColor = "#000000"; // Black stroke

strokeOpacity: number

Opacity of the stroke. Range: 0 (transparent) to 1 (fully visible).

Example:

textElement.strokeOpacity = 0.8;

outlineWidth: number

Additional outer stroke used for outlining.

Example:

textElement.outlineWidth = 0.1;

outlineColor: THREE.Color | string

Color of the outline effect.

Example:

textElement.outlineColor = "#ffffff";

outlineBlur: number

Applies a blur to the outline to create a glow or shadowed appearance.

Example:

textElement.outlineBlur = 0.2;