如何制作 TextGeometry 多线?如何将它放在一个正方形内，以便它像 html 文本一样包裹在 div 内?

2022-01-24 00:00:00 3d javascript coffeescript three.js

我正在使用 WebGL、three.js 和 THREE.TextGeometry 制作一些 3D 文本.到目前为止工作正常.我能够创建单行 3D 文本.

I'm making some 3D text using WebGL, three.js, and THREE.TextGeometry. It's working fine so far. I'm able to create a single line of 3D text.

现在我想创建多行文本，比如一个短段落.最好是，当它到达放置它的框/矩形的边框时，我希望它自然地换行.我想要标准 HTML 文本在 div 内时具有的类似行为，换行当它到达其父 div 的边缘时变为多行.

Now I want to create multiline text, like a short paragraph. Preferably, I'd like it to wrap naturally when it reaches the border of a box/rectangle its placed it in. I want a similar behavior that standard HTML text has when it's inside of a div, wrapping to multiple lines when it reaches the edge of it's parent div.

这是我创建单行的方式:

Here's how I'm creating a single line:

 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

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

How can I make this multiline? Also, how can I put this inside a square so it wraps? How do I create the square?

推荐答案

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

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

The other approach would be to instantiate the text, test how large it is, and split it up into multiple TextGeometry instances if it is larger than your maximum desired width, offset on the y-axis by the height. You can get the dimensions of a geometry with geometry.boundingBox (after calling geometry.computeBoundingBox()) which is a THREE.Box3. Bounding boxes have min and max properties which are vectors representing opposite corner vertices, so you can get the dimensions of a geometry along a given axis by calling e.g.:

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

相关文章