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

Resources
23

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

24

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

25

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
26

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!

27

@ben Have a look at this thread.

1 Like
29

@prisoner849
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!

30

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

@prisoner849
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);
  scene.add(mesh);
...
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;
});

image

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!

32

Have a look at this jsfiddle :slight_smile:
https://jsfiddle.net/prisoner849/5744c76u/

FabricJS_map_displacementMap
FabricJS_map_displacementMap939×414 117 KB

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.

4 Likes
33

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

34

Nice demo! Displacement maps are totally underrated :laughing:

1 Like
36

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

40

@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 );
#endif\n",
41

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.

42

@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()

43

related

2 Likes
44

related

Problem rendering SVG to Texture - #5 by tfoller (solved)

also in the Collection of examples from discourse.threejs.org
see TexturefFromSVG

1 Like
45

related

related

also in the Collection of examples from discourse.threejs.org
see DISTORT

2 Likes