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
Auto loading font files
Give your font path files and the module will load these for you
const text = 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, etctext
(string) the text to layout. Newline characters (\n
) will cause line breakswidth
(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 tofont.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 (defaulttext.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 beleft
,center
orright
(defaultleft
)y
(string) Text anchor. Can betop
,center
orbottom
(defaulttop
)
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 shaderfragment
(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