如何制作 TextGeometry 多线?我如何将它放在一个正方形内，使其像 html 文本一样在 div 内包装? [英] 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?

问题描述

我正在使用 WebGL、three.js 和 THREE.TextGeometry 制作一些 3D 文本.到目前为止它运行良好.我可以创建一行 3D 文本.

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.

现在我想创建多行文本，比如一个短段落.最好，我希望它在到达放置它的框/矩形的边界时自然换行.我想要标准 HTML 文本在 div 内时具有的类似行为，换行当它到达它的父 div 的边缘时到多行.

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?

推荐答案

一种方法可能是 在 HTML 中绘制文本并在 3D 场景中呈现它.

另一种方法是实例化文本，测试它有多大，如果它大于所需的最大宽度，则将其拆分为多个 TextGeometry 实例，在 y 轴上偏移高度.您可以使用 geometry.boundingBox(在调用 geometry.computeBoundingBox() 之后)获取几何的尺寸，它是一个 THREE.Box3.边界框具有 min 和 max 属性，它们是表示对角顶点的向量，因此您可以通过调用例如:

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

这篇关于如何制作 TextGeometry 多线?我如何将它放在一个正方形内，使其像 html 文本一样在 div 内包装?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！