Javascript 如何创建TextGeometry多行？我如何把它放在一个正方形中，使它像html文本一样包装在一个div中？

我正在使用

WebGL

、

three.js

和

three.TextGeometry

制作一些3D文本。到目前为止，它运作良好。我能够创建一行3D文本

现在我想创建多行文本，比如一个短段落。最好，当它到达放置它的框/矩形的边界时，我希望它自然地包裹起来。我想要一个类似于标准

HTML

text在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

---

我怎样才能使这个多行？还有，我怎样才能把它放进一个正方形里，这样它就可以包起来了？如何创建正方形？

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

一种方法可能是

另一种方法是实例化文本，测试文本的大小，如果文本大于所需的最大宽度，则将其拆分为多个TextGeometry实例，并在y轴上偏移高度。可以使用

geometry.boundingBox

（调用

geometry.computeBoundingBox（）

）获取几何体的尺寸，该几何体是

THREE.Box3

。边界框具有

min

和

max

属性，这些属性是表示对角顶点的向量，因此您可以通过调用，例如：

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

将此添加为更新的变通方法，可用于使用

TextGeometry

呈现多行文本

如果使用a并将要用于

TextGeometry

字符串的文本拆分为多行（甚至包括行之间的空格），则

TextGeometry

将尊重这些空格。这可以用于手动实现多行效果，但是这不会“将其放入正方形中”并导致其自动换行

示例

let text = `
    first line.
    second line.

    third line.
`;

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

---

跟进上一篇文章。您还可以使用

\n

断线，文字几何图形将尊重它。然而，这并不能解决“类似html的包装”

i、 e

---

是否可以预先计算每个字母的大小和字距，然后计算画布或父平面几何体的大小适合多少个字母？是的，有canvas measureText函数。查看以下代码片段：

var c=document.getElementById（“myCanvas”）
var ctx=c.getContext（“2d”）
ctx.font=“30px Arial”
var txt=“Hello World”
ctx.fillText（“宽度：”+ctx.measureText（txt）.width，10,50）
ctx.fillText（txt，10100）可以将画布的字体设置为将用于3D文本的字体。
let text = `first line. \n second line. \n third line.`;