See the test-3d.js for a full example.
To generate signed distance field fonts, you could use a tool like Hiero. See here for a full guide:
https://github.com/libgdx/libgdx/wiki/Distance-field-fonts
This module exports shaders/sdf
for convenience. It uses standard derivatives extension for anti-aliasing if available, otherwise falls back to gl_FragCoord.w
.
Options:
opacity
the opacity, default 1.0color
the color to tint the text, default 0xffffffalphaTest
the alpha test value, defaults to 0.0001precision
the fragment shader precision, default 'highp'
Note: RawShaderMaterial
is required in order to support a wide range of ThreeJS versions.
var Shader = require('three-bmfont-text/shaders/sdf')
var material = new THREE.RawShaderMaterial(Shader({
map: fontAtlas,
side: THREE.DoubleSide,
transparent: true,
color: 'rgb(230, 230, 230)'
}))