three-msdf-text

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.

three-msdf-text

three-msdf-text

How to use

Attributes

width, height

Contributing

Unlicense

Settings

On This Page