Constructing shapes from glyphs at runtime for three.js.
- Shapes - Load font from url.
- Array Buffer - Select font from file system.
- Points | Lines | Tubes | Edges | Along Path | Cannon
Via npm: ( npm i ycw/three-font-outliner#v2.0.0 )
import { FontOutliner } from "three-font-outliner"Via cdn:
import { FontOutliner } from "https://cdn.jsdelivr.net/gh/ycw/three-font-outliner@2.0.0/dist/lib.esm.js"// Ex. Show text "Shapes" using font "aqua.ttf".
const outliner = await FontOutliner.fromUrl(THREE, "./aqua.ttf");
const { shapes } = outliner.outline("Shapes");
scene.add(new THREE.Mesh(
new THREE.ShapeBufferGeometry(shapes, 16).center(),
new THREE.MeshBasicMaterial({ color: "blue", side: THREE.DoubleSide })
));Live result: Shapes
Make a font outliner:
// Method 1: Load from `Arraybuffer` holding the font file.
const outliner = new FontOutliner(THREE, arrayBuffer);
// Method 2: Load from url. (async)
const outliner = await FontOutliner.fromUrl(THREE, fontUrl);- Ex. Array Buffer - Select font from file system.
- Ex. Shapes - Load font from url.
Then, outline glyph:
const result = outliner.outline("hello");
result.shapes; // Array of `THREE.Shape`
result.h; // Line height
result.w; // Advance width
result.yMin; // Bottom (usually a negative value)
result.yMax; // Top.outline() accepts optional options:
const result = outliner.outline("hello", {
size: 100, // Font size. Default 100,
isLTR: true, // Is left-to-right writing mode? Default true.
isCCW: false, // Is solid shape using CCW winding? Default false.
});Check if certain glyph exists by unicode code point:
const codePoint = 65;
outliner.hasGlyph(codePoint); // return true / false