如何制作TextGeometry多线？我怎么把它放在一个正方形内,所以它像div中的html文本一样包裹？

Question

我正在使用一些3D文字WebGL,three.js和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

我怎样才能制作这条多线？另外,我怎么能把它放在一个正方形里面呢？我如何创建广场？

Answer 1

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

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

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

Answer 2

Three.js 的 API 相当低级。我不认为这在一般情况下是可能的。解决此问题的一种方法是生成多个 TextGeometry 实例，每行一个，然后手动将它们放置在不同的 y 坐标处。