Threejs渲染3D字体介绍

概述

本文主要介绍如何通过 Three.js 生成 3D 文本。

效果展示

代码分析

核心代码部分就是通过 Three.js 中的 FontLoader 和 TextGeometry 来加载字体并创建 3D 文本。

核心代码如下：

const loader = new FontLoader();

loader.load(textFamily.value, function (font) {
   
  const geometry = new TextGeometry(text.value, {
   
    font: font, //字体
    size: 120, //文本字体大小
    height: 10, //文本厚度
    curveSegments: 4, //定义曲线细节的段数
    bevelEnabled: true, //启用斜面效果
    bevelThickness: 10, //控制斜面的厚度
    bevelSize: 8, //控制斜面的大小
    bevelSegments: 5, //控制斜面的段数
  });
  geometry.computeBoundingBox();
  const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2;
  textMesh = new THREE.Mesh(geometry, materials);
  textMesh.position.set(-xOffset, 0, 0);
  scene.add(textMesh);
});

逐行分析如下：

• FontLoader 实例化：

const loader = new FontLoader(); //创建了一个 FontLoader 的实例，用于加载字体文件。

• 加载字体：

loader.load(textFamily.value, function (font) {
   

使用 loader.load() 方法加载字体，textFamily.value 是字体文件的路径。当字体加载完成后，会调用回调函数，参数font是加载的字体对象。

• 创建文本几何体：

使用 TextGeometry 创建一个几何体。text.value 是要显示的文本内容，通过选项定义了文本的样式，各选项说明如上。

• 计算边界框：

geometry.computeBoundingBox(); //计算文本几何体的边界框，以便后续使用。

• 计算 X 偏移量：

const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2;

计算文本的 X 轴偏移量，使文本在场景中居中。boundingBox.max.x 和 boundingBox.min.x分别代表边界框的最大和最小 X坐标。

• 创建网格并设置位置

textMesh = new THREE.Mesh(geometry, materials);
textMesh.position.set(-xOffset, 0, 0);

创建一个 Mesh</