three.js -- Font 3D字体加载

1,007 阅读1分钟
// 使用字体加载器加载字体文件,放在静态文件夹下
const fontLoader = new THREE.FontLoader()

// 加载完成在回调函数中处理字体
fontLoader.load(
  '/fonts/fontname.json',
  (font) => {
    // 创建字体
      const textGeometry = new THREE.TextBufferGeometry(
      '3d文本',
      {
      	font, /* 字体 */
        size: 0.5, /* 字体大小 */
        height: 0.2, /* 文本厚度 */
        curveSegments: 12, /* 曲线点数 (5降低优化性能) */
        bevelEnabled: true, /* 是否开启斜角 */
        bevelThickness: 0.03, /* 斜角深度 */
        bevelSize: 0.02, /* 斜角与原始文本轮廓之间的延伸距离 */
        bevelSegments: 5, /* 斜角的分段数 (3降低优化性能) */
        bevelOffset: 0, /* 斜角偏移 */
      }
    )
    // 居中,把每个顶点移动一半的位置
    textGeometry.computeBoundingBox()
    textGeometry.translate(
      -(textGeometry.boundingBox.max.x - 0.02) * 0.5,
      -(textGeometry.boundingBox.max.y - 0.02) * 0.5,
      -(textGeometry.boundingBox.max.z - 0.03) * 0.5,
    )
    // 更简单的居中
    textGeometry.center()
    // 创建材质
    const textMaterial = new THREE.MeshBasicMaterial()
    const text = new THREE,Mesh(textGeometry, textMaterial)
    scene.add(text)
  }
)