TextElement

TextElement representa un objeto de texto rico y estilizado que puede colocarse en una escena 2D/3D. Permite control total sobre tipografía, alineación, ajuste, anclaje y efectos visuales.

Ejemplo:

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

text: string

El contenido de texto a mostrar.

Ejemplo:

    textElement.text = "Hello World!";

fontSize: number

El tamaño de la fuente en unidades del mundo o píxeles, dependiendo del contexto de renderizado.

Ejemplo:

    textElement.fontSize = 1.5;

color: THREE.Color | string

El color principal del relleno del texto. Acepta una instancia de THREE.Color o una cadena (por ejemplo, "#fff", "red").

Ejemplo:

    textElement.color = "#ff0000"; // Texto rojo

maxWidth: number

El ancho máximo del bloque de texto. El texto que exceda este ancho se ajustará según la configuración de overflowWrap y whiteSpace.

Ejemplo:

    textElement.maxWidth = 5;

letterSpacing: number

Espaciado entre caracteres. Los valores positivos aumentan el espacio, los negativos lo reducen.

Ejemplo:

    textElement.letterSpacing = 0.05;

lineHeight: number

La distancia vertical entre líneas de texto. Se expresa en unidades del mundo o escala relativa.

Ejemplo:

    textElement.lineHeight = 1.2;

textAlign: TextAlign

Alineación horizontal de las líneas de texto dentro del cuadro.

Ejemplo:

    textElement.textAlign = "center";

anchorX: TextAnchorX

Punto de anclaje horizontal para la colocación del texto.

Ejemplo:

    textElement.anchorX = "middle";

anchorY: TextAnchorY

Punto de anclaje vertical para la colocación del texto.

Ejemplo:

    textElement.anchorY = "middle";

overflowWrap: TextOverflow

Determina cómo se ajustan las palabras o el contenido cuando superan maxWidth.

Ejemplo:

    textElement.overflowWrap = "break-word";

textIndent: number

Sangría aplicada a la primera línea de cada párrafo.

Ejemplo:

    textElement.textIndent = 0.5;

curveRadius: number

Define un radio para disponer el texto en una trayectoria curva. Valores > 0 doblan el texto a lo largo de un arco circular.

Ejemplo:

    textElement.curveRadius = 2;

whiteSpace: TextWhitespace

Controla cómo se manejan los espacios en blanco y el ajuste. 'nowrap' forzará el renderizado en una sola línea.

Ejemplo:

    textElement.whiteSpace = "nowrap";

strokeWidth: number

Grosor del trazo (contorno) alrededor de cada carácter.

Ejemplo:

    textElement.strokeWidth = 0.05;

strokeColor: THREE.Color | string

Color del trazo de los caracteres.

Ejemplo:

    textElement.strokeColor = "#000000"; // Trazo negro

strokeOpacity: number

Opacidad del trazo. Rango: 0 (transparente) a 1 (totalmente visible).

Ejemplo:

    textElement.strokeOpacity = 0.8;

outlineWidth: number

Grosor del contorno adicional usado para resaltar.

Ejemplo:

    textElement.outlineWidth = 0.1;

outlineColor: THREE.Color | string

Color del efecto de contorno.

Ejemplo:

    textElement.outlineColor = "#ffffff";

outlineBlur: number

Aplica un desenfoque al contorno para crear un efecto de brillo o sombra.

Ejemplo:

    textElement.outlineBlur = 0.2;