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字体格式：