如何制作 TextGeometry 多线？ 我如何将它放在一个正方形内，使其像 html 文本一样在 div 内包装？

Question

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

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

这是我创建单行的方式：

 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

我怎样才能制作这个多线？ 另外，我怎样才能把它放在一个正方形里，让它包裹起来？ 如何创建正方形？

Answer 1

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

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

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

Answer 2

Three.js 的 API 非常低级。 我不相信这在一般情况下是可能的。 您可以解决此问题的一种方法是生成多个 TextGeometry 实例，每行一个，并手动将它们定位在不同的 y 坐标处。

Answer 3

添加此作为更新的解决方法，可用于使用TextGeometry呈现多行文本。

如果您使用模板文字字符串并将要用于TextGeometry字符串的文本拆分为多行（甚至包括行之间的空格），则TextGeometry将尊重这些空格。 这可用于手动实现多行效果，但这不会“将其放入正方形”并使其自动换行。

例子

let text = `
    first line.
    second line.

    third line.
`;

objectGeometry = new THREE.TextGeometry(text, {
    font: font,
    size: 10,
    height: 0,
    curveSegments: 10
}).center();

Answer 4

跟进之前的帖子。 您还可以使用\\n换行，文本几何图形会尊重它。 然而，这并不能解决“类似 html 的包装”

IE

let text = `first line. \n second line. \n third line.`;