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

[ben]

This is for those that wished they had a document for the many font ways with Three.js.
Maybe you know of another way please participate to this listing if you can think of another way.

My journey on fonts in Three.js to create 3D text at runtime without having to load a typeface.json. CSS3DRenderer looked promising though NOT allowed in generating a mesh ONLY the WebGLRenderer allows this to happen.

Do you know of another way to load a font into Three.js?

[ben]

CSS3DRender
https://rawgit.com/Mugen87/three.js/dev8/docs/index.html#examples/renderers/CSS3DRenderer
Flat and NOT able to use WebGLRenderer to render CSS3DRenderer text as a 3D mesh speaks directly to DOM. The most you can do here is what you can load with HTML/CSS: web safe fonts, @font-face, loading in from a web service: Google fonts…

[ben]

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

---

@donmccurdy = HTMLtoCanvas
http://learningthreejs.com/blog/2014/05/02/easy-to-use-dynamic-texture-to-write-text-in-your-3d-object-with-threex-dot-dynamictexture-game-extensions-for-three-dot-js/

---

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
https://github.com/mattdesl/fontpath

---

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

---

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

---

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
https://github.com/rougier/freetype-gl

OpenType 2
https://www.npmjs.com/package/opentype.js

---

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

[ben]

Other font resources

Unity
VText = This is what caught my eye: Creating 3D text @ runtime
https://assetstore.unity.com/packages/tools/modeling/vtext-24768

Vtext - Das Asset um dynamsiche 2D- und 3D_Texte in Unity zu erzeugen

TextMesh Pro = doesn’t appear to be 3D related more like SDF
https://assetstore.unity.com/packages/essentials/beta-projects/textmesh-pro-84126

[looeee]

Wow! Some good options there, thanks for the write up.

I would say that, for your purpose of writing on old bottles, a displacement map would give the best and easiest result.
You could use a 2D canvas, write the text there and use that to generate a texture for the displacement map.

[ben]

Welcome and thank you for your response!
Can you share a Three.js example of the 2D canvas concept you are describing?

[looeee]

Quite a few of the official examples use this technique. I’m on mobile now, and the only one I can remember is Canvas Sprites although there are probably better ones.

If you do a text search through all the examples for places where CanvasTexture is used you’ll probably find better ones.

Basically it works like this:

const canvas = document.createElement( 'canvas' );
canvas.width = 1024;
canvas.height = 1024;
var context = canvas.getContext( '2d' );

// Draw stuff such as text on the canvas

// Use canvas as a texture
const texture = new THREE.CanvasTexture( canvas );

[ben]

What you are describing sounds more interesting than what I’ve found:
three.js-displacement-map
http://meetar.github.io/three.js-displacement-map/three.js-displacement-gui.html

https://github.com/meetar/three.js-displacement-map

Which uses an image and i’m able to generate quickly, more interested in editing with text which sounds like the CanvasSprite/CanvasTexture can provide - YAY!!!

[prisoner849]

That’s what I was saying about

[ben]

@prisoner849 at first I was so focused on how to Create 3D text at runtime when you had mentioned I played with the displacement slider in the example and saw the height change on the spikes, which then I understood displacement = height map.

Are there more displacement examples you could share?

[prisoner849]

This thread, for example

How to draw a line between points in world space

HI, in my scene, I have a ground plane with a displacement map. A mouse click sets markers on the ground plane, although incorrectly on the y axis currently. I need to be able to draw a path or line between these markers. I have tried and can’t figure this one out or find much info on how to do this. Any help on ways to do this would really help. Thanks

[ben]

Missed an important thought need the text to be 3D geometry to 3D print. Back to using TTF-JSON - bummer Thinking if I use a displacement map then I’d need to create a modifier for the 3D object(bottle) to change the topology?

[looeee]

Could you explain more thoroughly what you are trying to do here?

[prisoner849]

if I use a displacement map then I’d need to create a modifier for the 3D object(bottle) to change the topology?

Why not?
In the user interface you work with displacement map for better performance. Then, before you want to send it to a 3D-printer, use a modifier for your geometry.

[hofk]

In addition to the collection of fonts.

When I started out with three.js, I made a font with balls.

It is mostly in German, but certainly understandable.
http://threejs.hofk.de/display/display.html

The font can be edited easily. It is in a simple text file.
This allows you to design your own characters.
You can use other objects instead of the three.js-spheres. For example, hexagons of lines.

Excerpt from the font definition.

[ben]

@all thank you for your responses

@prisoner849 sweet, have never seen a modifier of this caliber in three.js before, at least not realizing what I was looking at was modifying topology. This is great news hearing this is possible for 3D printing.

Indexing my brain for the past 10 minutes, I have seen this concept before. Just need to remember where the example is, I have it somewhere

Always thought when hearing of any kind of map: normal, bump, displacement and other related maps = gift wrapping or pho 3D = giving the illusion of 3D

Thank you for pushing me in this direction to use the displacement map!

@hofk that is a very interesting approach

[ben]

I think this is a form of displacement map modifying as to what we’ve been discussing @prisoner849 = https://threejs.org/examples/webgl_materials_texture_canvas.html?

[prisoner849]

Yes. This is a very good example from 2pha.

[ben]

Found something for fun while looking for the modifier: Wood Lathe
http://inear.se/lathe/

[ben]

@prisoner849
Could using the CSS3DRenderer as a displacement map be possible to render with the WebGLRenderer?

With the CSS3DRenderer not thinking CSS 3D Transform, thinking of using as a texture to do the topology modifier we’ve been discussing