[](https://github.com/SolalDR/three-msdf-text/actions?workflow=build) [](https://gi
npm install 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
``javascript
;(async () => {
const textureLoader = new THREE.TextureLoader()
const fontLoader = new THREE.FontLoader()
const atlas = textureLoader.loadAsync('./font/font.png')
const font = 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)
})()
`
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.
`javascript`
const geometry = new TextGeometry({
...options,
uv: true,
normal: true,
})
The properties width and height are automatically computed.uv
The attribute is interpolate based on the width and height values.width
You may want to force the value to wrap automatically.width
You may also want to force and height values to correctly interpolate uv` attribute.
Please refer to the contribution guidelines for details.
This library is unlicensed.
The original code that this library was written by ogl contributors and is unlicensed.