three-msdf-text

Demo - Documentation - Repository

Provide geometry and material for MSDF (multi-channel signed distance fields) in THREE.js.

Features:

• Many advanced attributes
• Support all THREE.js Material
• Typescript
• No dependencies
• Geometry subdivision

How to use

;(async () => {
  const textureLoader = new THREE.TextureLoader()
  const fontLoader = new THREE.FontLoader()

  const atlas = await textureLoader.loadAsync('./font/font.png')
  const font = await fontLoader.loadAsync('./font/font.fnt')

  const geometry = new TextGeometry({
    font,
    text: 'Hello world',
  })

  const material = extendMSDFMaterial(
    new THREE.MeshBasicMaterial({
      color: 0xffffff,
      transparent: true,
    }),
    { atlas },
  )

  const mesh = new THREE.Mesh(geometry, material)
})()

Attributes

You can use a lot of different attributes depending on your needs :

Attribute	Size	Required	Enabled	Description
id	1	true	true	Used for face indexing
position	3	true	true	The classic position attribute used in three.js
charUv	2	true	true	UV coords used in the font atlas
uv	2	false	false	The classic uv attribute used in three.js
normal	3	false	false	The classic normal attribute used in three.js
lineIndex	1	false	false	See schema below
charIndex	1	false	false	See schema below
wordIndex	1	false	false	See schema below
charSize	2	false	false	See schema below
lineCharIndex	1	false	false	See schema below
lineWordIndex	1	false	false	See schema below
lineCharCount	1	false	false	See schema below
lineWordCount	1	false	false	See schema below

For example, with a THREE.MeshStandardMaterial material, you will need uv and normal attributes.

const geometry = new TextGeometry({
  ...options,
  uv: true,
  normal: true,
})

width, height

The properties width and height are automatically computed. The uv attribute is interpolate based on the width and height values. You may want to force the width value to wrap automatically. You may also want to force width and height values to correctly interpolate uv attribute.

Contributing

Please refer to the contribution guidelines for details.

Unlicense

This library is unlicensed.

The original code that this library was written by ogl contributors and is unlicensed.