How to make multi-line TextGeometry? How to put it in a square so that it wraps like html text inside a div?

Question

I am making 3D text using WebGL , three.js and THREE.TextGeometry . While this is working. I can create one line of 3D text.

Now I want to create multi-line text as a short paragraph. Preferably, I would like it to naturally turn around when it reaches the border of the field / rectangle in which it is placed. I need a similar behavior that standard HTML text has when it is inside a div, wrapping it in multiple lines when it reaches the edge of its parent div.

This is how I create one line:

  textGeo = new THREE.TextGeometry( 'Hello there. Am I a paragraph? I hope so.', 'size': 30 'height': 2 'font': 'helvetiker' 'weight': 'normal' 'style': 'normal' bevelThickness: 0.1 bevelSize: 0 bevelEnabled: true material: 0 extrudeMaterial: 1 ) materialArray = [ new THREE.MeshBasicMaterial( { color: 0xFFFFFF } ) new THREE.MeshBasicMaterial( { color: 0x666666, shading: THREE.SmoothShading } ) ] textMaterial = new THREE.MeshFaceMaterial(materialArray) textGeo = new THREE.Mesh(textGeo, textMaterial) textGeo.position.x = -150 textGeo.rotation.y = de2ra(15) scene.add textGeo 

How can I do this multi-line? Also, how can I put this inside a square so that it wraps around? How to create a square?

Answer 1

One approach would be to render text in HTML and render it in a 3D scene .

Another approach is to create an instance of the text, check its size and split it into multiple TextGeometry instances if it is larger than your maximum desired width, shifted along the y axis by height. You can get the dimensions of the geometry using geometry.boundingBox (after calling geometry.computeBoundingBox() ), which is THREE.Box3 . Bounding frames have the properties min and max which are vectors representing opposite corner vertices, so you can get the dimensions of the geometry along a given axis by calling, for example:

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

Answer 2

The API for three.js is pretty low level. I do not think this is possible at all. One way you can get around this is to create multiple instances of TextGeometry, one per line and manually place them in different y coordinates.

Answer 3

Adding this as an updated workaround that you can use to render multi-line text using TextGeometry .

If you use a literal line of a template and break the text that you want to use for a TextGeometry line into several lines (even including spaces between lines), TextGeometry will TextGeometry these spaces. This can be used to achieve a multi-line effect manually, however it will not “put it in a square” and will not lead to automatic wrapping.

example

 let text = ' first line. second line. third line. '; objectGeometry = new THREE.TextGeometry(text, { font: font, size: 10, height: 0, curveSegments: 10 }).center();