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

fonts-text

#23

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


CSS3DRenderer documentation with Three.js
#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?

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


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


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


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

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/


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.


#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:


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