What is the best way to create a TextGeometry object with multiple lines? Is there a way to contain it within a square shape, similar to how text wraps within a div

Question

What is the best way to create a TextGeometry object with multiple lines? Is there a way to contain it within a square shape, similar to how text wraps within a div

I've been experimenting with creating 3D text using WebGL, three.js, and THREE.TextGeometry. So far, everything is working smoothly as I'm able to generate a single line of 3D text.

Now, my goal is to produce multiline text resembling a short paragraph. Ideally, I want the text to naturally wrap when it reaches the boundaries of a box or rectangle that contains it. The behavior I'm aiming for is similar to how standard HTML text wraps within a div, flowing into multiple lines once it hits the edge of its parent container.

Below is an example of how I currently create 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 transform this into multiline text? Additionally, how do I enclose this in a square shape for wrapping purposes? What steps are involved in creating the square?

javascript three.js 3d coffeescript

Answer 1

Answer №1

To add your text in a 3D scene, you can either create it in HTML and then render it within the scene, or you can programmatically adjust its size by checking its dimensions and splitting it into smaller parts if needed. To determine the size of a geometry, use the geometry.boundingBox property after calculating it with geometry.computeBoundingBox(). The bounding box contains min and max vectors representing opposite corners, allowing you to easily measure the geometry along a specific axis like so:

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

Answer 2

To add your text in a 3D scene, you can either create it in HTML and then render it within the scene, or you can programmatically adjust its size by checking its dimensions and splitting it into smaller parts if needed. To determine the size of a geometry, use the geometry.boundingBox property after calculating it with geometry.computeBoundingBox(). The bounding box contains min and max vectors representing opposite corners, allowing you to easily measure the geometry along a specific axis like so:

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

Answer 3

Answer №2

The functionality provided by the three.js API is quite basic. In my opinion, achieving this in a straightforward manner may not be feasible. However, a workaround could involve generating several TextGeometry instances, each representing a single line of text, and then adjusting their positions manually to place them at varying y coordinates.

Answer 4

The functionality provided by the three.js API is quite basic. In my opinion, achieving this in a straightforward manner may not be feasible. However, a workaround could involve generating several TextGeometry instances, each representing a single line of text, and then adjusting their positions manually to place them at varying y coordinates.

Answer 5

Answer №3

Continuing from the earlier message. You have the option to separate lines using \n and the text formatting will acknowledge it. Nevertheless, this does not address the issue of "html-like wrapping"

For example

let content = `initial line. \n second line. \n third line.`;

Answer 6

Continuing from the earlier message. You have the option to separate lines using \n and the text formatting will acknowledge it. Nevertheless, this does not address the issue of "html-like wrapping"

For example

let content = `initial line. \n second line. \n third line.`;

Answer 7

Answer №4

Here is a new trick to render multi-line text using TextGeometry.

If you employ a template literal syntax and break down the text into separate lines within the string used for TextGeometry, the spaces will be preserved by the TextGeometry. While this method allows for manually creating a multi-line effect, it does not automatically wrap the text within a square.

For instance:

let message = `
    This is 
    a sample
    multiline 
    text.
`;

textShape = new THREE.TextGeometry(message, {
    font: myFont,
    size: 10,
    height: 0,
    curveSegments: 10
}).center();

Answer 8

Here is a new trick to render multi-line text using TextGeometry.

If you employ a template literal syntax and break down the text into separate lines within the string used for TextGeometry, the spaces will be preserved by the TextGeometry. While this method allows for manually creating a multi-line effect, it does not automatically wrap the text within a square.

For instance:

let message = `
    This is 
    a sample
    multiline 
    text.
`;

textShape = new THREE.TextGeometry(message, {
    font: myFont,
    size: 10,
    height: 0,
    curveSegments: 10
}).center();

Answer 9

Answer №5

To create a line break

In your script, instead of

'Hey, this is a sentence with multiple lines.',

Update it to

'Hey, this is a sentence with \nlines separated by a line break.',

Include the '\n' character whenever you want to start a new line.

Answer 10

To create a line break

In your script, instead of

'Hey, this is a sentence with multiple lines.',

Update it to

'Hey, this is a sentence with \nlines separated by a line break.',

Include the '\n' character whenever you want to start a new line.

What is the best way to create a TextGeometry object with multiple lines? Is there a way to contain it within a square shape, similar to how text wraps within a div

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Enhance the form values using HTML and Javascript before submitting them via POST

Tips on implementing a jQuery .load() function using an anchor tag within dynamic content

Retrieve the input data of a similar structure when a user triggers a button click using jQuery

It seems like there may be an issue with the React Table Pagination in reactjs

There is no overload that matches this call. The previous overload resulted in an error stating that type 'text' cannot be assigned to type 'json'

Why does app.post function while router.post does not seem to work?

Using Jquery to create a fading effect when changing the color by checking a checkbox

Exploring the eccentricities of mirror reflections in ThreeJS

AngularJS: ng-model not reflecting changes in entire object, only specific field within the object is being updated

Is it possible to check the terms and conditions checkbox using Javascript and Protractor?

Issues with creating modal images using only JavaScript

Three.js Decal fails to display

The error message "Uncaught (in promise) ReferenceError: dispatch is not defined" indicates that

Encountering an unanticipated DOMException after transitioning to Angular 13

Using OpenCV.js to detect QR codes

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

How can I remove the popover parents when clicking the confirm button using jQuery?

Injecting a variable into a string before adding it to a pre-existing array

Would it be a security risk to share the Stripe charge ID and connected account ID with clients on the frontend?

Sending documents via ExpressJS