概述
本文主要介绍如何通过 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</
