Centered Text - Demo Geometry text

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

Based on this example

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.

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.

I did it once in the crazy way…
var spa=’                                          ';(40 space chars in spa var)
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…

1 Like

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:

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(’\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 ++)
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’;
textposy=textposy + textparts.length*30;

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

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

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