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

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