@foxglove/three-text
Render text in 3D using Signed Distance Fields
Usage
View live example in Storybook. View example usage at LabelPool.stories.tsx.
To run Storybook locally, run yarn storybook.
- For WebGLRenderer:
import { LabelPool } from "@foxglove/three-text"; - For WebGPURenderer:
import { LabelPool } from "@foxglove/three-text/webgpu";
const labelPool = new LabelPool();
const label = labelPool.acquire();
label.setText("hello");
label.setColor(r, g, b, a);
label.setBackgroundColor(r, g, b, a);
label.setBillboard(true);
label.setSizeAttenuation(true); // sizeAttenuation=false requires billboard=true
label.setAnchorPoint(x, y);
label.setLineHeight(0.5);
// cleanup...
labelPool.release(label);