Three.js 字体

🕗 发布于 2024-12-30 16:57 javascript three.js

请添加图片描述

在 Three.js 中，我们可以通过 FontLoader 加载字体，并结合 TextGeometry 创建 3D 文本。加载字体是因为字体文件包含了字体的几何信息，例如字体的形状、大小、粗细等，而 TextGeometry 则是根据字体信息生成 3D 文本的几何体。

在下面，我们将分别讲解加载字体和创建文本这两部分内容，并结合参数说明，让你对每一步都有深入理解。

加载字体和创建 3D 文本

Three.js 使用 FontLoader 来加载字体文件（格式为 .json），通过加载后的字体对象结合 TextGeometry 创建文本几何体。

加载字体：FontLoader

以下是使用 FontLoader 加载字体的代码：

const fontLoader = new THREE.FontLoader();

// 加载字体文件（路径需要正确）
fontLoader.load("/path/to/font.json", (font) => {
  console.log("字体加载成功", font);

  // 使用加载的字体创建 3D 文本几何体
  const textGeometry = new THREE.TextGeometry("Hello Three.js!", {
    font: font, // 必须提供加载后的字体对象
    size: 1, // 字体大小
    height: 0.5, // 字体厚度
    curveSegments: 12, // 曲线分段数，值越大越平滑
    bevelEnabled: true, // 是否启用斜角
    bevelThickness: 0.03, // 斜角厚度
    bevelSize: 0.02, // 斜角大小
    bevelSegments: 5, // 斜角分段数
  });

  // 创建材质和网格
  const textMaterial = new THREE.MeshStandardMaterial({ color: 0xff6347 });
  const textMesh = new THREE.Mesh(textGeometry, textMaterial);

  // 设置文本位置
  textMesh.position.set(-5, 2, 0);

  // 添加到场景
  scene.add(textMesh);
});

TextGeometry 参数解析

在 TextGeometry 的构造函数中，我们需要传入两个参数：文本字符串和配置对象。

参数 1：文本字符串

表示需要显示的文本内容，例如 'Hello Three.js!'。

参数 2：配置对象

配置对象是一个 JSON，用于定义文本的样式和几何细节。以下是主要字段的详细说明：

参数名称	类型	默认值	描述
`font`	`THREE.Font`	必须提供	加载的字体对象，通过 `FontLoader` 加载后传入。
`size`	`number`	100	字体大小，值越大，文本越大。
`height`	`number`	50	字体厚度，用于创建 3D 效果。
`curveSegments`	`number`	12	曲线分段数，值越大，曲线部分（如圆形字母）越平滑。
`bevelEnabled`	`boolean`	`false`	是否启用斜角。
`bevelThickness`	`number`	10	斜角的厚度，仅在启用斜角时有效。
`bevelSize`	`number`	8	斜角的大小，表示斜角距离文本边缘的距离。
`bevelSegments`	`number`	3	斜角的分段数，值越大斜角部分越平滑。

Three.js 的 FontLoader 仅支持 .json 格式的字体文件。如果是 .ttf 或其他格式，可以使用工具（如 Facetype.js）将其转换为 .json。

例子

示例中，我们将创建一个 3D 文本效果，包含以下特性：

使用 TextGeometry 创建立体文字
添加斜角效果使文字边缘更加平滑
使用 MeshPhongMaterial 材质实现高光效果
通过环境光和方向光打造立体感
实现文本自动居中显示
支持通过鼠标交互旋转和缩放场景

效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

让我们先看看创建 3D 文本的关键步骤：

加载字体

const fontLoader = new FontLoader();
fontLoader.load(
  "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json",
  (font) => {
    // 加载完成后的回调函数
  }
);

创建文本几何体

const textGeometry = new TextGeometry("Hello Three.js!", {
  font: font,
  size: 1, // 字体大小
  height: 0.2, // 文字厚度
  curveSegments: 12, // 曲线分段数
  bevelEnabled: true, // 启用斜角
  bevelThickness: 0.03,
  bevelSize: 0.02,
  bevelSegments: 5,
});

创建材质

const textMaterial = new THREE.MeshPhongMaterial({
  color: 0x00ff00, // 绿色材质
  specular: 0x555555, // 高光颜色
  shininess: 30, // 高光强度
});

const textMesh = new THREE.Mesh(textGeometry, textMaterial);

文本居中处理

textGeometry.computeBoundingBox();
const centerOffset =
  -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x);
textMesh.position.x = centerOffset;

