如何制作 TextGeometry 多行？如何将它放在一个正方形内，以便它像 html 文本在 div 内一样换行？

我正在使用一些 3D 文本WebGL, three.js, and THREE.TextGeometry。到目前为止一切正常。我能够创建单行 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

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

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

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

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