Javascript 如何创建TextGeometry多行?我如何把它放在一个正方形中,使它像html文本一样包装在一个div中?
我正在使用Javascript 如何创建TextGeometry多行?我如何把它放在一个正方形中,使它像html文本一样包装在一个div中?,javascript,three.js,3d,coffeescript,Javascript,Three.js,3d,Coffeescript,我正在使用WebGL、three.js和three.TextGeometry制作一些3D文本。到目前为止,它运作良好。我能够创建一行3D文本 现在我想创建多行文本,比如一个短段落。最好,当它到达放置它的框/矩形的边界时,我希望它自然地包裹起来。我想要一个类似于标准HTMLtext在div内部时的行为,当它到达父div的边缘时,会换行到多行 以下是我创建一行的方式: textGeo = new THREE.TextGeometry( 'Hello there. Am I a paragr
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.`;