下面是完整代码

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 10;

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// 添加灯光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 加载字体
const fontLoader = new FontLoader();

fontLoader.load(
  "https://threejs.org/examples/fonts/helvetiker_regular.typeface.json",
  (font) => {
    // 创建文本几何体
    const textGeometry = new TextGeometry("Hello Three.js!", {
      font: font,
      size: 1, // 字体大小
      height: 0.2, // 文字厚度
      curveSegments: 12, // 曲线分段数
      bevelEnabled: true, // 启用斜角
      bevelThickness: 0.03, // 斜角深度
      bevelSize: 0.02, // 斜角大小
      bevelOffset: 0, // 斜角偏移
      bevelSegments: 5, // 斜角分段数
    });

    // 创建材质
    const textMaterial = new THREE.MeshPhongMaterial({
      color: 0x00ff00, // 绿色材质
      specular: 0x555555, // 高光颜色
      shininess: 30, // 高光强度
    });

    // 创建网格
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);

    // 居中文本
    textGeometry.computeBoundingBox();
    const centerOffset =
      -0.5 * (textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x);
    textMesh.position.x = centerOffset;

    scene.add(textMesh);
  }
);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

// 处理窗口大小变化
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

animate();

代码

github

https://github.com/calmound/threejs-demo/tree/main/font

gitee

https://gitee.com/calmound/threejs-demo/tree/main/font

原文地址：https://blog.csdn.net/ocalmound/article/details/144810719

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：User Script Sandboxing作用及在iOS项目中获取GitCommitHash
下一篇：没有了

计算机组成原理--笔记一
存储程序”，将指令以二进制的形式输入到计算机的主存储器中。。。特点，· 计算机有五大部分组成。· 指令和数据以同等地位存于存储器中，可按地址寻访。· 指令和数据用二进制表示。· 指令由操作码和地址码组
阅读更多2025-01-16
MySQL表的增删改查(基础)-下篇
承接上篇文章对MySQL的增删改查进行补充
阅读更多2025-01-16
HPM6700——以太网通信lwip_udpecho_freertos_socket
本示例展示在FreeRTOS系统下的UDP回送通讯PC 通过以太网发送UDP数据帧至MCU，MCU将接收的数据帧回发至PC。
阅读更多2025-01-16
c语言----------内存管理
类型作用域生命周期auto变量一对{}内当前函数static局部变量一对{}内整个程序运行期extern变量整个程序整个程序运行期static全局变
阅读更多2025-01-16
VUE3 组件的使用
组件注册是 Vue.js 开发中的一个基础概念，掌握了组件的注册方式（局部注册和全局注册）以及生命周期钩子、传值机制（props和事件）和插槽等功能，你就能在 Vue 中高效地构建和组织应用程序。通过
阅读更多2025-01-16
RTX 5090 加持，科研服务器如何颠覆 AI 深度学习构架?
RTX 5090 的 Tensor Core 对 FP16 半精度数据的加速支持，结合混合精度训练技术，在保证精度的同时，大幅减少内存占用与计算时间，极大缩短训练周期。在材料科学的量子计算研究中，RT
阅读更多2025-01-16
Mono里运行C#脚本27—X86_64指令寄存器初步了解mono_arch_regname
Mono里运行C#脚本27—X86_64指令寄存器初步了解mono_arch_regname通过前面的分析，我们知道一个程序要运行，要么解释执行，要么编译后执行。JIT是采用即时编译的技术，显然是把程
阅读更多2025-01-16
C# 特性（Attributes）详解
特性（Attributes）是 C# 提供的一种强大的元数据机制，用于在代码中添加描述性信息。它可以附加到程序的各种部分（类、方法、属性、字段等），供运行时或编译时使用。内置特性继承自类。csharp
阅读更多2025-01-16
SQL 中的 JOIN：INNER、LEFT、RIGHT、FULL、Cross、Self 和 Natural Join
JOIN 是一种 SQL 操作符，用于根据相关列将两个或多个表中的数据行组合在一起。在数据库设计中，数据通常分散在多个表中，通过 JOIN 操作可以将这些表中的数据组合起来，以便进行查询和分析。INN
阅读更多2025-01-16
Hessian矩阵 && 通过符号计算解析 Hessian 矩阵
首先，明确需要优化的目标函数 (fxfx) )，其中 (x\mathbf{x}x) 是机器人状态或控制变量。构建Hessian矩阵的关键在于计算目标函数的二阶偏导数，可通过解析或数值方法实现，具体取决
阅读更多2025-01-16