About

Constructing shapes from glyphs at runtime for three.js.

Examples

• Shapes - Load font from url.
• Array Buffer - Select font from file system.
• Points | Lines | Tubes | Edges | Along Path | Cannon

Installation

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/[email protected]/dist/lib.esm.js"

Usage

// 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

Docs

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

Credits

• photopea/Typr.js
• mrdoob/three.js

License

MIT