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

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

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.


@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

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/

@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? - #3 by alxdncn

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

CSS3DRenderer as a texture? You can give it a try :slight_smile: I’m not so experienced with that renderer.
But… So far, for me (I’m saying about my impression exclusively) it seems that, taking this way, you’re trying to find a backdoor whilst the main entrance is open.

1 Like

Yeah I think now I’m getting into an experimental area of Three.js, just need to think creative for this challenge. Thanks for all the info and direction!

And thank you to everyone for your participation, hope more viewers will add their font findings here as well!

@ben Have a look at this thread.

1 Like

Once again you are opening my mind!
For the past hour i’ve been playing with your code!
Thanks so much for showing the potential of Fabric.js!

@ben You’re welcome :slight_smile:
I hope you’ve finally refused the idea to use THREE.CSS3DRenderer()'s render as a texture.

1 Like

Thought I’d ask before I get too ahead of myself, running on pure excitement.

Can your Three.js + Fabric.js be used with displacementMap + displacementScale?

Been attempting with merging from my other prototype. Thinking your Three.js + Fabric.js script using the CSS3DRenderer is treated as a viewer (refresh after refresh) appears my attempts are not rendering as a material for displacement map in Three.js?

material = new THREE.MeshPhongMaterial({color: 0xff2222, specular: 0xee1111, shininess: 150, transparent:true, opacity:1.0});
var mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
    map: canvasTexture
  mesh = new THREE.Mesh(geometry, material);
canvas.on("after:render", function() {
    mesh.material.map.displacementMap = new THREE.Texture(cnvs);
    mesh.material.map.displacementScale = 15;
    mesh.material.map.needsUpdate = true;
    mesh.material.map.displacementMap.needsUpdate = true;


Really cool to watch Fabric.js hug the warp on the Three.js surface!

Possibly need to snapshot the CSS3DRenderer somehow to use as a displacement material in Three.js. Prefer not to snapshot though to continue with the Fabric.js editing capabilities.

Really like the use case of Fabric.js!

Will keep hammering away at achieving the displacement map unless there is a limitation I’m unaware of with the CSS3DRenderer use case with Fabric.js. Thanks for all your help so far!

Have a look at this jsfiddle :slight_smile:

You can move or rotate the writing. Or even edit it dynamically (just click it twice).
No matter, what you do, changes will be applied to the mesh immediately.