我正在使用WebGL,three.js和THREE.TextGeometry制作一些3D文本.它到目前为止工作正常.我能够创建一行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
我怎样才能制作这条多线？另外,我怎么能把它放在一个正方形里面呢？我如何创建广场？
解决方法
一种方法可能是
draw your text in HTML and render it in the 3D scene.
另一种方法是实例化文本,测试它的大小,并将其分成多个TextGeometry实例(如果它大于最大所需宽度),y轴偏移高度.您可以使用geometry.boundingBox(在调用geometry.computeBoundingBox()之后)获取几何的尺寸,这是一个THREE.Box3.边界框具有最小和最大属性,这些属性是表示相对角顶点的向量,因此您可以通过调用例如：给出沿给定轴的几何尺寸.
geometry.boundingBox.max.x - geometry.boundingBox.min.x
