9

我正在使用WebGL、three.js和制作一些 3D 文本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

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

4

4 回答 4

5

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

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

geometry.boundingBox.max.x - geometry.boundingBox.min.x
于 2013-08-13T06:43:35.440 回答
3

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

于 2013-08-11T10:15:37.800 回答
1

将此添加为更新的解决方法，可用于使用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();
于 2019-07-23T16:24:41.443 回答
1

跟进上一篇文章。你也可以用它来换行，\n文本几何会尊重它。然而，这并不能解决“类似html的包装”

IE

let text = `first line. \n second line. \n third line.`;
于 2020-11-25T23:25:16.980 回答