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

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

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

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)

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:

http://jrlazz.eu5.org/anim/text_centered.html

1 Like

Itâs not pixel perfect, but looks great - itâs really good

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.

It is far away from being perfect - but itâs a start

// 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;

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.

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

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âŚ