Threejs加载字体加载FontLoader与TTFLoader

在 Three.js 中使用自定义字体进行 3D 文本渲染。它最初是以 JSON 格式加载字体，现在Three.js已经有一个 TTFLoader 类，可用于加载 TTF 字体文件并将它们用作 TextGeometry ！

1、最初使用FontLoader加载json字体方法如下

const loader = new THREE.FontLoader();
loader.load( './fonts/fontfile.json', function ( font ) {
    const textGeo = new THREE.TextGeometry( "测试文字", {
        font: font,
        size: 18,
        height: 5,
        curveSegments: 32,
        bevelEnabled: true,
        bevelThickness: 0.5,
        bevelSize: 0.5,
        bevelSegments: 8,
    } );
    textGeo.computeBoundingBox();
    
    const textMaterial = new THREE.MeshPhongMaterial( { color: '#ffe4a6', specular: 0xffffff} );
    const mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.x = -55;
    mesh.position.y = 4.95;
    mesh.position.z = -14.55;
    
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add( mesh );
}）

免费在线ttf转json字体格式：

Facetype.js

2、现在可以直接使用TTFLoader加载ttf格式字体

var loader = new THREE.TTFLoader();
loader.load('./fonts/fontfile.ttf', function(font) {
    var textGeometry = new THREE.TextGeometry('Hello, World!', {
        font: font,
        size: 10,
        height: 1
    });
    var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
    var textMesh = new THREE.Mesh(textGeometry, textMaterial);
    scene.add(textMesh);
});

TextGeometry 专门用于为文本创建基础几何图形的类，它的使用方法及自定义选项如下：

TextGeometry(text : String, parameters : Object)

其中

text：要显示的字符串
parameters：
　　font — 字体格式
　　size — 字体大小，默认100
　　height — 字体的深度，默认50
　　curveSegments — 曲线控制点数，默认12
　　bevelEnabled — 斜角，默认fasle
　　bevelThickness — 斜角的深度，默认10
　　bevelSize — 斜角的大小，默认8
　　bevelSegments — 斜角段数，默认3

另附Threejs材质类型：

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