在 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 — 字体大小，默认100height — 字体的深度，默认50curveSegments — 曲线控制点数，默认12bevelEnabled — 斜角，默认faslebevelThickness — 斜角的深度，默认10bevelSize — 斜角的大小，默认8bevelSegments — 斜角段数，默认3

另附Threejs材质类型：

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