在 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：类似与基础材质，但可以创建虚线效果
