javascript - 如何制作 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

一种方法可能是 draw your text in HTML and render it in the 3D scene .

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

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