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

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


This is perfect!

Read: https://threejs.org/docs/#api/materials/MeshStandardMaterial noticed displacement existed wasn’t sure.
Thank you again for shedding light on the subject and pushing me in the right direction.

Nice demo! Displacement maps are totally underrated :laughing:

1 Like

If I get it correctly, the shader of displacement map uses only the red channel of a texture

@prisoner849 now I’m beginning to understand what you are sharing with me this is the actual formula that I can modify.

In the short time I’ve learned to modify three.js library

Not sure how to cause
on line 10001 of three.js i modify the formula - see some change in the rendering of the formula

displacementmap_vertex: "#ifdef USE_DISPLACEMENTMAP
    transformed += normalize( objectNormal ) * (( texture2D( displacementMap, uv ).x) + ( texture2D( displacementMap, uv ).y) * displacementScale + displacementBias );

Originally, you wanted a technique, which allows you to put volumetric letters on a surface. Displacement maps work well for that purpose. In my example, I’ve put the same texture as a displacement map and a map just to show you where and how that technique works. Now, having that knowledge, that displacement maps use only red channel, why do you pass a colourful texture? Of course, it will lead to the strange result.
Besides, why do you want to change the library? Why not to use THREE.ShaderMaterial(), where you can do the same thing like displacement.

@prisoner849 thank you for showing that indeed its possible to render flat text to 3D!

Dove head first into Three.js without much knowledge leveraging stackoverflow.com and some of the Three.js docs. I haven’t sat down with the Three.js library in all what is possible.

My curiosity has gotten the better of me when technically I don’t need the whole spectrum color. I’m still curious though.

Don’t want to change the library. Didn’t know and/or how to think about this kind of alternative.

Reading up on ShaderMaterial()