Text

Text dibuja texto MSDF con troika: es nítido a cualquier tamaño, y un Glass encima lo refracta como al resto de la escena.

El mismo texto MSDF a varios tamaños.

Uso

<Text text="Colecciones" as="h2" fontSize={22} maxWidth={320} />

La fuente se carga de forma asíncrona, en .ttf, .otf o .woff. troika no lee .woff2.

Color por tramo

colorRanges da color propio a tramos del texto, en índices UTF-16, sin un mesh por tramo. Los links y el código de esta documentación se dibujan así.

<Text
  text="Ver la referencia"
  color="#646464"
  colorRanges={[{ start: 4, end: 17, color: '#1d1d1e' }]}
/>

Accesibilidad

Con as, el texto también existe como un elemento real e invisible en la capa del bridge, con su rol y su nivel. Sin as, es solo del canvas y no genera DOM.

Referencia de props

Prop	Tipo	Default	Rango	Descripción
`text`	`string`	`requerido`		Contenido textual a renderizar.
`fontSize`	`number`	`16`		Tamaño de fuente en unidades de mundo (= píxeles con cámara 1:1).
`color`	`string`	`'#ffffff'`		Color CSS hex o nombre.
`font`	`string`	`fuente del sistema de troika`		URL de la fuente (.ttf, .otf, .woff).
`alignment`	`TextAlignment`	`'left'`		Alineación horizontal del bloque de texto.
`anchorX`	`number`	`0`	`0..1`	Anclaje X normalizado. 0 = izquierda, 0.5 = centro, 1 = derecha.
`anchorY`	`number`	`0`	`0..1`	Anclaje Y normalizado. 0 = arriba, 0.5 = centro, 1 = abajo.
`maxWidth`	`number`	`Infinity (sin wrap)`		Ancho máximo antes de hacer wrap.
`lineHeight`	`number`	`1.2`		Altura de línea como multiplicador de fontSize.
`letterSpacing`	`number`	`0`		Espaciado entre letras en unidades de mundo.
`whiteSpace`	`TextWhiteSpace`	`'normal'`		Modo de wrap: 'nowrap' deja el texto en una línea aunque haya maxWidth.
`colorRanges`	`readonly TextColorRange[]`	`undefined`		Tramos con color propio: las unidades UTF-16 [start, end), como selectionStart. Sirve para links o resaltado de código sin un mesh por tramo. Cambiarlos dispara un sync() de troika.
`as`	`TextElement`	`undefined`		Shadow Layer de runtime (opt-in): con as, el texto también existe como un elemento real (<h1>…<h6>, <p>, <span>) e invisible en la capa del bridge, proyectado sobre el bloque dibujado. Es lo que lee un lector de pantalla, con el rol y el nivel del elemento. Sin as, el texto es solo del canvas y no genera DOM.
`x`	`number`	`—`
`y`	`number`	`—`
`z`	`number`	`—`

Anterior: Video

Siguiente: GlassButton