𝔽 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

Other font resources

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

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

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.

1 Like

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

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 );

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
image
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!!!
image

That’s what I was saying about :slight_smile:

2 Likes

@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?

This thread, for example :slight_smile:

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

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

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.

In addition to the collection of fonts.

When I started out with three.js, I made a font with balls.20180307-1123-5535

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.

20180307-1135-51998

Excerpt from the font definition.

20180307-1128-47349

@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

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?

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

1 Like

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

@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

Have a look at http://fabricjs.com/
https://jsfiddle.net/gislef/Lvfpq57h/

@prisoner849 I see your sharing how I could do CSS property manipulations without using the CSS3DRenderer while directly using the WebGLRender

More after how CSS3DRenderer can display Google Fonts but then use as a displacement map because then I could use any font I chose with the bottles I create.

:slight_smile: WOW this guy and I think alike: Is there a way to store the render of a CSS3DRenderer?

@prisoner849 Still would like to hear what you have to say:
Would CSS3Drenderer as texture to WebGLRenderer be possible in this case?