How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?

Question

I\'m making some 3D text using WebGL, three.js, and THREE.TextGeometry. It\'s working fine so far. I\'m able to create a single line o

Answer 1

Adding this as an updated workaround that can be used to render multiline text using TextGeometry.

If you use a template literal string and split the text you want to use for the TextGeometry string onto multiple lines (even including spaces between lines), the TextGeometry will respect these spaces. This can be used to manually achive the multiline effect, however this will not "put it inside a square" and cause it to automatically wrap.

Example

let text = `
    first line.
    second line.

    third line.
`;

objectGeometry = new THREE.TextGeometry(text, {
    font: font,
    size: 10,
    height: 0,
    curveSegments: 10
}).center();

Answer 2

Following up on the previous post. You can also break lines with \n and text geometry will respect it. This however, doesn't solve the "html-like wrapping"

i.e

let text = `first line. \n second line. \n third line.`;

Answer 3

The API for three.js is pretty low-level. I do not believe this is possible in general. One way you can work around this is to produce multiple TextGeometry instances, one per line, and manually position them at different y coordinates.

Answer 4

One approach might be to draw your text in HTML and render it in the 3D scene.

The other approach would be to instantiate the text, test how large it is, and split it up into multiple TextGeometry instances if it is larger than your maximum desired width, offset on the y-axis by the height. You can get the dimensions of a geometry with geometry.boundingBox (after calling geometry.computeBoundingBox()) which is a THREE.Box3. Bounding boxes have min and max properties which are vectors representing opposite corner vertices, so you can get the dimensions of a geometry along a given axis by calling e.g.:

geometry.boundingBox.max.x - geometry.boundingBox.min.x