携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情 >>

今天，我们来实现下面这种效果：

文字效果 text

TextGeometry 文本缓冲几何体

一个用于将文本生成为单一的几何体的类。它是由一串给定的文本，以及由加载的font（字体）和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

TextGeometry可以用来创建三维文本。其实是通过指定字体创建字符，然后像拉伸几何体那样把文字拉伸，继而得到三维文本。创建TextGeometry文本几何体有很多参数与ExtrudeGeometry几何体一样，具体如下：

属性	必须	描述
size	否	该属性指定文本大小，默认值是100
height	否	该属性指定文本可以厚度，默认值是50
font	否	该属性指定文本的字体，是一个THREE.Font对象
bevelEnabled	否	该属性指定文本拉伸时是否启用斜角，默认false
bevelThickness	否	该属性指定文本拉伸体斜角的厚度，默认值是10
bevelSize	否	该属性指定文本拉伸体斜角的高度。默认值是8
bevelSegments	否	该属性指定文本拉伸体斜角的分段数，段数越多斜角越光滑，默认值是3
curveSegments	否	该属性指定文本拉伸时拉伸曲线的分段数，段数越多曲线越光滑，默认值是4

FontLoader 字体加载器

一个用于加载JSON格式的字体的类。返回font, 返回值是表示字体形状的数组，在内部使用文件夹在其来加载文件。

// 引入FontLoader
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
// 初始化一个字体加载器
const fontLoader = new FontLoader();
// .load()，第一个参数为文件路径
fontLoader.load("./fonts/helvetiker_regular.typeface.json", (font) => {
    // 设置文字几何体为文本缓冲几何体
    const textGeometry = new TextGeometry("hello Three.js", {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 10,
        bevelEnables: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5,
    });
    // 设置文字材质
    const textMaterial = new THREE.MeshMatcapMaterial({
        matcap: matcapTexture,
    });
    const text = new THREE.Mesh(textGeometry, textMaterial);
    scene.add(text);
});