Three.js 的 TextGeometry 字体中文显示异常
threejs 解决中文字体问题 https://gitcode.com/open-source-toolkit/96466/overview?utm_source=tools_gitcode&index=bottom&type=card&&isLogin=1 (opens in a new tab)
在使用 Three.js 中的 TextGeometry 创建 3D 文本时，遇到中文字体显示异常的问题是一个较为常见的困扰。本文将对该问题进行分析并提供解决方案。
1. 英文字体加载与正常显示
当加载英文字体时，我们可以使用以下代码实现正常的 3D 文本：
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
const scene = new THREE.Scene();
const fontLoader = new FontLoader();
fontLoader.load('path/to/english-font.typeface.json', (font) => {
const textGeometry = new THREE.TextGeometry('Hello, Three.js!', {
font: font,
size: 1,
height: 0.5,
});
const textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);
});此时，英文字符串 "Hello, Three.js!" 能够正常渲染。
2. 加载中文字体时的问题
当我们尝试将字符串改为中文，例如："你好，Three.js！" 时，即使加载了中文字体，往往会遇到以下情况：
- 文字显示为空白：模型创建成功，但无任何显示。
- 错误提示：控制台可能提示某些字符未找到对应的字形。
这是因为大多数 .typeface.json 字体文件仅包含英文字母、数字等字符的路径数据，而缺少中文字符的路径。
3. 解决方案
为了解决中文字体显示异常的问题，我们需要使用支持中文的字体文件并正确加载。
3.1 使用中文字体文件
- 找到一个支持中文的 .ttf 字体文件，例如思源黑体。
- 使用
facetype.js或类似工具将.ttf转换为.typeface.json格式。可以在以下链接找到相关工具：facetype.js 在线工具。
3.2 加载中文字体
将生成的 .typeface.json 文件加载到项目中，然后更新文本生成代码。
fontLoader.load('path/to/chinese-font.typeface.json', (font) => {
const textGeometry = new THREE.TextGeometry('你好，Three.js！', {
font: font,
size: 1,
height: 0.5,
});
const textMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);
});3.3 使用其他库
如果不想手动转换字体文件，也可以考虑以下替代方法：
- **使用 ******
**troika-three-text\*\*：troika-three-text是一个兼容性更强的库，支持任意 TTF/OTF 字体，并可以通过Text类渲染中文。
import { Text } from 'troika-three-text';
const text = new Text();
text.text = '你好，Three.js！';
text.font = 'path/to/chinese-font.ttf';
text.fontSize = 1;
text.color = 0x00ff00;
scene.add(text);
text.sync();总结
通过使用支持中文的 .typeface.json 文件或者直接采用 troika-three-text 等工具，我们可以有效解决 Three.js 的 TextGeometry 无法正常显示中文的问题。希望本文能为你在项目中渲染中文文本提供帮助！