1.0.2 • Public • Published

    MSDF Text for ThreeJS

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


    npm i three-msdf --save


    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


    • 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


    npm i three-msdf

    DownloadsWeekly Downloads






    Last publish


    • yannisj