threejs创建三维文字TextGeometry

Posted 2021-03-16 逆水行舟，不进则退

THREE.js 封装了 TextGeometry 类可以很容易地生成三维文字

TextGeometry(text : String, parameters : Object)

参数说明

text — The text that needs to be shown. （要显示的字符串）
parameters — Object that can contains the following parameters.
　　font — an instance of THREE.Font.（字体格式）
　　size — Float. Size of the text. Default is 100.（字体大小）
　　height — Float. Thickness to extrude text. Default is 50.（字体的深度）
　　curveSegments — Integer. Number of points on the curves. Default is 12.（曲线控制点数）
　　bevelEnabled — Boolean. Turn on bevel. Default is False.（斜角）
　　bevelThickness — Float. How deep into text bevel goes. Default is 10.（斜角的深度）
　　bevelSize — Float. How far from text outline is bevel. Default is 8.（斜角的大小）
　　bevelSegments — Integer. Number of bevel segments. Default is 3.（斜角段数）

eg：

（1）

var textLoad = new THREE.FontLoader().load(\'fonts/helvetiker_regular.typeface.json\',function(font){
   　var txtGeo = new THREE.TextGeometry(\'hello world\',{
           font: font,
           size: 0.8,
           height: 0.1,
           curveSegments: 12,
           bevelEnabled: true,
           bevelThickness: 0.1,
           bevelSize: 0.05,
        　　bevelSegments: 3
       });
 　　var txtMater = new THREE.MeshBasicMaterial({color: 0x0000ff});
    var txtMesh = new THREE.Mesh(txtGeo,txtMater);
    txtMesh.position.set(-2,2.3,-0.4);
    scene.add(txtMesh);
});

输出结果

（2）换一种材质

var textLoad = new THREE.FontLoader().load(\'fonts/helvetiker_regular.typeface.json\',function(font){
     var txtGeo = new THREE.TextGeometry(\'hello world\',{
         font: font,
         size: 0.8,
         height: 0.1,
         curveSegments: 12,
         bevelEnabled: true,
         bevelThickness: 0.1,
         bevelSize: 0.05,
         bevelSegments: 3
     });
     var txtMater = new THREE.MeshNormalMaterial({
         flatShading: THREE.FlatShading,
         transparent: true,
         opacity: 0.9
     });
     var txtMesh = new THREE.Mesh(txtGeo,txtMater);
          txtMesh.position.set(-2,2.3,-0.4);
          scene.add(txtMesh);
     });

说明：

　　其中fonts/helvetiker_regular.typeface.json是官网给出的支持的字体格式

TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.

　　MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响

　　MeshNormalMaterial 网格法向量材质，根据物体表面的法向量计算颜色

补充：

Threejs材质种类

MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial：根据网格到相机的距离，该材质决定如何给网格染色
MeshNormalMaterial：根据物体表面的法向量计算颜色
MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色
MeshLambertMaterial：考虑光照的影响，可以创建颜色暗淡，不光亮的物体
MeshPhongMaterial：考虑光照的影响，可以创建光亮的物体
ShaderMaterial：使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式
LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线
LineDashedMaterial：类似与基础材质，但可以创建虚线效果