THREE.JS如何创建3D文字

笔者在开发过程中遇到了相应的需求，记录一下。

• 1.引入three.js的文字加载器 import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
• 2.创建加载器对象 const fontloader = new FontLoader();
• 3.使用加载器加载three.js支持的文件格式 笔者这里使用的是github上three.js的字体文件，直接下载引入到项目中即可(请注意引入路径)
• 4.直接上代码

fontloader.load(
    "这里是引入路径",
    (response) => {
  const  font = response;
  // 创建TextGeometry几何体 配置项建议看官网 笔者偷个懒
  const textgeo = new TextGeometry(text, {
    //字体内容
    font: font,
    //字体大小
    size: 16,
    //高度
    height: 10,
     // 圆角曲线段数
    bevelThickness: bevelThickness,
    // 圆角厚度
    bevelSize: bevelSize,
    // 圆角尺寸
    bevelEnabled: bevelEnabled,
  });
  //这一步是为了计算字体相对于模型的坐标(因为业务需求笔者需要将字体放到模型的正上方)
  textgeo.computeBoundingBox();
  const centerOffset =
    -0.5 * (textgeo.boundingBox.max.x - textgeo.boundingBox.min.x) + 140;
//创建材质
  const materials = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true })
  //创建网格对象
  textmesh = new THREE.Mesh(textgeo, materials);
  textmesh.position.set(centerOffset, 50, 0);

//创建光源
  const pointLight = new THREE.PointLight(0xffffff, 1, 60, 0);
  //注意这里需要给光源设置照射的字体上的颜色否则字体会呈现黑色
  pointLight.color.setHSL(Math.random(), 1, 0.5);
  pointLight.position.set(textmesh.position.x, 60, 20);
  //剩下的就不用多说了 将光源和Mesh添加到场景就好了
  scene.add(pointLight);
  scene.add(textmesh);
    }
  );

如有错误请联系作者改正 谢谢！！！祝您生活愉快！！！