如何使一个TextGeometry多行？我怎么把它一个正方形内，因此包装像HTML文本确实一个div里面？ [英] How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?

问题描述

我使用的是做一些3D文字的WebGL ， three.js 和 THREE.TextGeometry 。它的正常工作为止。我能够创建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.

现在我想创建多行文本，如短款。 preferably，我想它包裹自然当它到达的边界盒/长方形的把它。我希望有一个类似的行为标准 HTML 正文有当它是一个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 。边界框有分和最高属性这是矢量重新presenting对角顶点，这样你就可以得到沿某一轴的几何形状，通过调用例如尺寸：

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

这篇关于如何使一个TextGeometry多行？我怎么把它一个正方形内，因此包装像HTML文本确实一个div里面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！