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 of 3D text. Now I want to create multiline text, like a short paragraph. Preferably, I'd like it to wrap naturally when it reaches the border of a box/rectangle its placed it in. I want a similar behavior that standard `HTML` text has when it's inside of a div, wrapping to multiple lines when it reaches the edge of it's parent div. Here's how I'm creating a single 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…

Accepted Answer

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
```

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?

Solution

Problem