Centered Text - Demo Geometry text

Questions
,
1

Hello
I show what I mean in that example
The linebreak is done with \n

Based on this example
https://threejs.org/examples/#webgl_geometry_text

2

What you are looking for is unfortunately not possible with TextGeometry. Please use the approach mentioned in:

tl;dr Create a text geometry per line, translate the meshes until they are centered and possibly merge everything so you end up with just on mesh.

3

Thank you Mugen87
I hoped there is some hidden thing to avoid a bigger effort :slightly_smiling_face:
Ok - In the meantime I thought about something that should work.
:+1:

4

I did it once in the crazy way…
var spa=’                                          ';(40 space chars in spa var)
and…
text=“Quo usque tandem abutere, Catilina, patientia nostra?\n”;
text+=spa.substring(0,12)+“Quam diu etiam furor iste tuus eludet?\n”;
text+=spa.substring(0,5)+“Quem ad finem sese effrenata iactabit audacia?\n”;
text+=spa.substring(0,10)+“Nihilne te nocturnum praesidium Palatii,\n”;
text+=spa.substring(0,30)+“nihil urbis vigiliae,\n”;
and so on…
link:
https://jrlazz.eu5.org/anim/text_centered.html

1 Like
5

It’s not pixel perfect, but looks great - it’s really good :wink:

Ok my text comes from a file …
So - I have to let the software count the chars per line, (maybe plus counting the smaller chars like i and l) to calculate how many blanks to insert in front of each line.
This really seems to be a quick solution.

Thank you very much - I think I will use this way, too. :+1:

6

It is far away from being perfect - but it’s a start :joy:

// parseArray [1] = text
// [2] = float to adjust number of added chars textlength (if using different charsets)
// [3] = float to adjust number of added chars smallchars (if using different charsets)
texttext=parseArray[TLPointer+1]; //Text lines seperated with \n
var multi1=parseFloat(parseArray[TLPointer+2]);
if(multi1 < 0) { multi1 = 1.33 };
var multi2=parseFloat(parseArray[TLPointer+3]);
if(multi2 < 0) { multi2 = 2 };
if(texttext.search(’\n’) != -1)
{
var newtext = ‘’;
var tcount=0;
var textparts=texttext.split(’\n’);
var tpi;
var smallchars
for(tpi = 0; tpi < textparts.length; tpi ++)
{
if(textparts[tpi].length > tcount) { tcount = textparts[tpi].length; }
}
tcount ++;
for(tpi = 0; tpi < textparts.length; tpi ++)
{
smallchars=0;
for(let jj=0; jj < textparts[tpi].length; jj++)
{
if(textparts[tpi].charAt(jj) === ’ ‘) { smallchars += 1; }
if(textparts[tpi].charAt(jj) === ‘i’) { smallchars += 1; }
if(textparts[tpi].charAt(jj) === "’") { smallchars += 1; }
if(textparts[tpi].charAt(jj) === ‘I’) { smallchars += 1; }
if(textparts[tpi].charAt(jj) === ‘l’) { smallchars += 1; }
}
newtext = newtext + ’ '.repeat((tcount - textparts[tpi].length) / multi1 + smallchars / multi2) + textparts[tpi] + ‘\n’;
}
texttext=newtext;
textposy=textposy + textparts.length*30;

7

If you’re looking for a pixel-perfect solution, you’ll have to deal with font- and glyph metrics. Which will work for both mono-spaced and proportionally spaced fonts alike.

A simple implementation based on the ninties texfont approach by Mark J. Kilgard can be viewed here. Along with this texfont approach goes a utility which renders any *.ttf font into a *.txf font (txf). See this for further background.

1 Like
8

Thank you
I am glad for every advice. :+1:

20 years ago I programmed a complete set of functions (about 2500) for everything I needed in Blitz3d - but to get into the depth of threejs is not as easy.
Actually I thought about porting the BitmapFontSolution from there to THREE - but I needed a very quick implementation.

Maybe I should ask for more help here instead of fiddling around for myself :wink:

And now the box on the right side tells me to stop talking - The topic is solved - so they do not like if someone says thank you? - Funny forum here

1 Like
9

I am happy cause You liked.
The result got very good… :slightly_smiling_face: