threejs创建三维文字TextGeometry

moyebaobei 2020-01-14

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);
});

输出结果

threejs创建三维文字TextGeometry

(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);
     });

threejs创建三维文字TextGeometry

说明:

其中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:类似与基础材质,但可以创建虚线效果

相关推荐