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, textMaterial)

  textGeo.position.x = -150
  textGeo.rotation.y = de2ra(15)

  scene.add textGeo

How can I make this multiline? Also, how can I put this inside a square so it wraps? How do I create the square?

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, textMaterial)

  textGeo.position.x = -150
  textGeo.rotation.y = de2ra(15)

  scene.add textGeo

How can I make this multiline? Also, how can I put this inside a square so it wraps? How do I create the square?

• javascript
• three.js
• 3d
• coffeescript

5 Answers 5

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

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.

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

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();

Just add a line break

In your code, instead of

'Hello there. Am I a paragraph? I hope so.',

Write it as

'Hello there. \nAm I a paragraph? I hope so.',

Add that character whenever you want to go to the new line.