Text

import { Text } from '../lib/fabric'

<Text position={[-2, -2, 0]} size="16px" color="#000">Hello</Text>
<Text color="#fff">{['Master the ', { text: 'Flow', color: '#0f0' }]}</Text>

Prop	Type	Default	Notes
children	string or (string | { text, color })[]	''	Segments override color for their run; \n breaks a line
font	string	'telegraf-regular'	Loads /fonts/{font}.glyphs
position	[x, y, z]	[0, 0, 0]	Text anchor
rotation	[x, y, z]	[0, 0, 0]	Degrees
size	string or number		CSS size in screen pixels: "16px", "1rem", "1.5em", or 16. Resolved per frame; overrides scale
scale	number	1	World units per em; used only when size is unset
color	string	'#ffffff'	Hex, with optional alpha
aa	number	4	Samples per pixel: 1, 4, 9 or 16

size renders at exactly that many screen pixels regardless of fov, zoom, cameraZ or viewport. 1em and 1rem are both 16 px — a flat scene has no parent font size to inherit.

Rotation about X or Y still foreshortens, as a rotated HTML element would.

See Text for how glyphs are rendered.