How to insert a newline in a babylon JS dynamic texture using drawtext?

Question

So I have something like this demo:

http://jeromeetienne.github.io/threex.dynamictexture/examples/basic.html

Source: https://github.com/jeromeetienne/threex.dynamictexture/blob/master/examples/basic.html

A box with the time printed on each surface. It was Build with THREEX using the dynamictexture drawtext sub from Babylon JS (if I'm correct).

I want to extent this text with additional lines, e.g.:

---

Time: (newline)

12 o'clock.

---

Does anyone know how to extent an input string with a newline? (Also because my string could be up to 30 characters or more in length).

I tried:

text = text.replace(/(?:\r\n|\r|\n)|\s/g, '<br>');

But html like <br> tag does not do the job, same counts for other newline metacharacters.

Below we can see the string is not completely on the surface, just broken down and discontinues to nothing.

i.stack.imgur.com/aXnGp.png

Any suggestions? Thanks.

Answer 1

This is related to canvas 2d way of working. You may have to split your string and render two lines of texts (meaning calling drawText twice)