MSDF Text for ThreeJS

Bitmap font rendering for ThreeJS. Based on three-bmfont-text by Jam3 (https://github.com/Jam3/three-bmfont-text). With more parameters, auto-loading and es6 syntax.

Install

npm i three-msdf --save

Examples

Custom loading

Load your font files before

import loadFont from 'load-bmfont'
import { TextureLoader } from 'three'
import ThreeMSDF from 'three-msdf'

loadFont('fonts/myFont.json', (err, font) => {
  if (err) throw err
  new TextureLoader().load('fonts/myFont.png', (texture) => {
    const text = new ThreeMSDF({
      options: {
        font: font,
        text: 'Hello World!'
      },
      texture: texture,
      camera: yourCamera,
      renderer: yourWebGLRenderer
    })
  })
})

Auto loading font files

Give your font path files and the module will load these for you

import ThreeMSDF from 'three-msdf'

const text = new ThreeMSDF({
  options: {
    fontInfos: 'fonts/myFont.json',
    fontImage: 'fonts/myFont.png'
    text: 'Hello World!'
  },
  camera: yourCamera,
  renderer: yourWebGLRenderer
})

Parameters

• options (object)

  • flipY (boolean) whether the texture will be Y-flipped (default true)
  • multipage (boolean) whether to construct this geometry with an extra buffer containing page IDs. This is necessary for multi-texture fonts (default false)
  • font (required) the BMFont definition which holds chars, kernings, etc
  • text (string) the text to layout. Newline characters (\n) will cause line breaks
  • width (number, optional) the desired width of the text box, causes word-wrapping and clipping in "pre" mode. Leave as undefined to remove word-wrapping (default behaviour)
  • mode (string) a mode for word-wrapper; can be 'pre' (maintain spacing), or 'nowrap' (collapse whitespace but only break on newline characters), otherwise assumes normal word-wrap behaviour (collapse whitespace, break at width or newlines)
  • align (string) can be "left", "center" or "right" (default: left)
  • letterSpacing (number) the letter spacing in pixels (default: 0)
  • lineHeight (number) the line height in pixels (default to font.common.lineHeight)
  • tabSize (number) the number of spaces to use in a single tab (default 4)
  • start (number) the starting index into the text to layout (default 0)
  • end (number) the ending index (exclusive) into the text to layout (default text.length)
  • fontInfos (string) Path of your font file (default false)
  • fontImage (string) Path of your Image font file (default false)
  • fontSize (number) Size of your text (default 16)
  • anchor (object)
    • x(string) Text anchor. Can be left, center or right (default left)
    • y(string) Text anchor. Can be top, center or bottom (default top)
  • segments (object)
    • x(number) Number of divisions by letter (default 1)
    • y(number) Number of divisions by letter (default 1)

• texture (string) ThreeJS texture of your font

• shaders (object)

  • vertex (string) Custom vertex shader
  • fragment (string) Custom fragment shader

• uniforms (object) Custom uniforms

• parameters (object) ThreeJS parameters for the ShaderMaterial

• camera ThreeJS Camera. This is needed for the calculation of the font size

• renderer ThreeJS Renderer. This is needed for the calculation of the font size