𝔽 How many ways to load a font in Three.js?

WebGLRenderer
https://threejs.org/docs/index.html#api/renderers/WebGLRenderer


@donmccurdy = HTMLtoCanvas



Custom Triangulation
http://r3mi.github.io/poly2tri.js/


Custom TTF-to-JSON
https://gero3.github.io/facetype.js/ = TTF

Three.js Font: https://threejs.org/docs/index.html#api/extras/core/Font
Used with TextGeometry: https://threejs.org/docs/index.html#api/geometries/TextGeometry

@donmccurdy = https://msdf-bmfont.donmccurdy.com/ = MSDF

Fontpath = claims to be a better version of typeface



Bitmap Font
http://www.geofx.com/graphics/nehe-three-js/lessons09-16/lesson13/lesson13.html

@donmccurdy = https://www.npmjs.com/package/three-bmfont-text = used in A-Frame


Vector Font
http://www.geofx.com/graphics/nehe-three-js/lessons09-16/lesson14/lesson14.html


Signed Distance Field Fonts(SDF)
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817#4a3c
image


GPU Text
http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/
image


Sprite
https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html

https://stemkoski.github.io/Three.js/Labeled-Geometry.html


SVG Path
https://threejs.org/examples/webgl_geometry_shapes.html


Displacement Map = height map
@prisoner849 = https://threejs.org/examples/webgl_materials_displacementmap.html


Freetype GL


image

OpenType 2



3D Object Loading
Where you import a 3D object from your favorite 3D editor(Blender, Maya, 3DSMAX, Sketchup) into Three.js


Troika 3D Text Library
Discourse: Troika-3d-text: library for SDF text rendering
Github: https://github.com/protectwise/troika/tree/master/packages/troika-three-text
Example: https://troika-examples.netlify.app/#text
image


Discourse: Three Typeable Text
Github: https://github.com/hexafield/three-typeable-text

1 Like